label 要素 (HTMLタグ)

フォーム関連部品のラベル

2018年07月24日

HTMLのlabel要素の説明です。label要素は、フォーム部品のラベル(キャプション)となる要素で、特定のフォーム部品と関連付けることが可能です。


目次

  1. 要素の記述例
  2. 要素の説明
  3. 利用できる属性
  4. ブラウザデフォルトCSS設定

要素の記述例

label要素の記述例
<label><input type="checkbox" name="lost">紛失しましたか?</label><br>
<label>紛失した場所はどこですか?<input type="text" name="where"></label>

 

閲覧中ブラウザーでの表示結果

 

要素の説明

  • label要素は、フォーム部品のラベル(キャプション)となる要素です。
  • label要素は、特定のフォーム部品と関連付けることが可能です。関連付ける方法は、以下の2つの方法があります。
    • 関連付けるフォーム部品をlabel要素の内容として含める
    • 関連付けるフォーム部品のid属性の値をlabel要素for属性に指定する。

 

利用できる属性

label要素で利用できる属性
属性名 属性の説明
for 関連付けしたいフォーム部品のid属性の値を定義します。

グローバル属性

HTMLのすべての要素はグローバル属性が利用できます。グローバル属性の一覧については「グローバル属性」を参照してください。

イベントハンドラ属性

label要素がサポートするイベントハンドラ属性については「イベントハンドラ属性」を参照してください。

ブラウザデフォルトCSS設定

Google Chromeの場合

label要素のブラウザデフォルトCSS
label {
  cursor: default;
}

 

 

 

Programming Style