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>