フォーム

<!-- form: フォーム全体を囲む「箱」 -->
<!-- action: 送信先のURL -->
<!-- method: 送信方法（POST/GET） -->
<form action="/submit" method="POST">

  <!-- label: 入力欄の説明（「名前:」の部分） -->
  <!-- for: どのinputと紐づくか（idと同じ値） -->
  <label for="name">名前:</label>

  <!-- input: 実際の入力欄 -->
  <!-- id: labelと紐づける識別子 -->
  <!-- name: サーバーに送る時のデータ名 -->
  <input type="text" id="name" name="name">

  <!-- button type="submit": 送信ボタン -->
  <button type="submit">送信</button>

</form>

<!-- type="text": 普通のテキスト -->
<input type="text" placeholder="お名前">

<!-- type="email": メールアドレス -->
<!-- スマホでは@キーが表示される -->
<input type="email" placeholder="example@mail.com">

<!-- type="password": パスワード -->
<!-- 入力内容が●●●で隠れる -->
<input type="password" placeholder="パスワード">

<!-- type="tel": 電話番号 -->
<!-- スマホでは数字キーボードが出る -->
<input type="tel" placeholder="090-1234-5678">

<!-- type="number": 数値（上下ボタン付き） -->
<input type="number" min="0" max="100" value="50">

<!-- type="range": スライダー -->
<input type="range" min="0" max="100" value="50">

<!-- type="date": 日付（カレンダーが出る） -->
<input type="date">

<!-- type="time": 時刻 -->
<input type="time">

<!-- checkbox: 複数選択可能 -->
<p>好きな果物（複数選択可）</p>
<label>
  <input type="checkbox" name="fruits" value="apple"> りんご
</label>
<label>
  <input type="checkbox" name="fruits" value="banana"> バナナ
</label>

<!-- radio: 1つだけ選択 -->
<!-- 同じname属性で「グループ」を作る -->
<p>性別（1つ選択）</p>
<label>
  <input type="radio" name="gender" value="male"> 男性
</label>
<label>
  <input type="radio" name="gender" value="female"> 女性
</label>

<!-- textarea: 複数行のテキスト入力 -->
<!-- rows: 表示する行数 -->
<!-- placeholder: 入力前に表示するヒント -->
<textarea
  rows="4"
  placeholder="お問い合わせ内容を入力してください..."
></textarea>

<!-- select: ドロップダウンリスト -->
<!-- option: 選択肢 -->
<!-- value: サーバーに送られる値 -->
<select name="country">
  <option value="">選択してください</option>
  <option value="jp">日本</option>
  <option value="us">アメリカ</option>
  <option value="uk">イギリス</option>
</select>

<!-- required: 必須入力（空欄だと送信できない） -->
<input type="text" required placeholder="必須項目 *">

<!-- minlength/maxlength: 文字数制限 -->
<input type="text" minlength="3" maxlength="20"
       placeholder="3〜20文字">

<!-- min/max: 数値の範囲制限 -->
<input type="number" min="1" max="100"
       placeholder="1〜100の数値">

<!-- pattern: 正規表現でパターン指定 -->
<!-- 例: 郵便番号形式（123-4567） -->
<input type="text" pattern="[0-9]{3}-[0-9]{4}"
       placeholder="123-4567">

<form action="/contact" method="POST">
  <!-- 名前（必須） -->
  <div>
    <label for="name">お名前 *</label>
    <input type="text" id="name" name="name" required>
  </div>

  <!-- メール（必須、形式チェック） -->
  <div>
    <label for="email">メールアドレス *</label>
    <input type="email" id="email" name="email" required>
  </div>

  <!-- カテゴリ（選択） -->
  <div>
    <label for="category">カテゴリ</label>
    <select id="category" name="category">
      <option value="general">一般</option>
      <option value="support">サポート</option>
      <option value="sales">営業</option>
    </select>
  </div>

  <!-- メッセージ（必須、複数行） -->
  <div>
    <label for="message">メッセージ *</label>
    <textarea id="message" name="message"
              rows="5" required></textarea>
  </div>

  <!-- チェックボックス -->
  <div>
    <label>
      <input type="checkbox" name="newsletter">
      ニュースレターを受け取る
    </label>
  </div>

  <button type="submit">送信</button>
</form>