HTML講座 / fieldset・legend・autocompleteでフォームを説明する

関連する入力欄はfieldsetでまとめ、legendでグループの質問や目的を示せます。氏名やメールなどには適切なautocompleteのトークンを付け、ブラウザーへ入力の目的を伝えます。これは初期値や検証規則を指定する機能ではありません。

一つの質問をfieldsetとlegendでまとめる

ラジオボタンの各ラベルは答えを示しますが、どの質問への答えかも必要です。次のlegendがグループ全体の名前を表します。HTML文書のbodyへ入れて試してください。

<fieldset>
  <legend>How should we contact you?</legend>
  <label><input type="radio" name="contact" value="email"> Email</label>
  <label><input type="radio" name="contact" value="phone"> Phone</label>
</fieldset>

二つのラジオは同じname="contact"なので片方だけ選べます。別の質問には別のfieldsetと別のnameを使います。枠や見出しの初期表示はCSSで変えられますが、そのために構造を取り除く必要はありません。選択と送信値はcheckboxとradioでも比較できます。

autocompleteで入力目的を伝える

autocomplete="name"は氏名、autocomplete="email"はメールを求める欄だと伝えます。値を固定したり利用者の代わりに送信したりする指定ではなく、候補が出るかは保存情報やブラウザー設定にもよります。

<form action="/contact" method="post">
  <fieldset>
    <legend>Contact details</legend>
    <label for="full-name">Full name</label>
    <input id="full-name" name="full_name" autocomplete="name">
    <label for="email">Email address</label>
    <input id="email" name="email" type="email" autocomplete="email">
  </fieldset>
  <button type="submit">Send</button>
</form>

nameは送信時のキー、autocompleteは入力目的のヒントです。/contactは例示で、受信サービスには別の処理が必要です。自動入力の指定があっても、labelとidの関連付けは必要です。

独立した質問と自動入力の目的を試す

次の完全な文書をgroups.htmlとして保存します。連絡方法でEmail、時間帯でMorningを選ぶと、両方の選択が同時に維持されます。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Group practice</title>
</head>
<body>
  <h1>Answer two independent questions</h1>
  <form id="groups-form" method="get">
    <fieldset>
      <legend>Contact method</legend>
      <label><input type="radio" name="contact" value="email" required> Email</label>
      <label><input type="radio" name="contact" value="phone"> Phone</label>
    </fieldset>
    <fieldset>
      <legend>Visit time</legend>
      <label><input type="radio" name="visit" value="morning" required> Morning</label>
      <label><input type="radio" name="visit" value="afternoon"> Afternoon</label>
    </fieldset>
    <button type="submit">Inspect both answers</button>
  </form>
</body>
</html>

比較のため、時間帯の二つのラジオのnameを一時的にcontactへ変えます。一方の質問への選択で他方が外れることを確認し、両方をvisitへ戻してください。グループは見た目の枠だけでなくnameで決まります。

postal-codeは郵便番号の書式検証ではありません。保存情報がない環境では候補が出ない場合もあるので、手入力できることも確認します。

グループ化と自動入力を点検する

無関係な質問を一つのfieldsetへ押し込まず、一つの質問の選択肢を説明なしに分散させないようにします。二つ目の質問への回答で一つ目が消えるならnameを比較してください。任意の単語ではなく定義されたautocompleteのトークンを使います。MDNのautocompleteとfieldsetで使用条件を確認できます。