labelの使い方についてまとめ

labelの概要

labelは、フォームの中で、フォーム部品とラベルを関係付けるために用います。ブラウザでラベルをクリックした時や、ラベルのアクセスキーを押した時に、テキスト入力欄がアクティブになったり、読み上げソフトがラベルを読み上げたりといった利点があります。

注意点

labelの中に、アンカーやボタンなどのインタラクティブコンテンツを配置しないでください。ユーザーがlabelに関連したフォーム入力欄をアクティブにすることを妨げる場合があります。

labelのカテゴリー

labelに入れられるタグ一覧

タグ早見表

a abbr area audio b bdo br button canvas cite code data datalist del dfn em embed i iframe img input ins kbd link map mark math meta meter noscript object output progress q ruby samp script select small span strong sub sup svg textarea time var video wbr テキスト

入れられるタグのカテゴリー・モデル

labelに使える属性

属性とは<label>
タグ内に入れることのできるものです。属性をあてはめることにより、CSS・JavaScriptなどで操作する際に識別させることが可能になります。

よく使うグローバル属性

id 概要 要素に対してID固有の識別名を付けることができます。
属性の値 英字から始まる英数字
class 概要 要素に対して分類名を付けることができます。
属性の値 英字から始まる英数字
style 概要 要素に対して直接スタイルを指定することができます。
属性の値 スタイルシートのコード

labelに使える属性

for 概要 フォーム部品とラベルを関連づけます。関連づけたいフォーム部品のid属性を指定します。
属性の値 id属性の値

スポンサードサーチ

<label>の使い方

ブラウザ対応状況

ブラウザの対応(PC)
Chrome あり
Safari あり
Internet Explorer あり
Edge あり
Firefox あり
Opera あり
ブラウザの対応(SP)
Chrome あり
Safari あり
Samsung Internet あり

WORK REQUEST

CONTACT