ホームページ > 記事 > ウェブフロントエンド > 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.
明示的なバインディング:
<label for="SSN">Social Security Number:</label> <input type="text" name="SocSecNum" id="SSN" />
なぜ
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 サイトの他の関連記事を参照してください。