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

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

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

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

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

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

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

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

暗黙的バインディング:

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

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

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

<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 属性の例を見てみましょう

ラベルが付いた 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>

この効果は図に示すとおりです:

この画像はラジオボタンです。複数選択はできません。

以上がこの記事の全内容です。labelタグのfor属性の内容については、練習場所が分からない方はPHP中国語へお越しください。ウェブサイトとビデオチュートリアルの実際の戦闘で、コードをコピーして効果を確認できます。ご質問がございましたら、以下よりお問い合わせください。

【編集者のおすすめ】

HTML codeタグをどのように囲むか？この記事では、コード フレーズの使用方法を徹底的に理解します

HTML tbody タグはブロック レベルの要素ですか? HTML tbodyタグの基本的な使い方

以上がHTMLのlabelタグのfor属性の役割は何ですか？ label label の for 属性の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。