HTML フォーム要素

Webフォームを構築する際、多くの方が <input> 要素に頼りがちですが、HTMLには特定のデータ形式やユーザー体験（UX）に最適化された「助っ人」要素が数多く存在します。

これらを適切に使い分けることで、ユーザーにとって入力しやすく、開発者にとっても管理しやすいフォームを作成できます。

1. <select> と <option> 要素

<select> 要素は、ドロップダウンリストを定義します。ユーザーはその中から一つ（または複数）の選択肢を選びます。

• <option>: 個々の選択肢を定義します。
• selected 属性: ページ読み込み時にデフォルトで選択される項目を指定します。

<label for="cars">車を選択してください:</label>
<select id="cars" name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat" selected>Fiat</option>
  <option value="audi">Audi</option>
</select>

1.1 <optgroup> によるグループ化

選択肢が多い場合は、<optgroup> を使って関連する項目をグループ化し、視認性を高めることができます。

2. <textarea> 要素

<textarea> 要素は、複数行のテキスト入力領域を定義します。コメントや自己紹介など、長文を入力してもらう際に使用します。

• rows: 表示される行数（高さ）を指定。
• cols: 表示される列数（幅）を指定。

<textarea name="message" rows="10" cols="30">
ここに入力してください。
</textarea>

[!TIP]
CSSの resize プロパティを使うことで、ユーザーがブラウザ上で入力エリアの大きさを変更できるかどうかを制御できます。

3. <button> 要素

<button> 要素は、クリック可能なボタンを定義します。

<input type="button"> との違いは、ボタンの中に HTML 要素（テキストだけでなく画像やアイコンなど）を含められる点にあります。

<button type="button" onclick="alert('Hello World!')">
  <img src="icon.png" alt="icon"> クリック！
</button>

4. <fieldset> と <legend> 要素

<fieldset> 要素は、フォーム内の関連するデータをグループ化するために使用されます。
<legend> 要素は、そのグループに見出し（キャプション）を付けます。

<form>
  <fieldset>
    <legend>個人情報:</legend>
    <label for="fname">名:</label><br>
    <input type="text" id="fname" name="fname"><br>
    <label for="lname">姓:</label><br>
    <input type="text" id="lname" name="lname">
  </fieldset>
</form>

5. <datalist> 要素

<datalist> 要素は、<input> 要素に対して事前定義された選択肢（オートコンプリート機能）を提供します。

ユーザーが入力し始めると、一致する候補が表示されますが、リストにない値を自由に入力することも可能です。

<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Edge">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

6. <output> 要素

<output> 要素は、計算結果やスクリプトの実行結果を表示するために使用されます。

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  0 <input type="range" id="a" value="50"> 100
  + <input type="number" id="b" value="50">
  = <output name="x" for="a b"></output>
</form>

7. まとめ

各フォーム要素の役割を理解し、適切な場面で活用しましょう。

これらの要素を組み合わせることで、ユーザーが迷わずに操作できる、スマートな入力フォームが完成します。