ほとんどのサイトやアプリケーションにはウェブフォームがあります。ジョーク サイト（例: DoWebsites<form> 要素に含まれている。
HTML <form> 要素は、次を含むドキュメントランドマークを識別します。
インタラクティブ コントロールを実装しています。<form> 内にネストすると、すべてのインタラクティブ（非インタラクティブ）な
そのフォームを構成する
フォームコントロールがあります
HTML は強力です。このセクションでは、HTML の機能に焦点を当て、JavaScript を追加しなくても HTML でできることについて説明します。 クライアントサイドでフォームデータを使用して UI を更新する場合、通常は CSS や JavaScript が必要になりますが、ここでは扱いません。 フォームの学習コース全体があります。ここではそのセクションを重複して説明しませんが、 複数のフォーム コントロールと、それをサポートする HTML 属性について説明します。
フォームを使用すると、ウェブサイトやアプリケーションの操作、入力した情報の検証、送信をユーザーが行える
サーバーに送ります。HTML 属性を使用すると、ユーザーにフォーム コントロールの選択や値の入力を求めることができます。HTML
属性では、値が有効である特定の条件を定義できます。ユーザーがフォームを送信しようとすると、
フォーム コントロールのすべての値がクライアントサイドの制約検証を受け、送信の妨げとなる可能性がある
データが必要な条件を満たすまで利用できますこの機能はオフにすることもできます。novalidate
属性（通常はボタンの formnovalidate）、後で入力するためにフォームデータを保存<form>
検証できません。
フォームの送信
フォームは、ユーザーがフォーム内にネストされた送信ボタンを有効化すると送信されます。ボタンに <input> を使用する場合、
「value」ボタンのラベルで、ボタン内に表示されます。<button> を使用する場合、ラベルは開始点と
と <button> 終了タグ。送信ボタンは、次の 2 つの方法のいずれかで記述できます。
<input type="submit" value="Submit Form">
<button type="submit">Submit Form</button>
非常にシンプルなフォームの場合、<form> 要素とその内部にフォーム入力と、送信ボタンが必要です。ただし、
フォームの送信だけではありません
<form> 要素の属性で、HTTP メソッドを設定します。
フォームの送信に使用する URL と、フォームの送信を処理する URL です。はい。フォームは送信、処理、
JavaScript を使用せずに新しいページを読み込むことができる。<form> 要素は非常に強力です。
<form> 要素の action と method
属性値は、フォームデータを処理する URL と、データの送信に使用する HTTP メソッドをそれぞれ定義します。
デフォルトでは、フォームデータは現在のページに送信されます。それ以外の場合は、action 属性をデータの送信先 URL に設定します。
送信されるデータは、フォームのさまざまなフォーム コントロールの名前と値のペアで構成されます。デフォルトでは、すべてのフォームと
name を持つフォーム内にネストされているコントロール。ただし、form 属性を使用すると、フォーム コントロールを含めることができます。
<form> の外側に指定し、<form> 内にネストされているフォーム コントロールを省略します。フォーム コントロールと <fieldset> でサポートされています。
form 属性は、関連付けられているコントロールの id を値として受け取ります。これは必ずしもその形式ではありません。
含まれます。つまり、フォーム コントロールを <form> に物理的にネストする必要はありません。
method 属性は、リクエストの HTTP プロトコル（通常は GET または POST）を定義します。GET では、フォームデータは
name=value ペアのパラメータ文字列。action の URL に追加されます。
POST を使用すると、データが HTTP リクエストの本文に追加されます。パスワードやクレジット カードなどの安全なデータを送信する場合
常に POST を使用してください。
また、DIALOG メソッドもあります。<form method="dialog"> が <dialog> 内にある場合、フォームを送信するとダイアログが閉じます。
データの消去も送信も行われていないにもかかわらず、送信イベントが発生します。繰り返しになりますが、JavaScript は必要ありません。これについては
ダイアログ セクションをご覧ください。ここではフォームが送信されないため、
送信ボタンに formmethod="dialog" と formnovalidate の両方を含めます。
フォームのボタンには、このセクションの冒頭で説明した以上の属性を設定できます。ボタンに formaction が含まれている場合、
formenctype、formmethod、formnovalidate、formtarget の各属性（フォームを有効にするボタンに設定した値）
送信は action、enctype、method、target より優先される
<form>にセットされています。制約の検証はフォームの送信前に実施されるが、制約もフォームの送信にも
有効化された送信ボタンの 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 を使用すると、サーバーサイドのデータ処理が簡単になるため、チェックボックスや
ただし、ラジオボタンは例外です。
ラジオボタン
お気づきのように、ラジオボタンのグループ内のラジオボタンを選択すると、
これは name 属性によるものです。この唯一の選択可能なエフェクトは、各ラジオボタンを
グループ内で同じ name。
name はグループに固有のものである必要があります。2 つの異なるグループで同じ name を誤って使用してしまった場合に、ラジオボタンを選択することになってしまいます。
2 番目のグループのボタンをクリックすると、同じ name を持つ最初のグループで行われた選択はすべて選択解除されます。
name と、選択されたラジオボタンの value がフォームと一緒に送信されます。各ラジオボタンに
関連性の高い（通常は一意の）value。選択されていないラジオボタンの値は送信されません。
1 つのページに設定できるラジオボタン グループの数に制限はなく、それぞれに
グループに固有の name。
同じ名前のグループでラジオボタンのいずれかが選択された状態でページを読み込む場合は、checked 属性を指定します。
このラジオボタンは、CSS 疑似クラス :default と一致します。
ユーザーが別のラジオを選択した場合でも、現在選択されているラジオボタンは、: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> というラベルが付きますが、
フォーム コントロールのグループは、次の <legend> の内容によってラベル付けされます:
グループ化する <fieldset>。
上記の例では、送信ボタン以外の各フォーム コントロールに <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 -->
これらの要素のデフォルトの外観ではあまり使用されていませんが、<legend> と <fieldset> のスタイルは CSS で設定できます。
<fieldset> は、すべてのグローバル属性に加えて、name 属性、disabled 属性、form 属性もサポートしています。
フィールドセットを無効にすると、ネストされたフォーム コントロールがすべて無効になります。name 属性と form 属性のいずれも指定されていない
<fieldset> はあまり使用されていません。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
設定されているかどうか:default 次の場合: checked
ハードコードされています。および :enabled または :disabled
要素がインタラクティブかどうか、disabled
属性があります。:read-write 疑似クラスは、
contenteditable が設定済みで、
number、password、text 入力タイプなど、デフォルトで編集可能なフォーム コントロール（チェックボックスではなく、
ラジオ ボタン、hidden タイプなど）を指定します。通常書き込み可能な要素に readonly が
設定されている場合は、代わりに :read-only と一致します。
ユーザーがフォーム コントロールに情報を入力すると、:valid などの CSS UI セレクタが
: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 の現在の状態に基づいて継続的に更新されます。たとえば、名前に 0.0.0.0.0 を含む
email、number、url、日付型などの制約（値が null 以外（空ではない）であり、
値が有効なメールアドレス、数値、URL、日付、時刻でない場合、:invalid CSS 疑似クラスが一致します。この定数は、
更新は、組み込みの HTML 制約検証とは異なります。組み込みの 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 エラーが発生する
フォームを送信してみてください。値が 0.01 に 1 から 2
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 は発生しません。
エラーが発生します。必須かつ空の場合、validityState.valueMissing のデフォルトのエラー メッセージがユーザーに表示されます。
patternMismatch。
メールの場合、validityState.typeMismatch は多すぎます。
構築できます多くの場合、pattern を含めることをおすすめします。
属性に含まれないため、TLD のないイントラネットのメールアドレスは有効として受け付けられません。
パターン属性を使用すると、値が一致する必要がある正規表現を指定できます。パターン一致が必要な場合は
何を期待されているのかをユーザーに明確に伝える必要があります。
これらはすべて JavaScript を 1 行も記述せずに実行できますが、HTML API であるため、JavaScript を使用して カスタム メッセージを生成します。JavaScript を使用して残りの文字数を更新したり、 パスワードの安全度を確認できる進行状況バーや、入力完了を動的に改善するさまざまな方法。
例
この例では、<dialog> 内に、3 つのフォーム コントロールと 2 つの送信ボタンがあるネストされた <form> を含むフォームを使用しています。
ラベルと手順をクリアできます。
最初の送信ボタンを押すと、ダイアログが閉じます。formmethod="dialog" を使用してフォームのデフォルト メソッドをオーバーライドし、
<dialog>。データの送信や消去は行いません。また、formnovalidate も含める必要があります。含めなかった場合、ブラウザは
すべての必須フィールドに値が入力されていることの検証を試みます。ユーザーは、プロンプトを入力せずにダイアログとフォームを
データの入力検証することで防ぐことができます。「X」のため aria-label="close" を含める視覚的な手がかりとして知られていますが、
説明的なラベルではありません。
フォーム コントロールにはすべて暗黙的にラベルがあるため、id 属性や for 属性を含める必要はありません。入力要素と
required 属性を必須にします。数値入力に step を明示的に設定して、step がどのように使用されるかを示す
含まれます。step はデフォルトで 1 になるため、この属性は省略できます。
<select> にはデフォルト値があるため、required 属性は不要です。value 属性を指定する代わりに
値はデフォルトで内部テキストになります。
最後の送信ボタンをクリックすると、フォーム メソッドが POST に設定されます。クリックすると、各値の有効性がチェックされます。すべて
値が有効である場合、フォームデータが送信され、ダイアログが閉じます。また、ページが thankyou.php にリダイレクトされる場合があります。
アクションの URL を指定します値が欠落している場合、数値のステップが一致しない場合や範囲外である場合は、
該当するブラウザ定義のエラー メッセージが表示され、フォームは送信されず、ダイアログも閉じません。
デフォルトのエラー メッセージは validityState.setCustomValidity('message here') でカスタマイズできます。
メソッドを呼び出します。ただし、カスタム メッセージを設定する場合、すべてのメッセージに対して明示的に空の文字列を設定する必要があります。
有効でないとフォームが送信されません。
その他の考慮事項
ユーザーがフォームに適切なデータを入力するのをサポートすることに特化したセクションを設けています。ずっと ユーザー エクスペリエンスの観点から、必要に応じて手順やヒントを提供することで、ユーザーがエラーにならないようにすることが重要です。 このセクションでは、HTML のみでクライアントサイドで検証を行う方法について説明しますが、検証はクライアントサイドと あります。フォームの記入時に目立たない方法で検証を実施できる。たとえば、 値が正しい場合はチェックマークを付けます。ただし、フォームの操作が完了する前にはエラー メッセージを表示しないでください。ユーザーが 間違いを犯した場合、どこが間違っていたのかをユーザーに伝えます。
フォームのデザインでは、すべての人が自分のような人ではないということを考慮することが重要です。ユーザー 姓が 1 文字である（または名字がまったくない）、郵便番号がない、住所が 3 行である、 番地が含まれていない可能性があります。フォームの翻訳版が表示されている可能性があります。
フォーム コントロール、そのラベル、エラー メッセージを、正確かつ意味のある形で画面に表示する必要があります。
決定可能で、適切なフォーム要素またはグループにプログラマティックに関連付けられます。autocomplete
属性を使用すると、フォームへの入力を迅速化し、アクセシビリティを向上させることができます。
HTML には、基本的なフォーム コントロールにアクセスできるようにするためのツールがすべて用意されています。フォーム要素やプロセスのインタラクティブ性が高いほど、 フォーカス管理、ARIA の名前、ロール、設定更新に関してアクセシビリティにさらに注意を払う必要がある 値、ARIA のライブ通知（必要な場合）などがあります。しかし、ここで学んだように、HTML だけでも、 ARIA や JavaScript に頼ることなく、アクセシビリティと有効性の目標を達成できます。
理解度をチェックする
フォームに関する知識をテストします。
ラジオボタンを同じグループに含めるにはどうすればよいですか。
name 属性値を指定します。id 属性値を指定します。このフォーム フィールドが何の目的で使われるのかをユーザーに伝えるには、どの HTML 要素を使用しますか。
<h1><title><label>