HTML の label タグの詳細な紹介

#ラベル ラベルの概要

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

ラベル label が特定のフォーム コントロールに関連付けられた後、ユーザーがラベル要素内のテキストをクリックすると、関連付けられたフォーム コントロールがトリガーされます。つまり、ユーザーがラベル label を選択すると、ブラウザは自動的にラベル label に関連するフォーム コントロールにフォーカスを向けます。

主な使用シナリオ

ラベル ラベルは、チェックボックスやラジオを選択/キャンセルできるように、チェックボックスやラジオと関連付けるためによく使用されます。テキストをクリックして。以下の図に示すように、テキストをクリックすると、前のラジオ ボタンをクリックしたのと同じ効果が得られます。つまり、ラベルまたはコントロールをクリックするとコントロールがアクティブになるため、コントロールのクリック可能な領域が拡大されます。特にチェックボックスやラジオボタンに便利です。

#ラベル ラベルを特定のフォーム要素に関連付ける方法

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

表示の関連付け

との暗黙的な関連付け:

方法 1: 明示的な関連付け

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

for

プロパティを介して行われます。これは別のフォーム コントロールに明示的に関連付けられています。 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>

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

表示の関連付けと暗黙的な長所と短所association:

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

ラベルのネスト レベルの数を減らすことができます

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

コントロールは id 属性を定義する必要があります

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

コントロールは id を定義する必要がありません

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

ラベルのネスト レベルの数が増加しました

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

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

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

関連付けを表示するために使用できるフォーム要素は次のとおりです:

input type="text"

テキスト ボックス。ラベルをクリックすると、関連付けられたテキストボックスがフォーカスを取得します。
• 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 サイトの他の関連記事を参照してください。