HTMLのlabelタグのfor属性の役割は何ですか？ label label の for 属性の概要-htmlチュートリアル-php.cn

HTMLのlabelタグのfor属性の役割は何ですか？ label label の for 属性の概要

寻∝梦

リリース： 2018-09-04 15:50:53

オリジナル

12968 人が閲覧しました

この記事ではHTMLのlabelタグのfor属性の機能とその使用例を中心に紹介していきます

まずはlabelタグのfor属性を見ていきましょう。概要:

は、入力要素を提供し、それらのタグを定義するように設計されています。

for 属性は、ラベルがどのフォーム要素にバインドされるかを指定します。

ラベルをフォームコントロールにバインドするには、次の 2 つの方法があります。

1. フォームコントロールをラベルのコンテンツとして使用します。バインディング。

現時点では for 属性は必要ありません。また、バインドされたコントロールには id 属性も必要ありません。

暗黙的バインディング:

1	`<label>Date` `of Birth: <input type="text"` `name="DofB"` `/></label>`

ログイン後にコピー

2. タグの下にターゲットフォームの ID を指定します。

明示的なバインディング:

1 2	`<label` `for="SSN">Social Security Number:</label>` `<input type="text"` `name="SocSecNum"` `id="SSN"` `/>`

ログイン後にコピー

なぜに for 属性を追加する必要があるのですか?

for 属性をに追加し、入力コントロールをバインドすると、マウスユーザーのユーザーエクスペリエンスが向上します。

ラベル要素内のテキストをクリックすると、このコントロールがトリガーされます。つまり、ユーザーがラベルをレンダリングすると、ブラウザは自動的にラベルに関連するフォームコントロールにフォーカスを移します。

HTML label タグの for 属性の効果についても説明します:

label タグの for 属性の効果は、マウスで「女性」をクリックすると、主にラジオ選択の効果が得られます

for=nv のおかげで、入力テキストが必要です。ボックスの ID も nv と同じです。比較のために、男性ラジオにはこの効果はありません

<div>
<label for="nan1">男</label>
<input type="checkbox" id="nan" />
<label for="nv">女</label>
<input type="checkbox" id="nv" />
</div>

ログイン後にコピー

ブラウザに表示されるコードの効果は次のとおりです。

HTMLのlabelタグのfor属性の役割は何ですか？ label label の for 属性の概要

画像は複数選択できるチェックボックスです。誰でも実験に使えます。

HTML label タグの for 属性の例を見てみましょう

ラベルが付いた 2 つのラジオボタンを持つフォーム:

<form action="demo_form.asp">
<label for="male">php中文网</label>
<input type="radio" name="sex" id="male" value="male"/>
<label for="female">html</label>
<input type="radio" name="sex" id="female" value="female"/>
<input type="submit" value="Submit"/>
</form>