HTMLフォームの基本｜label・name・required・autocomplete の書き方

HTMLフォームの基本とは

フォームは、入力欄を並べるだけでは使いやすくなりません。ラベルとの関連付け、name、入力補助、標準の検証が揃ってはじめて、誰にとっても入力しやすいフォームになります。この記事では、フォームを組むときに最低限押さえたい属性と要素を整理します。

input の type の種類は input type の種類 に譲り、ここでは「どの入力欄にも共通して必要なもの」に集中します。

基本（構文・仕組み）

要素・属性 役割
label 入力欄の名前。クリックで入力欄にフォーカスが移る
for と id label と入力欄を結ぶ。ラベルの for と入力欄の id を一致させる
name 送信するときの項目名。無いと値が送られない
required 必須項目。空だと送信前にブラウザが止める
autocomplete ブラウザの自動入力のヒント
fieldset と legend 関連する項目(ラジオ群など)をまとめ、グループ名を付ける
textarea / select 複数行入力 / 選択肢
button type=”submit” 送信ボタン

MDN によると、label と入力欄の関連付けには2通りあります。for/id を使う明示的な方法（推奨）と、入力欄を label の中に入れる暗黙的な方法です。ラベルがあると、スクリーンリーダーが入力欄の目的を読み上げ、ラベルをクリック・タップしても入力欄を操作でき、タッチ操作の当たり判定が広がります。

autocomplete に適切な値を指定すると、WCAG 2.2 の達成基準 1.3.5「入力目的の特定」（レベルAA）に適合しやすくなります。例えば email、tel、name、new-password、current-password、one-time-code などです。

サンプルコード（実行結果つき）

<form action="/contact" method="post">
  <p>
    <label for="n">お名前</label><br>
    <input id="n" name="name" type="text" autocomplete="name" required>
  </p>
  <fieldset>
    <legend>連絡方法</legend>
    <label><input type="radio" name="c" value="mail" checked> メール</label>
    <label><input type="radio" name="c" value="tel"> 電話</label>
  </fieldset>
  <p>
    <label for="m">内容</label><br>
    <textarea id="m" name="msg" rows="3" maxlength="100"></textarea>
  </p>
  <p>
    <label for="s">種別</label>
    <select id="s" name="kind">
      <option value="">選択</option>
      <option value="a">質問</option>
    </select>
  </p>
  <p><button type="submit">送信</button></p>
</form>

ラベルに対応する入力欄は、JSの input.labels で取得できます。

const n = document.getElementById("n");
console.log(n.labels[0].textContent); // "お名前"

悪い例です。ラベルが無く、placeholder だけで項目名を伝えています。

<!-- 悪い例 -->
<input type="text" placeholder="お名前">

動作確認（検証環境と結果）

  • 環境: Windows 11、headless Microsoft Edge 154.0.4258.53（Chromium系、render.ps1）。
  • 結果（ラベル）: n.labels[0].textContent は「お名前」で、for/id の関連付けが有効でした。
  • 結果（検証）: 名前欄が空の状態で form.checkValidity() は false、「山田」を入力後は true でした。
  • 結果（送信値）: new FormData(form) の中身は {"name":"山田","c":"mail","msg":"","kind":""} で、name を付けた項目が出力され、ラジオは選択済みの値だけが入りました。
  • 結果（補足）: ラベル「お名前」を click() するとフォーカスが id="n" の入力欄に移りました。type を省略した form 内の button の type は submit でした。
  • 未検証: 実際の送信、スクリーンリーダーの読み上げ、ブラウザの自動入力の動作。
  • ログ: C:Tempks2techtestshtml-form-label-attributes.md。

HTMLフォームの基本の注意点

  • 標準の検証は利便性のためです。セキュリティのため、サーバー側で必ず入力値を検証・エスケープします(XSS・SQLインジェクション対策)。
  • label の中にリンクなどの操作要素を入れないよう、MDN は注意しています。利用規約のリンクは label の外に置きます。
  • label の中に見出しを入れるのも避けます。見た目はCSSで調整します。
  • autocomplete="off" は、パスワードマネージャーなどに無視されることがあり、安易な指定は避けるよう MDN は述べています。
  • fieldset の中のグループ名は legend で示し、最初の子要素に置きます。

HTMLフォームの基本でよくあるミス

  • for と id が一致していない、id が重複している。
  • name を付け忘れて、送信しても値が届かない。
  • placeholder をラベルの代わりに使う。入力開始と同時に消え、コントラストも低くなりがちです。
  • ラジオボタンの name を揃えず、複数選択できてしまう。
  • 必須項目を required だけで示し、見た目に「必須」と書かない。
  • button の type を省略し、form 内で意図せず送信される(form 内の button の既定は submit です)。

ブラウザ対応・バージョン

ここで扱う要素・属性は、現行の主要ブラウザで広く使えます。autocomplete の各トークンの扱いは、ブラウザやパスワードマネージャーによって差があるため、実際の挙動は対象ブラウザで確認してください。標準の検証メッセージの文言と見た目も、ブラウザごとに異なります。

HTMLフォームの基本のチェックリスト

  • [ ] すべての入力欄に label を結び付けている。
  • [ ] name を付けている。
  • [ ] required や maxlength などの制約を適切に付けている。
  • [ ] autocomplete を適切に指定している。
  • [ ] ラジオ・チェックボックスは fieldset と legend でまとめている。
  • [ ] サーバー側で検証している。

HTMLフォームの基本のFAQ（よくある質問）

Q. label で入力欄を囲む方式と for 方式はどちらが良いですか。
A. MDN は、支援技術との互換性やスタイルの自由度から for/id の明示的な方法を勧めています。

Q. 必須項目を減らすメリットはありますか。
A. 項目が少ないほど入力の負担が減ります。詳しくは コンバージョンアップの為にもフォームの入力必須”以外”の項目は捨てよう。 を参照してください。

Q. novalidate はいつ使いますか。
A. 独自の検証UIを自作する場合などに、ブラウザ標準の検証を止めるために使います。

筆者の見解（HTMLフォームの基本）

私見では、フォームの品質はデザインよりも「ラベル、name、autocomplete、サーバー側検証」の4点で決まると考えます。見た目を凝る前に、キーボードだけで最後まで入力・送信できるか、ラベルをクリックして入力欄に移れるかを確認する習慣が、コーディングの実務では効果的です。入力項目そのものを減らす見直しが、最も効果的な改善であることも多いと考えます。

HTMLフォームの基本の関連項目

出典（一次情報）

タイトルとURLをコピーしました