はじめに
HTML の<label>タグは、Web ページ上の任意の HTML 要素にキャプションまたはラベルテキストを追加するために使用されます。この実験では、HTML における<label>タグの使い方を学びます。
注：
index.htmlでコーディングを練習し、Visual Studio Code で HTML を書く方法 を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 で Web サービスを実行します。その後、Web 8080 タブを更新して Web ページをプレビューできます。
入力要素にラベルを追加する
- 好きなテキストエディタで
index.htmlファイルを開きます。 - 次のコードを追加して、ラベル付きの入力要素を作成します。
<label for="name">Name:</label> <input type="text" id="name" name="name" />
label要素のfor属性は、関連付けられている入力要素のid属性と一致する必要があります。
クリック可能な領域を作成するためのラベル要素の使用
- 好きなテキストエディタで
index.htmlファイルを開きます。 - 次のコードを追加して、入力要素の周りにクリック可能な領域を作成します。
<label>
<input type="checkbox" />
Click here to select
</label>
- 「Click here to select」のテキストをクリックすると、チェックボックスが選択されます。
フォーム要素にラベルを関連付ける
- 好きなテキストエディタで
index.htmlファイルを開きます。 - 次のコードを追加して、ラベル付きのフォーム要素を作成します。
<form action="/" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" />
<input type="submit" value="Submit" />
</form>
label要素のfor属性は、関連付けられているフォーム要素のid属性と一致する必要があります。
ラベルのスタイリング
- 好きなテキストエディタで
index.htmlファイルを開きます。 - CSS クラスを持つラベル要素を作成するために、次のコードを追加します。
<label class="large-label" for="name">Name:</label>
<input type="text" id="name" name="name" />
- ラベルをスタイリングするために、次の CSS をスタイルシートに追加します。
.large-label {
font-size: 24px;
font-weight: bold;
}
アクセシビリティを向上させるためのラベル要素の使用
- 好きなテキストエディタで
index.htmlファイルを開きます。 - スクリーンリーダーのアクセシビリティのために、ラベル付きの入力要素を作成するために、次のコードを追加します。
<label for="name">Name:</label>
<input type="text" id="name" name="name" aria-label="Enter your name" />
aria-label属性は、スクリーンリーダーがアクセス可能な入力要素に対するテキストラベルを提供します。
まとめ
この実験では、HTML の<label>タグを使って、Web ページ上の HTML 要素にキャプションやラベルテキストを追加する方法を学びました。<label>タグは、アクセシビリティの向上と要素のクリック可能領域の拡大に役立ちます。また、フォーム要素にラベルを関連付ける方法と、CSS を使ってラベルをスタイリングする方法も学びました。
