[解決済み] What does "for" attribute do in HTML <label> tag?
2022-03-22 19:29:26
Question
I wonder what is the difference between the following two code snippets:
<label>Input here : </label>
<input type='text' name='theinput' id='theinput'/>
and
<label for='theinput'>Input here : </label>
<input type='text' name='theinput' id='theinput'/>
I'm sure it does something when you use a special JavaScript library, but apart from that, does it validate the HTML or required for some other reason?
How to solved?
The
<label>
tag allows you to click on the label, and it will be treated like clicking on the associated input element. There are two ways to create this association:
One way is to wrap the label element around the input element:
<label>Input here:
<input type='text' name='theinput' id='theinput'>
</label>
もう一つの方法は
for
属性に、関連する入力の ID を指定します。
<label for="theinput">Input here:</label>
<input type='text' name='whatever' id='theinput'>
これは、チェックボックスやボタンで使用する場合に特に便利です。なぜなら、ボックス自体を叩く代わりに、関連するテキストをクリックすることでボックスをチェックできるようになるからです。
この要素について詳しくは MDN .
関連
-
[解決済み] <meta http-equiv="X-UA-Compatible" content="IE=edge">は何をするのですか?
-
[解決済み] リンクのように動作するHTMLボタンを作成する方法
-
[解決済み] HTMLのid属性に有効な値は何ですか?
-
[解決済み] How can I set the default value for an HTML <select> element?
-
[解決済み] jQueryを使用してハイパーリンクのhref属性を変更する方法
-
[解決済み] HTMLで表示される上下の三角形(軸のない矢印)に使用できる文字は何ですか?
-
[解決済み] HTMLの "role "属性は何のためにあるのですか?
-
[解決済み] localStorage、sessionStorage、session、cookieの違いは何ですか?
-
[解決済み】なぜHTMLは "chucknorris "を色と見なすのか?
-
[解決済み】enctype='multipart/form-data'とはどういう意味ですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Bootstrap 3.3.7で改行する方法
-
[解決済み] HTML IFステートメント
-
[解決済み] 箇条書きのない順序なしリストが必要です。
-
[解決済み] インラインCSSでa:hoverを記述するには?
-
[解決済み] 入力テキストボックスの値を取得する
-
[解決済み] input type="file "ボタンのスタイリング
-
[解決済み] IMGとCSSのbackground-imageはいつ使い分ける?
-
[解決済み] Do I use <img>, <object>, or <embed> for SVG files?
-
[解決済み] MIME-typeが原因でスタイルシートが読み込まれない
-
[解決済み] div内の画像の下に余分なスペースがある