カスタム検索

<label>タグ

<label>タグは、フォーム要素にラベルを付けます。

<label>タグの機能と属性
機能 フォーム要素にラベルを付ける
属性 HTML-4.01 コア 言語 イベント  for  accesskey  onfocus  onblur  
XHTML-1.0 コア 言語 イベント  for  accesskey  onfocus  onblur  

フォーム要素にラベルを付けるには、この<label>タグで、<input>タグ等で定義されたフォーム要素をネストします。

label.html
<html>
    <head>
        <title>&lt;label&gt;タグの例</title>
    </head>
    <body>
        <form action="プログラムのパス" method="post">
            <label>メールアドレス:<input type="text" name="mail" /></label>
        </form>
    </body>
</html>

<label>で定義した「メールアドレス」というテキストをクリックすると、多くのブラウザでは、テキストボックスが選択された状態になります。テキストと、フォーム要素を<label>タグで囲むことで、1つのグルーブのようになります。

for属性

for属性は、フォーム要素のid属性を参照してラベル付けする際に使用します。この方法による場合は、フォーム要素を<label>タグでネストする必要はありません。

for属性の値には、ラベルを付けたいフォーム要素に指定してあるid属性の値を指定することになります。

label_for.html
<html>
    <head>
        <title>&lt;label&gt;タグの例</title>
    </head>
    <body>
        <form action="プログラムのパス" method="post">
            <label for="mail_address">メールアドレス:</label>
            <input type="text" name="mail" id="mail_address" />
        </form>
    </body>
</html>

accesskey属性、onforcus属性、onblur属性

accesskey属性、onforcus属性、onblur属性については、共通して使用される属性を参照してください。

CopyLeft 2021 Webデザインレッスン プライバシーポリシー サイト管理者に連絡