ほとんどのサイトとアプリケーションにはウェブフォームが用意されています。たとえば、DoWebsites<form> 要素に含まれています。
HTML <form> 要素は、情報を送信するためのインタラクティブなコントロールを含むドキュメントのランドマークを識別します。<form> 内には、フォームを構成するインタラクティブ（および非インタラクティブ）フォーム コントロールがすべて配置されています。
HTML は強力です。このセクションでは、HTML が持つ力に焦点を当て、JavaScript を追加せずに HTML でできることについて説明します。フォームデータをクライアントサイドでなんらかの方法で UI を更新する場合、通常は CSS や JavaScript が必要ですが、ここではそれらについては扱いません。フォームについて学ぶコースが用意されています。ここではそのセクションを複製しませんが、いくつかのフォーム コントロールと、それらを制御する HTML 属性について説明します。
フォームを使用すると、ユーザーがウェブサイトまたはアプリケーションを操作し、入力された情報を確認し、データをサーバーに送信できるようになります。HTML 属性を使用すると、ユーザーにフォーム コントロールの選択や値の入力を要求できます。HTML 属性では、値が一致する必要のある特定の条件を定義できます。ユーザーがフォームを送信しようとすると、すべてのフォーム コントロールの値についてクライアントサイドの制約の検証が行われます。これにより、データが必須基準を満たすまで送信できなくなる場合があります。すべて JavaScript を使用しない場合です。この機能は無効にすることもできます。<form> またはボタンの formnovalidate（より多い場合）で novalidate 属性を設定し、後で完了するためにフォームデータを保存すると、検証ができなくなります。
フォームの送信
フォームは、ユーザーがフォーム内にネストされている送信ボタンを有効にすると送信されます。ボタンに <input> を使用する場合、「value」はボタンのラベルであり、ボタン内に表示されます。<button> を使用する場合、ラベルは、開始タグと終了 <button> タグの間にあるテキストです。送信ボタンは、次の 2 つの方法のいずれかで記述できます。
<input type="submit" value="Submit Form">
<button type="submit">Submit Form</button>
非常にシンプルなフォームの場合、<form> 要素、その中にフォーム入力、送信ボタンが必要です。しかし、フォームの送信はそれだけではありません。
<form> 要素の属性により、フォームの送信に使用する HTTP メソッドと、フォームの送信を処理する URL が設定されます。はい。JavaScript を使用せずに、フォームの送信、処理、新しいページの読み込みが可能です。<form> 要素は非常に強力です。
<form> 要素の action 属性値と method 属性値は、フォームデータを処理する URL とデータの送信に使用される HTTP メソッドをそれぞれ定義します。デフォルトでは、フォームデータは現在のページに送信されます。それ以外の場合は、action 属性をデータの送信先の URL に設定します。
送信されるデータは、フォームのさまざまなフォーム コントロールの名前と値のペアで構成されます。デフォルトでは、name を持つフォーム内にネストされているすべてのフォーム コントロールが含まれます。ただし、form 属性を使用すると、<form> の外部にフォーム コントロールを含め、<form> 内にネストされたフォーム コントロールを省略できます。フォーム コントロールと <fieldset> でサポートされています。form 属性は、関連付けられているコントロールの id を値として受け取ります。これはネストされた形式とは限りません。つまり、フォーム コントロールを <form> に物理的にネストする必要はありません。
method 属性は、リクエストの HTTP プロトコルを定義します（通常は GET または POST）。GET を使用すると、フォームデータは action の URL に追加された name=value ペアのパラメータ文字列として送信されます。
POST を使用すると、データは HTTP リクエストの本文に追加されます。パスワードやクレジット カード情報などの安全なデータを送信する場合は、必ず POST を使用してください。
DIALOG メソッドもあります。<form method="dialog"> が <dialog> 内にある場合、フォームを送信するとダイアログが閉じます。送信イベントはありますが、データの消去も送信も行われません。繰り返しになりますが、JavaScript は使用しません。これについては、ダイアログのセクションで説明します。ただし、この方法ではフォームを送信しないため、送信ボタンに formmethod="dialog" と formnovalidate の両方を含めることをおすすめします。
フォームのボタンには、このセクションの冒頭で説明した以外の属性を含めることができます。ボタンに formaction、formenctype、formmethod、formnovalidate、formtarget の各属性が含まれている場合、フォームの送信を有効にするボタンに設定された値は、<form> に設定された action、enctype、method、target よりも優先されます。制約の検証はフォームの送信前に行われますが、有効化された送信ボタンに formnovalidate がなく、<form> に novalidate もない場合にのみ行われます。
フォームの送信に使用されたボタンをキャプチャするには、ボタンに name を指定します。名前や値のないボタンは、フォームの送信時にフォームデータと一緒に送信されません。
フォーム送信後
ユーザーがオンライン フォームを送信すると、関連するフォーム コントロールの名前と値が送信されます。名前は name 属性の値です。値は、value 属性の内容、またはユーザーが入力または選択した値から取得されます。<textarea> の値は内部テキストです。<select> の値は、選択された <option> の value です。<option> に value 属性が含まれていない場合、値は選択されたオプションの内部テキストです。
<form method="GET">
<label for="student">Pick a student:</label>
<select name="student" id="student">
<option value="hoover">Hoover Sukhdeep</option>
<option>Blendan Smooth</option>
<option value="toasty">Toasty McToastface</option>
</select>
<input type="submit" value="Submit Form">
</form>
「Hoover Sukhdeep」を選択し（または何も行わずにブラウザに表示されるので、デフォルトで最初のオプション値が選択されます）、送信ボタンをクリックすると、このページが再読み込みされ、URL は以下のように設定します。
https://web.dev/learn/html/forms?student=hoover
2 つ目のオプションには value 属性がないため、内部テキストが値として送信されます。[Blendan Smooth] を選択して送信ボタンをクリックすると、このページが再読み込みされ、URL は次のように設定されます。
https://web.dev/learn/html/forms?student=Blendan+Smooth
フォームが送信されると、name を持つすべての名前付きフォーム コントロールの名前と値が送信されます（未選択のチェックボックス、未選択のラジオボタンを除く）。また、フォームを送信したボタン以外のボタンの名前と値も送信されます。他のすべてのフォーム コントロールでは、フォーム コントロールに名前があるが、値が入力されていないかデフォルトの設定されていない場合、フォーム コントロールの name は空の値で送信されます。
入力タイプは 22 種類あるため、すべてを網羅することはできません。ただし、ユーザーに情報を入力させる場合は値を含めるかどうかは任意であり、多くの場合、適切ではありません。ユーザーが値を編集できない <input> 要素には、必ず値を含める必要があります。たとえば、hidden、radio、checkbox、submit、button、reset 型の入力要素などです。
フォーム コントロールに一意の name を使用すると、サーバーサイドのデータ処理が簡単になるので、おすすめの方法です（チェックボックスとラジオボタンはこのルールの例外です）。
ラジオボタン
ラジオボタン グループ内のラジオボタンを選択した場合に、一度に選択できるのは 1 つだけです。これは name 属性によるものです。グループ内の各ラジオボタンに同じ name を指定することで、この 1 つだけ選択可能なエフェクトが作成されます。
name はグループに対して一意である必要があります。誤って 2 つの別々のグループで同じ name を使用した場合、2 番目のグループでラジオボタンを選択すると、同じ name を持つ最初のグループで行われた選択が解除されます。
name と選択したラジオボタンの value がフォームとともに送信されます。各ラジオボタンに、関連する（通常は一意の）value があることを確認します。選択されていないラジオボタンの値は送信されません。
1 つのページには、任意の数のラジオグループを作成できます。各グループは、各グループに固有の name がある限り、独立して機能します。
同じ名前のグループのラジオボタンのいずれかを選択してページを読み込む場合は、checked 属性を指定します。
このラジオボタンは、ユーザーが別のラジオボタンを選択した場合でも、:default CSS 疑似クラスと一致します。現在選択されているラジオボタンは、:checked 疑似クラスと一致します。
ユーザーがラジオボタンのグループからラジオボタンを選択する必要がある場合は、少なくとも 1 つのコントロールに required 属性を追加します。グループ内のラジオボタンに required を含めると、フォーム送信時に選択が必要になりますが、有効として選択される属性を持つラジオボタンである必要はありません。また、フォーム コントロールが必要であることを <legend> で明確に示します。ラジオボタン グループのラベルと個々のボタンについては、後で説明します。
チェックボックス
グループ内のすべてのチェックボックスの name を同じにすることは有効です。選択されたチェックボックスについてのみ、フォームで name と value が送信されます。同じ名前のチェックボックスが複数ある場合は、（可能であれば）異なる値で同じ名前が送信されます。同じ名前のフォーム コントロールが複数ある場合、それらがすべてチェックボックスでなくても、それらはすべてアンパサンド（&）で区切られて送信されます。
チェックボックスに value を含めない場合、選択したチェックボックスの値はデフォルトで on になりますが、あまり役に立たない可能性があります。chk という名前の 3 つのチェックボックスがすべてオンの場合、フォームの送信は解読できなくなります。
https://web.dev/learn/html/forms?chk=on&chk=on&chk=on
チェックボックスを必須にするには、required 属性を追加します。チェックボックスをオンにする必要がある場合やフォーム コントロールが必要な場合は、常にユーザーに通知してください。チェックボックスに required を追加しても、チェックボックスが必須になるだけです。同じ名前の他のチェックボックスには影響しません。
ラベルとフィールド セット
フォームへの記入方法をユーザーが把握できるようにするには、フォームがアクセス可能である必要があります。すべてのフォーム コントロールにラベルが必要です。また、フォーム コントロールのグループにラベルを付ける必要があります。個々の入力領域、選択領域、テキスト領域には <label> というラベルが付きますが、フォーム コントロールのグループは、それらをグループ化する <fieldset> の <legend> のコンテンツによってラベル付けされます。
前の例では、送信ボタン以外の各フォーム コントロールに <label> があることに気付いたかもしれません。ラベルは、ユーザー補助機能用の名前をフォーム コントロールに提供します。ボタンには、コンテンツまたは値からユーザー補助機能用の名前が付けられます。他のすべてのフォーム コントロールには、関連付けられた <label> が必要です。関連付けられたラベルがない場合、ブラウザはフォーム コントロールを表示しますが、どのような情報が要求されるかはユーザーにはわかりません。
フォーム コントロールを <label> に明示的に関連付けるには、<label> に for 属性を含めます。この値は、関連付けられているフォーム コントロールの id です。
<label for="full_name">Your name</label>
<input type="text" id="full_name" name="name">
ラベルをフォーム コントロールに関連付けると、いくつかの利点があります。ラベルを使用すると、コントロールにユーザー補助機能用の名前を付けて、スクリーン リーダーのユーザーがフォーム コントロールにアクセスできるようになります。ラベルは「ヒットエリア」でもあります。ラベルによって範囲が広がるため、細かな問題があるユーザーがサイトをより利用しやすくなります。マウスを使用している場合は、[自分の名前] ラベルの任意の場所をクリックしてみてください。これにより、入力がフォーカスされます。
暗黙的なラベルを指定するには、<label> の開始タグと終了タグの間にフォーム コントロールを挿入します。スクリーン リーダーとポインタ デバイスの両方の観点から同様にアクセスできますが、明示的なラベルのようなスタイル設定フックは提供されません。
<label>Your name
<input type="text" name="name">
</label>
ラベルは「ヒットエリア」であるため、明示的なラベル内にインタラクティブな要素を含めないでください。また、暗黙的なラベルには、ラベル付きのフォーム コントロール以外のインタラクティブ コンポーネントを含めないでください。たとえば、ラベルにリンクを含めると、ブラウザが HTML をレンダリングするときに、ユーザーがラベルをクリックしてフォーム コントロールに入ったものの、新しいページにリダイレクトされると混乱します。
通常、ラジオボタンとチェックボックスを除き、<label> はフォーム コントロールの前に配置されます。これは必須ではありません。一般的な UX パターンと同じです。「フォーム学習」シリーズでは、フォームのデザインに関する情報を提供しています。
ラジオボタンとチェックボックスのグループの場合、ラベルは関連付けられているフォーム コントロールのアクセス可能な名前になりますが、コントロールとそのラベルのグループにもラベルが必要です。グループにラベルを付けるには、すべての要素を <fieldset> にグループ化し、<legend> でグループのラベルを指定します。
<fieldset>
<legend>Who is your favorite student?</legend>
<ul>
<li>
<label>
<input type="radio" value="blendan" name="machine"> Blendan Smooth
</label>
</li>
<li>
<label>
<input type="radio" value="hoover" name="machine"> Hoover Sukhdeep
</label>
</li>
<li>
<label>
<input type="radio" value="toasty" name="machine"> Toasty McToastface
</label>
</li>
</ul>
</fieldset>
この例では、暗黙的な <label> はそれぞれラジオボタンにラベルを付け、<legend> はラジオボタン グループのラベルを提供します。別の <fieldset> 内に <fieldset> をネストするのは標準的な方法です。たとえば、関連する質問のグループに分かれた多数の質問から成るアンケートの場合、「お気に入りの生徒」<fieldset> を「お気に入り」というラベルの付いた別の <fieldset> にネストできます。
<fieldset>
<legend>Your favorites:</legend>
<ul start="6">
<li>
<fieldset>
<legend>Who is your favorite student?</legend>
<ul>
<li>
<!-- the rest of the code here -->
これらの要素はデフォルトの外観では使用されていないため、CSS を使用して <legend> と <fieldset> のスタイルを設定できます。<fieldset> は、すべてのグローバル属性に加えて、name、disabled、form の各属性もサポートします。フィールドセットを無効にすると、ネストされたフォーム コントロールはすべて無効になります。<fieldset> では、name 属性も form 属性もあまり使用できません。name を使用すると、JavaScript でフィールドセットにアクセスできますが、フィールドセット自体は送信されるデータに含まれません（内部にネストされている名前付きフォーム コントロールは含まれます）。
入力タイプと動的キーボード
前述のように、入力には 22 種類あります。場合によっては、ユーザーがスマートフォンなど、必要に応じてのみ表示される動的キーボードを備えたデバイスを使用している場合は、使用する入力タイプによって表示されるキーボードのタイプが決まることがあります。表示されるデフォルトのキーボードは、必要な入力タイプに合わせて最適化できます。たとえば、「tel」と入力すると、電話番号の入力用に最適化されたキーパッドが表示されます。email の場合は、@ と . が含まれます。url の動的キーボードには、コロンとスラッシュ記号が含まれます。残念ながら iPhone では、まだ url 入力タイプのデフォルトの動的キーボードに : がありません。
iPhone と 2 台の Android スマートフォンの <input type="tel"> キーボード:
iPhone と 2 台の Android スマートフォンの <input type="email"> キーボード:
マイクとカメラへのアクセス
ファイル入力タイプ <input type="file"> を使用すると、フォーム経由でファイルをアップロードできます。任意の種類のファイルで、accept 属性で定義および制限できます。使用可能なファイル形式のリストは、ファイル拡張子のカンマ区切りのリスト、グローバル タイプ、またはグローバル タイプと拡張子の組み合わせです。たとえば、accept="video/*, .gif" と指定すれば、動画ファイルやアニメーション GIF がすべて許可されます。
音声ファイルには「audio/*」、動画ファイルには「video/*」、画像ファイルには「image/*」を使用します。
メディア キャプチャ仕様で定義されている列挙型の capture 属性は、ユーザーのカメラまたはマイクを使用して新しいメディア ファイルを作成する場合に使用できます。ユーザー向けの入力デバイスの場合は user に、スマートフォンの背面カメラまたはマイクの場合は environment を設定できます。通常、ユーザーが使用する入力デバイスを選択するため、値を指定せずに capture を使用すると機能します。
<label for="avatar">A recent photo of yourself:</label>
<input type="file" capture="user" accept="image/*" name="avatar" id="avatar">
組み込み検証
繰り返しになりますが、JavaScript を組み込まないと、HTML で無効な値を含むフォームの送信を防げます。
HTML 属性の有無に基づいてフォーム コントロールを照合する CSS セレクタがいくつかあります。たとえば、ブール値 required が設定されているかどうかに応じて :required と :optional、checked がハードコードされている場合は :default、要素が存在するかどうかによって :enabled または {/19/}（2）:disableddisabled:read-write 疑似クラスは、contenteditable が設定された要素と、デフォルトで編集可能なフォーム コントロール（number、password、text 入力タイプなど）に一致します（ただし、チェックボックス、ラジオボタン、hidden タイプなどには一致しません）。通常は書き込み可能な要素に readonly 属性が設定されている場合は、代わりに :read-only と一致します。
ユーザーがフォーム コントロールに情報を入力すると、CSS UI セレクタ（:valid、:invalid、:in-range、:out-of-range など）が状態に応じてオンまたはオフに切り替わります。ユーザーがフォーム コントロールを終了すると、まだ完全にサポートされていない :user-invalid 疑似クラスまたは :user-valid 疑似クラスが一致します。
CSS を使用すると、ユーザーがフォームを操作するときに、フォーム コントロールが必要で有効かどうかを示す手がかりを提供できます。CSS を使用して、フォームが有効になるまでユーザーが送信ボタンをクリックできないようにすることもできます。
form:invalid [type="submit"] {
opacity: 50%;
pointer-events: none;
}
この CSS スニペットはアンチパターンです。UI は直感的でわかりやすいものと感じられるかもしれませんが、多くのユーザーはエラー メッセージを有効にするためにフォームを送信しようとします。このように送信ボタンが無効になっているようにしても、制約（多くのユーザーが依存している機能）の検証にはなりません。
適用されている CSS は、UI の現在の状態に基づいて継続的に更新されます。たとえば、email、number、url、日付型などの制約付きの入力型が含まれている場合、値が null 以外（空ではない）で、現在の値が有効なメール、数値、URL、日付、時刻ではない場合、:invalid CSS 疑似クラスが一致します。この継続的な更新は、ユーザーがフォームを送信しようとした場合にのみ行われる組み込みの HTML 制約検証とは異なります。
組み込み制約の検証は、HTML 属性で設定された制約にのみ関連します。:required 疑似クラスと :valid/:invalid 疑似クラスに基づいて要素のスタイルを設定できますが、required、pattern、min、max、さらに type の各属性に基づくエラーに起因するブラウザが提供するエラー メッセージは、フォーム送信時に表示されます。
必要なお気に入りの学生を選択せずにフォームを送信しようとすると、validityState.valueMissing エラーのため、制約の検証によってフォームが送信されなくなります。
validityState プロパティのいずれかが true を返した場合、送信はブロックされ、ブラウザは最初の間違ったフォーム コントロールにエラー メッセージを表示し、フォーカスします。ユーザーがフォームの送信を有効にして無効な値がある場合は、最初の無効なフォーム コントロールにエラー メッセージが表示され、フォーカスを受け取ります。必須のコントロールに値が設定されていない場合、数値が範囲外の場合、または値が type 属性で要求される型でない場合、フォームは検証されず、送信されず、エラー メッセージが表示されます。
number、日付、時刻の値が min の最小値を下回るか、最大値の max を超えている場合は、コントロールが :out-of-range（および :invalid）になり、フォームを送信しようとすると valididityState.rangeUnderflow validityState.rangeOverflow エラーが通知されます。値が step の値とずれている場合（明示的に設定またはデフォルトで 1 に設定しているかにかかわらず）、コントロールは :out-of-range（および :invalid）になり、validityState.stepMismatch エラーになります。エラーはバブル形式で表示され、デフォルトでは、間違いを修正する方法に関する有用な情報が提供されます。
値の長さに関しても同様の属性があります。minlength 属性と maxlength 属性は、送信時に validityState.tooLong または validityState.tooShort でユーザーにエラーを通知します。また、maxlength により、ユーザーが大量の文字を入力できないようにしています。
maxlength 属性を使用すると、ユーザー エクスペリエンスが低下する可能性があります。一般的に、許容される文字数を超える文字数をユーザーが入力できるようにすると便利です。ユーザーは、必要に応じて <output> 要素の形式でカウンタを提供します。この入力は、フォームと一緒に送信されず、最大許容文字数を超えていないと表示されるまで、ユーザーがテキストを編集できるようにします。maxlength は HTML に含めることができます。これまでに説明したとおり、JavaScript がなくても機能します。読み込み時に maxlength 属性の値を使用して、JavaScript でこの文字カウンタを作成できます。
一部の入力型にはデフォルトの制約があるように見えますが、そうではありません。たとえば、tel 入力タイプは、動的キーボードを備えたデバイスで数字の電話キーパッドを提供しますが、有効な値を制約しません。この属性と他の入力タイプには、pattern 属性があります。値が有効と見なされるために一致する必要のある正規表現を指定できます。値が空の文字列で、その値が必須でない場合、validityState.patternMismatch エラーは発生しません。必須で空の場合、patternMismatch ではなく validityState.valueMissing のデフォルトのエラー メッセージがユーザーに表示されます。
メールの場合、validityState.typeMismatch ではおそらくニーズに合わない可能性があります。pattern 属性を含めると、TLD のないイントラネット メールアドレスが有効なものとして認識されなくなります。パターン属性を使用すると、値が一致する必要のある正規表現を指定できます。パターン一致を必要とする場合は、想定されることがユーザーに明確になるようにします。
これらはすべて JavaScript を 1 行も使用せずに実行できますが、HTML API である JavaScript を使用して、制約の検証時にカスタム メッセージを含めることができます。また、JavaScript を使用して、残りの文字数を更新したり、パスワードの安全度を示す進行状況バーを表示したりするなど、入力候補を動的に促進するさまざまな方法を使用することもできます。
例
この例には <dialog> 内のフォームがあり、<form> がネストされ、3 つのフォーム コントロールと 2 つの送信ボタンがあり、明確なラベルと手順が示されています。
最初の送信ボタンをクリックすると、ダイアログが閉じます。formmethod="dialog" を使用してフォームのデフォルトのメソッドをオーバーライドし、データの送信や消去を行わずに <dialog> を閉じます。また、formnovalidate も含める必要があります。そうしないと、ブラウザはすべての必須フィールドに値が設定されていることの確認の検証を試みます。ユーザーは、データを入力せずにダイアログとフォームを閉じることができますが、検証を行うことでそれを妨げます。「X」は既知の視覚的な手がかりですが、わかりやすいラベルではないため、aria-label="close" を含めます。
フォーム コントロールはすべて暗黙的なラベルを持っているため、id 属性や for 属性を含める必要はありません。両方の入力要素に必須属性があります。数値入力に step が明示的に設定されていて、step がどのように含まれるかが示されています。step はデフォルトで 1 に設定されるため、この属性は省略できます。
<select> にはデフォルト値があるため、required 属性は不要です。各オプションに value 属性を含める代わりに、値はデフォルトで内部テキストになります。
最後の送信ボタンで、フォーム メソッドを POST に設定しています。クリックすると、各値の有効性がチェックされます。すべての値が有効な場合、フォームデータが送信されてダイアログが閉じ、ページがアクション URL である thankyou.php にリダイレクトされることがあります。値が欠落している場合、または数値にステップが一致しない場合、または範囲外の場合は、関連するブラウザ定義のエラー メッセージが表示され、フォームは送信されず、ダイアログは閉じません。デフォルトのエラー メッセージは、validityState.setCustomValidity('message here') メソッドを使用してカスタマイズできます。カスタム メッセージを設定する場合、すべてが有効である場合、メッセージを明示的に空の文字列に設定する必要があります。設定しないと、フォームは送信されません。
その他の考慮事項
ユーザーがフォームに適切なデータを入力できるようサポートするためのセクションが用意されています。優れたユーザー エクスペリエンスを実現するために、必要に応じて手順やヒントを提供して、ユーザーが間違いを犯さないことが重要です。このセクションでは、HTML だけでクライアント側で検証を行う方法を説明しますが、検証はクライアント側とサーバー側の両方で行う必要があります。値が正しい場合にチェックマークを追加するなど、フォームの入力時に控えめな方法で検証を提供できます。ただし、フォーム コントロールが完了する前にエラー メッセージを表示しないでください。ユーザーが間違いを犯した場合は、誤りのある箇所と誤りの内容をユーザーに伝えます。
フォームを設計するときは、誰もが自分と同じとは限らないことを考慮することが重要です。たとえば、姓として 1 文字しか使用されない（姓がまったくない）、郵便番号がない、番地が 3 行ある、番地がないなど、フォームの翻訳版が表示されている可能性があります。
フォーム コントロール、そのラベル、エラー メッセージが画面に表示され、正確で意味のあるものにする必要があります。プログラムによって特定可能で、適切なフォーム要素またはグループにプログラムで関連付けられている必要があります。autocomplete 属性は、フォーム入力を高速化し、アクセシビリティを向上させるために使用することができます。
HTML には、基本的なフォーム コントロールを利用するためのツールがすべて用意されています。フォーム要素やプロセスがインタラクティブであるほど、フォーカス管理、必要に応じて ARIA の名前、ロール、値の設定と更新、および必要に応じて ARIA ライブ通知に関して、アクセシビリティに一層注意を払う必要があります。ただし、ここで学習したように、HTML のみを使用すると、ARIA や JavaScript に頼ることなく、アクセシビリティと有効性という目標に大きく近づくことができます。
理解度チェック
フォームの知識をテストしましょう。
ラジオボタンを同じグループに含めるには、どうすればよいですか。
name 属性値を指定します。id 属性値を指定します。このフォーム項目の目的をユーザーに伝えるために使用する HTML 要素はどれですか。
<h1><title><label>