HTMLのlabelタグの使い方まとめ(改行設定など)

html

今回は、HTMLのlabelタグの使い方について書いています。

HTMLのlabelタグは、フォーム要素（<input>, <textarea>, <select> など）と明示的に関連付けるために使用されます。
labelタグを使用することで、フォームのアクセシビリティが向上し、ユーザーエクスペリエンスも改善されます。

この記事では、labelタグの基本的な使い方、属性、関連付けの方法などについてまとめています。

labelタグの基本的な使い方

labelタグは、フォーム要素の説明文を提供するために使用します。
通常、フォーム要素の直前または直後に配置されます。

<label>名前：
  <input type="text" id="name" name="name">
</label>

<input type="checkbox" id="agree" name="agree">
<label for="agree">利用規約に同意する</label>

最初のlabelタグはテキスト「名前：」となっています。
labelタグで囲むことで、テキスト入力欄(id属性がname)と関連付けられています。

2番目のlabelタグはチェックボックスの説明文を提供しています。
for属性を使って、直前のチェックボックスのid属性の値を指定することで、明示的に関連付けられています。

こうしてlabelを設定しておくことで、ユーザーはラベルをクリックすることでも関連付けた要素をアクティブにできます。
実際にlabelをクリックすると下記のように、要素がアクティブになりました。
labelタグを使ったフォーム表示

labelタグの属性

labelタグで最も重要な属性はfor属性です。

  • for 属性: labelを関連付けるフォーム要素の id 属性の値を指定します。これにより、labelとフォーム要素が結び付けられます。

labelタグは、グローバル属性もサポートします。

  • class属性: CSSのクラスを指定します。
  • id属性: 要素の一意なIDを指定します。
  • style属性: インラインCSSを指定します。
  • lang属性: 要素の言語を指定します。
  • title属性: 要素に関する補足情報を指定します。

labelタグとフォーム要素の関連付け

labelタグとフォーム要素を関連付けるには、主に以下の2つの方法があります。

1. for属性を使用する方法（明示的な関連付け）

labelタグの for 属性に、関連付けるフォーム要素のid属性の値を指定します。
これが推奨される方法です。

<label for="email">メールアドレス：</label>
<input type="email" id="email" name="email">

<select id="country" name="country">
  <option value="jp">日本</option>
  <option value="us">アメリカ</option>
</select>
<label for="country">国：</label>

上記の例では、それぞれのlabelがfor属性を使って対応するinputタグやselectタグ要素と明示的に関連付けられています。

2. labelタグでフォーム要素を囲む方法（暗黙的な関連付け）

label タグでフォーム要素を直接囲むことでも、両者を関連付けることができます。
ただし、この方法はfor属性を使用する方法ほど明確ではなく、デザイン的にわかりずらくなるためfor属性を使用する方が推奨されるようです。

<label>
  パスワード：
  <input type="password" name="password">
</label>

<label>
  <input type="radio" name="gender" value="male"> 男性
</label>
<label>
  <input type="radio" name="gender" value="female"> 女性
</label>

labelタグのアクセシビリティにおける重要性

labelタグは、Web フォームのアクセシビリティを向上させる上で非常に重要な役割を果たします。

  • スクリーンリーダーのサポート: スクリーンリーダーは、labelタグの内容を読み上げることで、視覚障碍のあるユーザーにフォーム要素の目的や使い方を伝えます。for 属性による明示的な関連付けは、この読み上げを正確に行うために不可欠です。
  • クリック領域の拡大: label タグをフォーム要素と関連付けると、label テキストをクリックまたはタップした際にも、対応するフォーム要素がフォーカスされたり、チェック状態が変更されたりするようになります。これにより、マウス操作やタッチ操作が困難なユーザーにとっても、フォームの操作が容易になります。
<input type="checkbox" id="remember" name="remember">
<label for="remember">次回から自動的にログインする</label>

<input type="radio" id="option1" name="choice" value="1">
<label for="option1">オプション 1</label>

上記の例では、「次回から自動的にログインする」や「オプション 1」のテキストをクリックするだけで
下記のように対応するチェックボックスやラジオボタンを操作できます。
labelタグのアクセシビリティ確認

labelタグにCSSでスタイルをつける

labelタグは、CSSと組み合わせて様々なスタイリングを適用することも可能です。

<label for="search" class="search-label">検索：</label>
<input type="search" id="search" name="search">

.search-label {
  display: inline-block;
  width: 50px;
  font-weight: bold;
  margin-right: 10px;
}

.search-label クラスを使って labelタグの幅を固定し、太字にしています。
ブラウザで確認すると、下記のようになりました。
labelタグにCSSでスタイルをつける

labelタグ内で改行する

labelタグはインライン要素であるため、HTMLのソースコード内で改行を入れても、ブラウザの表示上は基本的に改行されません。
labelタグ内でテキストを改行したい場合は、以下のいずれかの方法を使用する必要があります。

1. brタグを使用する

brタグは強制的に改行を行うインライン要素です。

<label for="address">
  住所：<br>
  <input type="text" id="address" name="address">
</label>

ブラウザで確認すると、下記のように表示されます。
labelタグの中でbrタグを使って改行する

2. CSSの white-space プロパティを使用する

white-space: pre-line;などを指定することで、ソースコード内の改行を保持し、必要に応じて折り返しを行います。

<label for="description" style="white-space: pre-line;">
  詳細な説明：
  ここに
  複数行の
  テキストを
  記述できます。
  <textarea id="description" name="description"></textarea>
</label>

white-spaceプロパティを使用してlabelタグで改行

labelタグ内で改行させない

labelタグ内のテキストが意図せず改行されるのを防ぎたい場合は、CSSのwhite-spaceプロパティを使用します。

1. white-space使用する

white-space: nowrap;を指定すると、label内のテキストは折り返されず、一行で表示されます。
labelの幅が親要素の幅を超える場合は、はみ出して表示される可能性があります。

<label for="long-option" style="white-space: nowrap;">非常に長いオプションテキストで、通常は改行される可能性があります：</label>
<input type="radio" id="long-option" name="option">

2. 親要素の幅を調整する

label要素を含む親要素の幅を適切に設定することで、label内のテキストが改行されるのを防ぐことができます。

3. フォントサイズを調整する

label内のテキストが長すぎるために改行される場合は、フォントサイズを小さくすることで一行に収まる可能性があります。

通常、labelはフォーム要素の説明として簡潔なテキストが用いられることが多いため、意図的に改行させる必要は少ないかもしれません。
しかし、レイアウトの都合上、改行を制御したい場合には上記のCSSプロパティを活用してください。

まとめ

labelタグは、HTML フォームのアクセシビリティとユーザーエクスペリエンスを向上させるための重要な要素です。

for属性を使ってフォーム要素と明示的に関連付けることで、スクリーンリーダーの正確な読み上げを可能なります。
またクリックできる領域が広がることで、操作性も向上します。

フォームを作成する際には、必ず各フォーム要素に適切なlabelタグを設定することを心がけましょう。
labelタグを適切に使用することで、より多くのユーザーにとって使いやすいWebフォームを実現できます。

HTML
yasuaki

コメント