このlessonをすべて読み終えたら、以下の3つを自信を持って実践できるようになります。

• ▸✅ input typeごと（text/email/password/number）の違い
• ▸✅ label + forのアクセシビリティ上の意味
• ▸✅ 基本的なクライアントサイド検証（required · pattern · minLength）

学習目標をチェックリストとして手元に置き、すべて答えられるようになったらlessonを閉じてください。

なぜformが必要なのか

Webは読むだけの場所ではありません。ログイン・検索・決済・コメント — これらはすべてユーザーの入力を必要とします。その入力を受け付ける標準的なツールが<form>です。

基本構造

<form action="/api/login" method="POST">
    <label for="email">メールアドレス</label>
    <input type="email" id="email" name="email" required>

    <label for="password">パスワード</label>
    <input type="password" id="password" name="password" required minlength="8">

    <button type="submit">ログイン</button>
</form>

• ▸action — どこに送信するか（URL）
• ▸method — GET（検索・フィルター） / POST（作成・更新・ログイン）
• ▸name — サーバーが受け取るキー（req.body.email）
• ▸for ↔ id — labelとinputの関連付け（アクセシビリティ）

inputのtype — ブラウザに任せる

<input type="text">       <!-- 一般テキスト -->
<input type="email">      <!-- メール検証 + モバイルキーボード -->
<input type="password">   <!-- マスキング -->
<input type="number">     <!-- 数字キーボード + 矢印 -->
<input type="tel">        <!-- 電話番号キーボード -->
<input type="date">       <!-- 日付選択ツール -->
<input type="file">       <!-- ファイル選択 -->
<input type="checkbox">   <!-- チェックボックス -->
<input type="radio">      <!-- ラジオボタン -->
<textarea></textarea>     <!-- 複数行 -->
<select><option></option></select>  <!-- ドロップダウン -->

typeを変えるだけでブラウザが自動的に適切なUI・検証・キーボードを提供します。typeを正確に指定することが、アクセシビリティとUXの第一歩です。

HTML5検証

<input type="email" required pattern="[^@]+@[^@]+\.[^@]+">
<input type="number" min="1" max="100" step="1">
<input type="text" required minlength="2" maxlength="20">

JavaScriptなしでも基本的な検証が自動で行われます。送信時に入力が不正な場合、ブラウザがブロックしてメッセージを表示します。

> ⚠️ ただし、サーバーサイド検証も必ず必要です。クライアントサイド検証はUX用、サーバーサイド検証はセキュリティ用です。

アクセシビリティ — labelの重要性

<!-- ❌ 良くない -->
<input type="text" placeholder="名前">

<!-- ✅ 良い -->
<label for="name">名前</label>
<input type="text" id="name" name="name">

labelは視覚障害者のスクリーンリーダーが読み上げるテキストです。placeholderだけでは不十分です（入力すると消えてしまうため）。

まとめ

<form> + <input type="..."> + <button type="submit"> だけで基本的なフォームは完成します。typeを正確に指定すれば、ブラウザが大部分を自動で処理してくれます。

このlessonの概念を理解すれば、AIに具体的な指示を出せるようになります。漠然とした「直して」ではなく、語彙を持ったリクエスト — それがトークン節約の出発点です。

• ▸「このformにクライアントサイド検証（required, pattern, minLength）を追加して」
• ▸「これらのinputをlabelと明示的に関連付けて」
• ▸「このformのsubmit後に入力値をリセットしてエラーメッセージを表示するパターンを作って」

なぜこれがトークンを節約するのか

概念を知らないと、AIの回答を受け取っても「それって何ですか？」と再度質問しなければなりません。その「再質問」がトークンを消費します。概念を一度覚えておけば、会話が一度で完結します。