Frontend Academy · レッスン

フォーム: input、label、button

ラベル付きの入力欄、各種のinput、textarea、select、送信ボタンを備えたアクセシブルなHTMLフォームを構築します。

「フォーム: input、label、button」はCoddyKit上の無料Frontend Academyレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

HTMLフォームとは

フォームは、ユーザーがサーバーにデータを送信するための主な方法です。ログイン、検索、購入手続き、フィードバックなどに使用します。ネイティブのフォーム要素を使うだけで、バリデーション、キーボード入力、モバイルキーボードなど、ブラウザーに組み込まれた多くの機能を無料で利用できます。

<form>要素

<form>要素は、関連するすべてのコントロールを囲みます。action属性でデータの送信先URLを指定し、methodでGETまたはPOSTを指定します。SPAでは、デフォルトの送信を阻止し、JavaScriptで処理することがよくあります。

<form action="/submit" method="POST">
  <!-- inputs go here -->
</form>

テキスト入力とメール入力

<input>要素は、フォームで中心的な役割を果たします。type属性によって動作が変わります。自由なテキストにはtype="text"、メールアドレスにはtype="email"を使用します。後者は形式を検証し、適切なモバイルキーボードを表示します。

<input type="text" name="username" placeholder="Enter your name">
<input type="email" name="email" placeholder="you@example.com">

パスワード、数値、その他のタイプ

その他にも便利な入力タイプがあります。passwordは文字を隠し、numberは数値を検証してスピナーを表示し、dateは日付選択を表示し、rangeはスライダーになり、checkboxは真偽値の切り替え、radioは複数の選択肢から1つを選ぶために使用します。

<input type="password" name="pass">
<input type="number" name="age" min="0" max="120">
<input type="date" name="birthday">
<input type="range" min="0" max="100" value="50">

<label>要素 — アクセシビリティに不可欠

すべての入力欄には、対応する<label>が必要です。labelは、そのフィールドの用途をユーザーやスクリーンリーダーに伝えます。labelをクリックすると入力欄にフォーカスが移ります。入力欄のidと一致するfor属性を使用してください。

<label for="username">Username</label>
<input type="text" id="username" name="username">

TextareaとSelect

複数行のテキスト（コメントなど）には<textarea>を使用します。ドロップダウンの選択肢には、子要素として<option>を持つ<select>を使用します。「カテゴリを選択」のような案内文を含む、デフォルトの空の選択肢を必ず追加してください。

<textarea name="message" rows="4" placeholder="Write your message..."></textarea>

<select name="level">
  <option value="">Select level...</option>
  <option value="a1">A1 Beginner</option>
  <option value="b1">B1 Intermediate</option>
</select>

チェックボックスとラジオボタン

関連するチェックボックスは、<fieldset>と<legend>でグループ化してください。同じnameを持つラジオボタンでは、1つだけ選択できます。それぞれに専用のラベルが必要です。

<fieldset>
  <legend>Preferred languages</legend>
  <label><input type="checkbox" name="lang" value="js"> JavaScript</label>
  <label><input type="checkbox" name="lang" value="ts"> TypeScript</label>
</fieldset>

ボタン：submit、reset、button

<button type="submit">はフォームを送信します。type="reset"はすべてのフィールドを消去します。type="button"はデフォルトでは何も行わず、JavaScriptのイベントリスナーと組み合わせて使用します。必ずtypeを設定してください。デフォルトはsubmitです。

<button type="submit">Send Message</button>
<button type="reset">Clear Form</button>
<button type="button" id="preview">Preview</button>

入力を<fieldset>でグループ化

<fieldset>は、関連するコントロールを視覚的および意味的にグループ化します。必須の<legend>はキャプションを提供します。スクリーンリーダーはグループ内の各コントロールの前にlegendを読み上げるため、文脈を把握できます。

name属性 — 送信される内容

フォームを送信すると、ブラウザーは各コントロールのname=valueの組を送信します。name属性を持つコントロールだけが含まれます。チェックボックスの場合は、チェックされているものだけが送信されます。

<input type="text" name="firstName" value="Alice">
<!-- Submits: firstName=Alice -->

自動入力とautocomplete

email、given-name、new-password、current-passwordなどのautocomplete属性値を設定すると、パスワードマネージャーやブラウザーの自動入力がフォームに正しく入力できるようになります。

<input type="email" name="email" autocomplete="email">
<input type="password" name="pass" autocomplete="current-password">

確認問題

<label>要素のfor属性には、どのような目的がありますか？

まとめ：アクセシブルなHTMLフォーム

すべての入力欄にはラベルが必要です。データに適した入力タイプを選択してください。関連するコントロールはfieldsetでグループ化します。送信にはbutton type=submitを使用してください。JavaScriptを追加する前に、バリデーション、キーボード操作、自動入力など、フォームが標準で備えている機能を活用しましょう。

よくある質問