HTML の label タグの詳細な紹介

#ラベル ラベルの概要

ラベル ラベルは、入力要素のラベル (マーク) を定義します。これは、span タグと同様に、ユーザーに特別な効果を与えることはありません。ただし、ラベル label とスパン ラベルの最大の違いは、マウス ユーザーの使いやすさが向上し、特定のフォーム コントロールに関連付けることができることです。

主な使用シナリオ

ラベル ラベルを関連付けるには、主に 2 つの方法があります。

との暗黙的な関連付け:

明示的な関連付けは、ラベル タグ

プロパティを介して行われます。これは別のフォーム コントロールに明示的に関連付けられています。 for 属性の値は、ラベル label と同じドキュメント内のマーク可能なフォーム要素の id でなければならないことに注意してください。これは名前ではなく ID であることに注意してください。例:

爱好：
<input type=&#39;checkbox&#39; name=&#39;basket&#39; id=&#39;basketball&#39;>   
<label for="basketball">篮球</label>
<input type=&#39;checkbox&#39; name=&#39;football&#39; id=&#39;football&#39;>   
<label for="football">足球</label>

暗黙的な関連付けでは、フォーム コントロールをlabel ラベル内では、この場合、ラベル label にはフォーム要素を 1 つだけ含めることができ、複数のフォーム要素は最初の要素に対してのみ有効です。次のように:

<label>点击我可以使文本框获得焦点    <input type=&#39;text&#39; name=&#39;theinput&#39; id=&#39;theinput&#39;></label>

レンダリングは次のとおりです。テキストをクリックしてテキスト ボックスをフォーカスします:

明示的な関連付けの利点:

1. ラベル ラベルとフォームは別の場所に配置できます
表示の関連付けの欠点:

1. ラベル label とフォーム コントロールは全体としてコントロールに役立ちません
暗黙的な関連付けの利点:

1. ラベルとコントロールは全体として制御するのに便利です
暗黙的な関連付けの欠点:

1. ラベルと関連付けられたコントロールを別の場所に配置することはできません
2. # #上記は 2 つのメソッドに関する私の個人的な見解です。必要に応じて使用できます。明示的か暗黙的かを選択してください。

ラベル タグと関連するフォーム要素のブラウザ サポート

すべての主要なブラウザはラベル タグをサポートしています。 Safari 2 以前はラベルタグをサポートしていません。

テキスト ボックス。ラベルをクリックすると、関連付けられたテキストボックスがフォーカスを取得します。
• input type="checkbox"
チェックボックス。ラベルをクリックするときにチェックボックスをオンまたはオフにします。
• input type="radio"
ラジオ ボタン。ラベルをクリックするときにラジオ ボタンを選択します。
• input type="file"
ファイルのアップロード、ラベルをクリックするとファイル選択ダイアログ ボックスが開きます。
• input type="password"
パスワード ボックス。ラベルをクリックすると、パスワード ボックスがフォーカスされます。
• textarea
テキスト領域。ラベルをクリックするとテキスト領域がフォーカスされます。
• select
ドロップダウン ボックス。ラベルをクリックすると、ドロップダウン ボックスがフォーカスされますが、ドロップダウン ボックスのオプションは展開されません。
• #ラベル label の form 属性

form 属性は、label label 要素が属するフォームを指定します。以下に示すように、ラベル label は myform フォームの外にありますが、依然として myform フォームに属しています。次のように:

<form action="http://songguoliang.com/test.html" id="myform">
  <input type="radio" name="sex" id="male" value="male">
  <br>
  <label for="female">女</label>

  <input type="submit" value="提交"></form><label for="male" form="myform">男</label>

注:
このフォーム属性は変更されました2016 年 4 月 28 日に HTML 仕様から削除されました。ただし、スクリプトは引き続き読み取り専用の HTMLLabelElement.form プロパティにアクセスできます。このプロパティは、ラベルに関連付けられたコントロールがメンバーであるフォームを返します。ラベルがコントロールに関連付けられていない場合、またはコントロールがフォームの一部ではない場合は null を返します。

この記事は、https://pocket.blog.csdn.net/article/details/72852150

推奨チュートリアル: 「HTML チュートリアル 」

以上がHTML の label タグの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。