HTML
ラベル要素

構文

• <label>Example <input type="radio" name="r"></label> //コントロール要素を折り返す
• <label for="rad1">Example</label> <input id="rad1" type="radio" name="r"> //使用for属性

パラメーター

基本的な使用

ラベル付きのシンプルなフォーム...

<form action="/login" method="POST">
    
    <label for="username">Username:</label>
    <input id="username" type="text" name="username" />

    <label for="pass">Password:</label>
    <input id="pass" type="password" name="pass" />

    <input type="submit" name="submit" />

</form>

<form id="my-form" action="/login" method="POST">
    
    <input id="username" type="text" name="username" />

    <label for="pass">Password:</label>
    <input id="pass" type="password" name="pass" />

    <input type="submit" name="submit" />

</form>

<label for="username" form="my-form">Username:</label>

ラベルについて

<label>要素は、フォームアクション要素を参照するために使用されます。
ユーザーインターフェイスの範囲では、タイプradioやcheckboxような要素のターゲット/選択を容易にするために使用されcheckbox 。

ラッパーとしての<label>

それは、所望のアクション要素を囲むことができる

<label>
    <input type="checkbox" name="Cats">
    I like Cats!
</label>

（ターゲットinputがテキストをクリックすると、その状態/値が切り替わります）

参照としての<label>

for属性を使用するfor 、コントロール要素をlabel子孫として配置する必要はありませんが、 for値はそのIDと一致する必要があります

<input id="cats" type="checkbox" name="Cats">
<label for="cats" >I like Cats!</label>

注意
<label>要素内に複数のコントロール要素を使用しないでください