HTMLでフォームを作成するときに必要不可欠な<label>タグの存在をご存じですか？実はフォームの項目名とチェックボックスなどの構成部品を関連付ける、重要なタグですが使い方が少し複雑。
labelタグを実際に使う際の設定方法は？
今回は、labelタグの
・基本的な使い方
・labelタグとinputタグを関連付ける応用テクニック
について説明します。
目次
labelタグとは
labelタグの読み方
labelタグは「ラベルタグ」と読みます。labelは英語で『ラベル・付箋』という意味を持ちます。
labelタグの説明
labelタグは、フォーム内で使用されるタグです。フォーム内の部品（ボタンやチェックボックスなど）と結びつけることにより、文字部分をクリックしてもその部品の操作が可能になります。
labelタグで利用できる属性
labelタグではグローバル属性に加え、以下の属性を使うことができます。グローバル属性は全ての要素で使用可能な属性です。ここではグローバル属性のみ背景をピンク色で表示しています。
| 属性 | 説明 |
|---|---|
| for | この要素と紐付ける要素を指定する属性です。紐付けにはid属性を利用します。 |
| accesskey | 要素に体するショートカットキーを指定するための属性です。 |
| class | 要素にCSSでスタイル（見た目）を適用するためによく使われる属性です |
| contenteditable | 要素の内容を編集可能かどうかを指定する属性です。 |
| data-* | 要素にオリジナルのデータ属性を指定するための属性です。 |
| dir | テキストの文字の方向を右書き・左書きのどちらかに指定する属性です。 |
| draggable | 要素がドラッグ可能かどうかを指定する属性です。 |
| dropzone | 要素の上でコンテンツをドロップできるかどうかを指定する属性です。 |
| hidden | 要素の非表示を指定する属性です。 |
| id | class属性同様、要素にCSSでスタイルを適用するためによく使われます。同じid属性はページ内で1回しか使えません。 |
| lang | 要素の中で使われる言語を定義する属性です。 |
| spellcheck | 要素のスペルチェックを有効にするかどうかを指定する属性です。 |
| style | 要素に直接スタイル（見た目）を指定するための属性です。 |
| tabindex | Tabキーを使って要素を選択する際の優先順位を指定する属性です。 |
| title | 要素のタイトルを定義します。パソコンのブラウザでは、要素部分にマウスを当てると定義したタイトルが表示されます。 |
| translate | 機械翻訳などを利用する際に、要素を翻訳するかどうかを指定する属性です。 |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 12 |
| Firefox | 完全対応 |
| nternet Explorer | 完全対応 |
| Opera | 完全対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 完全対応 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
labelタグの基本的な使い方
labelタグの使い方
labelタグは、他のフォームを構成する部品と一緒に使用するのが一般的です。ここではテキストエリアとlabelタグを結びつけました。設定方法は、まずテキストエリアのidに”inputTxt”を入れ、labelタグのfor属性で”inputTxt”を指定します。
試しに”テキストを入力”をクリックしてみてください。テキストエリアを直接クリックしなくても、テキストエリアがフォーカスされるようになっています。
label要素はユーザビリティやアクセシビリティの向上につながる、非常に重要な要素です。なくてもフォームは作成できますが、ユーザーにとってより使いやすいフォームを作成するためには必須です。
・アクセシビリティ：近づきやすさや利用しやすさ
See the Pen
label 基本 by rabbittyu (@rabbittyu)
on CodePen.
labelタグとinputタグを関連付ける
ここでは性別を選択して送信するフォームを作成しました。ラジオボタンの設定は<input type=”radio”>です。両方選択できてしまうと、正確な集計が取れないため、必ずnameで2つのラジオボタンをセットで扱うようにしましょう。
ラジオボタンの選択肢を<label></label>の中で記述しましたが、このラベルタグのforとラジオボタンのidを同じにすることで、文字の部分をクリックしても、ラジオボタンがクリックされたのと同じ動作をとります。
labelタグなしの状態と比べると、明らかに扱いやすさが向上しましたね。
See the Pen
label 応用① by rabbittyu (@rabbittyu)
on CodePen.
まとめ
今回はlabelタグについて解説しました。
- labelタグを使用することで、フォームの扱いやすさが向上する
- labelaタグと部品を結びつけるには、id属性とfor属性に同じ値を設定する
labelタグのポイントは以上の2点です。labelタグがなくてもフォームには問題ありませんが、ユーザーの使いやすさ＝ユーザビリティ・アクセシビリティを向上させるために、積極的に取り入れるべき要素なのです。
ぜひ自作のサイトにも積極的に取り入れてくださいね。
参考文献：
MDN web docs <label>
アクセシビリティ – Wikipedia
ユーザビリティ – Wikipedia
HTML5タグリファレンス
