formタグサンプル

html formタグサンプルをメモしておきます。

シンプルバージョン

<form action="submit.php" method="POST">
  <!-- テキスト入力欄 -->
  <label for="name">名前:</label>
  <input type="text" id="name" name="name"><br>

  <!-- パスワード入力欄 -->
  <label for="password">パスワード:</label>
  <input type="password" id="password" name="password"><br>

  <!-- チェックボックス -->
  <label for="checkbox1">好きな色:</label>
  <input type="checkbox" id="checkbox1" name="color[]" value="red">
  <label for="checkbox2">赤</label>
  <input type="checkbox" id="checkbox2" name="color[]" value="blue">
  <label for="checkbox3">青</label><br>

  <!-- ラジオボタン -->
  <label for="radio1">性別:</label>
  <input type="radio" id="radio1" name="gender" value="male">
  <label for="radio2">男性</label>
  <input type="radio" id="radio2" name="gender" value="female">
  <label for="radio3">女性</label><br>

  <!-- ドロップダウンメニュー -->
  <label for="dropdown">年齢:</label>
  <select id="dropdown" name="age">
    <option value="20">20歳未満</option>
    <option value="20-29">20代</option>
    <option value="30-39">30代</option>
    <option value="40-49">40代</option>
    <option value="50">50歳以上</option>
  </select><br>

  <!-- 複数行テキスト入力欄 -->
  <label for="comments">コメント:</label>
  <textarea id="comments" name="comments"></textarea>

  <!-- 送信ボタン -->
  <input type="submit" value="送信">
</form>

Bootstrapクラス追加バージョン

<form class="form" action="submit.php" method="POST">
  <!-- テキスト入力欄 -->
  <div class="form-group mb-3">
    <label for="name">名前</label>
    <input type="text" class="form-control" id="name" name="name">
  </div>

  <!-- パスワード入力欄 -->
  <div class="form-group mb-3">
    <label for="password">パスワード</label>
    <input type="password" class="form-control" id="password" name="password">
  </div>

  <!-- チェックボックス -->
  <div class="form-group mb-3">
    <label for="checkbox1">好きな色</label><br>
    <div class="form-check form-check-inline">
      <input type="checkbox" class="form-check-input" id="checkbox1" name="color[]" value="red">
      <label class="form-check-label" for="checkbox1">赤</label>
    </div>
    <div class="form-check form-check-inline">
      <input type="checkbox" class="form-check-input" id="checkbox2" name="color[]" value="blue">
      <label class="form-check-label" for="checkbox2">青</label>
    </div>
  </div>

  <!-- ラジオボタン -->
  <div class="form-group mb-3">
    <label for="radio1">性別</label><br>
    <div class="form-check form-check-inline">
      <input type="radio" class="form-check-input" id="radio1" name="gender" value="male">
      <label class="form-check-label" for="radio1">男性</label>
    </div>
    <div class="form-check form-check-inline">
      <input type="radio" class="form-check-input" id="radio2" name="gender" value="female">
      <label class="form-check-label" for="radio2">女性</label>
    </div>
    <div class="form-check form-check-inline">
      <input type="radio" class="form-check-input" id="radio3" name="gender" value="other">
      <label class="form-check-label" for="radio3">その他</label>
    </div>
    <div class="form-check form-check-inline">
      <input type="radio" class="form-check-input" id="radio4" name="gender" value="noanswer">
      <label class="form-check-label" for="radio4">答えない</label>
    </div>
  </div>

  <!-- ドロップダウンメニュー -->
  <div class="form-group mb-3">
    <label for="dropdown">年齢</label>
    <select class="form-select mb-3" id="dropdown" name="age">
      <option value="20">20歳未満</option>
      <option value="20-29">20代</option>
      <option value="30-39">30代</option>
      <option value="40-49">40代</option>
      <option value="50">50歳以上</option>
    </select>
  </div>

  <!-- 複数行テキスト入力欄 -->
  <div class="form-group mb-3">
    <label for="comments">コメント</label>
    <textarea class="form-control" id="comments" name="comments"></textarea>
  </div>

  <!-- 送信ボタン -->
  <div class="form-group mb-3"></div>
    <button type="submit" class="btn btn-primary">送信</button>
  </div>
</form>