HTML 入力ラベル

はじめに

HTMLの<label>タグは、Webページ上の任意のHTML要素にキャプションまたはラベルテキストを追加するために使用されます。この実験では、HTMLにおける<label>タグの使い方を学びます。

注: index.html でコーディングを練習し、Visual Studio CodeでHTMLを書く方法 を学ぶことができます。画面右下の「Go Live」をクリックして、ポート8080でWebサービスを実行します。その後、Web 8080 タブを更新してWebページをプレビューできます。

Skills Graph

入力要素にラベルを追加する

1. 好きなテキストエディタで index.html ファイルを開きます。
2. 次のコードを追加して、ラベル付きの入力要素を作成します。

<label for="name">Name:</label> <input type="text" id="name" name="name" />

3. label 要素の for 属性は、関連付けられている入力要素の id 属性と一致する必要があります。

ラベル要素を使ってクリック可能な領域を作成する

1. 好きなテキストエディタで index.html ファイルを開きます。
2. 次のコードを追加して、入力要素の周りにクリック可能な領域を作成します。

<label>
  <input type="checkbox" />
  Click here to select
</label>

3. 「Click here to select」のテキストをクリックすると、チェックボックスが選択されます。

フォーム要素にラベルを関連付ける

1. 好きなテキストエディタで index.html ファイルを開きます。
2. 次のコードを追加して、ラベル付きのフォーム要素を作成します。

<form action="/" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" />
  <input type="submit" value="Submit" />
</form>

3. label 要素の for 属性は、関連付けられているフォーム要素の id 属性と一致する必要があります。

ラベルのスタイリング

1. 好きなテキストエディタで index.html ファイルを開きます。
2. CSSクラスを持つラベル要素を作成するために、次のコードを追加します。

<label class="large-label" for="name">Name:</label>
<input type="text" id="name" name="name" />

3. ラベルをスタイリングするために、次のCSSをスタイルシートに追加します。

.large-label {
  font-size: 24px;
  font-weight: bold;
}

アクセシビリティを向上させるためのラベル要素の使用

1. 好きなテキストエディタで index.html ファイルを開きます。
2. スクリーンリーダーのアクセシビリティのために、ラベル付きの入力要素を作成するために、次のコードを追加します。

<label for="name">Name:</label>
<input type="text" id="name" name="name" aria-label="Enter your name" />

3. aria-label 属性は、スクリーンリーダーがアクセス可能な入力要素に対するテキストラベルを提供します。

まとめ

この実験では、HTMLの<label>タグを使って、Webページ上のHTML要素にキャプションやラベルテキストを追加する方法を学びました。<label>タグは、アクセシビリティの向上と要素のクリック可能領域の拡大に役立ちます。また、フォーム要素にラベルを関連付ける方法と、CSSを使ってラベルをスタイリングする方法も学びました。