mozilla
Your Search Results

    label 要素

    概要

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

    属性

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

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

    シンプルな label の例

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

    "for" 属性の使用例

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

    仕様

    仕様書 策定状況 コメント
    WHATWG HTML Living Standard Living Standard  
    HTML5 勧告候補  
    HTML 4.01 Specification 勧告  

    ブラウザ実装状況

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

    注記

    入れ子状の <label> 要素内でのクリックイベント

    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)

    関連情報

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

    Contributors to this page: ethertank, yyss
    最終更新者: yyss,