検索結果

    label 要素

    概要

    HTML の Label 要素 (<label>) はユーザインタフェース内のアイテムのキャプションを表します。for 属性を用いるか、コントロール要素を <label> の子要素として配置する事で、ラベルとコントロールを紐付ける事が出来ます。その様に紐付けられたコントロールは、ラベル要素の labeled control（ラベル付きコントロール） と呼ばれます。

    コンテンツカテゴリ フローコンテンツ、フレージングコンテンツ、インタラクティブコンテンツ、フォーム関連要素、パルパブルコンテンツ
    許可された内容 フレージングコンテンツ。ただし、他の label 要素の子孫要素として配置してはならない。また、そのラベルが示すもの以外のラベル付け可能フォームコントロール要素を入れてはならない。
    タグの省略 不可。開始と終了タグの両方が必要。
    許可された親要素 フレージングコンテンツを受け入れるすべての要素
    DOM インターフェイス HTMLLabelElement

    属性

    この要素は、全てのHTML 要素が持つ グローバル属性と、次の属性をサポートします。

    accesskey HTML 4 HTML5
    キーボードからこの要素にアクセスする為のショートカットキー
    for
    ラベル要素と同一の文書内にあるラベル付け可能フォーム関連要素の ID。文書中の for 属性の値と合致する ID を持つ最初の要素が、このラベル要素の示すラベル付きコントロールとなります。
    注記: for 属性が包含するコントロール要素を指すのであれば、label 要素で for 属性と包含するコントロール要素の両方を持つことができます。
    form HTML5
    ラベル要素と紐付けたフォームコントロールが属するフォーム(form owner)。属性値は、同一の文書内にある <form> 要素の ID としなければなりません。この属性が指定されていない場合、この<label> 要素とその指し示すフォームコントロールは <form> 要素の子孫要素として配置しなければなりません。HTML5 で導入されたこの属性により、label 要素をフォーム要素の子孫としてだけではなく、同一文書の何処にでも配置出来るようになりました。

    例

    シンプルな label の例

    <!-- ※ input 要素に for 属性を用いるのでなく、label 要素の子要素として配置する事によりこれらを紐付ける例 -->
<label>Click me <input type="text" id="Name" name="Name" /></label>

    "for" 属性の使用例

    <!-- ※ label 要素と for 属性付き input 要素を併記する例 -->
<label for="username">Click me</label>
<input type="text" id="username">

    仕様

    仕様書 策定状況 コメント
    WHATWG HTML Living Standard
    <label> の定義    		 現行の標準  
    HTML5
    <label> の定義    		 勧告  
    HTML 4.01 Specification
    <label> の定義    		 勧告 最初の定義

    ブラウザ実装状況

    機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
    基本サポート (有) (有)[1] (有) (有) (有)
    機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    基本サポート (有) (有)[1] (有) (有) (有)

    [1] Gecko 8.0 (Firefox 8.0 / Thunderbird 8.0 / SeaMonkey 2.5) 以降では、クリックイベントのバブリングは 1 つの <label> 要素のみをトリガーし、他の <label> 要素のそれと合成されたクリックイベントをトリガーすることはありません。WebKit や Internet Explorer ではクリックイベントのバブリングは <label> で止まりますが、Gecko ではクリックイベントは <label> 要素の上位のノードにも続けてバブルアップします。Gecko 8.0 以前の動作 (複数の <label> 要素をトリガーする動作) は、Firefox が応答を停止する原因となっていました (バグ 646157)。

    関連情報

    ドキュメントのタグと貢献者

    タグ: 
     このページの貢献者: sii, teoli, hrysd, yyss, ethertank
     最終更新者: sii,