HTMLでユーザーからの入力を受け取る際に欠かせないのがform要素です。検索フォームやお問い合わせフォーム、ログイン画面など、Webサイトのあらゆる場面で利用されます。ここではform要素の基本構造と正しいマークアップ方法を解説します。
form要素の基本構造
formは入力欄や送信ボタンをグループ化する要素で、送信先や送信方法を属性で指定します。
<form action="/submit" method="post">
<label for="username">ユーザー名</label>
<input type="text" id="username" name="username" required>
<label for="password">パスワード</label>
<input type="password" id="password" name="password" required>
<button type="submit">送信</button>
</form>
actionは送信先URL、methodはHTTPメソッド（主にgetかpost）を指定します。
よく使う入力フィールド
フォームでは用途に応じてさまざまなinput typeを使い分けます。
<input type="text" name="name"> テキスト入力
<input type="email" name="email"> メールアドレス（バリデーション付き）
<input type="number" name="age"> 数値入力
<input type="date" name="birth"> 日付入力
<textarea name="message"></textarea> 複数行テキスト
<select name="country">
<option value="jp">日本</option>
<option value="us">アメリカ</option>
</select>
labelとfor属性の正しい使い方
labelは入力欄と結びつけることで、クリック時に入力欄へフォーカスが移動します。for属性には対応するinputのidを指定します。
<label for="email">メールアドレス</label>
<input type="email" id="email" name="email">
スクリーンリーダー対応や入力補助に必須です。
必須入力とバリデーション
required属性を付与すると未入力時に送信できなくなります。type属性に応じて自動的にフォーマット検証も行われます。
<input type="email" name="email" required>
pattern属性で正規表現による独自バリデーションも可能です。
fieldsetとlegendでグループ化
複数の入力欄を意味ごとにまとめると可読性とアクセシビリティが向上します。
<fieldset>
<legend>連絡先情報</legend>
<label for="phone">電話番号</label>
<input type="tel" id="phone" name="phone">
</fieldset>
送信ボタンとリセットボタン
button要素やinput type=”submit”で送信ボタンを作れます。type=”reset”は入力内容をリセットします。
<button type="submit">送信</button>
<button type="reset">リセット</button>
まとめ
form要素はユーザー入力を扱う基本であり、正しいマークアップにより使いやすさとアクセシビリティが向上します。actionとmethodの指定、labelの適切な利用、requiredによる入力チェック、fieldsetによる構造化を意識することで、ユーザーに優しいフォームを実装できます。
