HTML ラベルは何を意味しますか? HTMLのlabelタグと属性の使用例

HTML ラベルは何を意味しますか? HTML ラベルの機能と属性について何を知っていますか?この記事では、HTML ラベル タグの定義と機能、および HTML ラベル タグの 2 つの属性の詳細な説明を説明します (HTML ラベル タグの for 属性の例を示します)。 HTML ラベル タグ:

< ;label> ラベルは入力要素のラベル (マーカー) を定義します。

label 要素はユーザーに特別な効果を与えません。ただし、マウス ユーザーにとっては使いやすさが向上します。このコントロールは、ラベル要素内のテキストをクリックするとトリガーされます。つまり、ユーザーがラベルを選択すると、ブラウザは自動的にラベルに関連するフォーム コントロールにフォーカスを向けます。

ラベルの for 属性は、関連要素の id 属性と同じである必要があります。

注: 「for」属性はラベルを別の要素にバインドできます。 for 属性の値を、該当要素の id 属性の値に設定してください。

HTML ラベルの役割:

はテキスト プロンプト ラベルですが、ラベル ラベルに for 属性を追加すると、対応するオプション ボックスをバンドルできます。つまり、この場合、これをクリックします。テキスト ボックス オプション ボックスをクリックしたときの効果が反映されます。

例:

<lable>男</lable>
<input style="checkbox">

マウスが「男性」をクリックすると、その後ろにあるテキストボックスが入力用に自動的に選択されます

HTMLラベルの属性:

実際、Labelには主に2つの属性があります非常に便利な機能です。1 つは FOR で、もう 1 つは ACCESSKEY です。

HTML ラベル タグの FOR 属性:

機能: このラベルをクリックすると、バインドされた要素がフォーカスを取得するように HTML 要素を示します。

使用法: NameHTML ラベル タグ内の

ACCESSKEY 属性:

機能: を示しますLabel タグにバインドされた要素にアクセスするためのホットキー。ホットキーを押すと、バインドされた要素がフォーカスされます。

使用法: Name

制限事項: accessKey 属性によって設定されます。キーがブラウザのショートカット キーと競合することはできません。競合しない場合、ブラウザのショートカット キーが最初にアクティブになります。

注: LABEL を別のコントロールにバインドするには、LABEL 要素の FOR 属性をコントロールと同じ ID に設定します。 LABEL をコントロールの NAME プロパティにバインドしても役に立ちません。ただし、フォームを送信するには、LABEL 要素がバインドされているコントロールの名前を指定する必要があります。

ラベルの属性の HTML (例付き):

例は次のとおりです:

2 つの入力フィールドと関連するマークアップを含む単純な HTML フォーム: 属性の定義と使用法については

<form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />
</form>

HTML :

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

暗黙的接続と明示的接続

マークは通常、次の 2 つの方法のいずれかでフォーム コントロールにリンクされます: 暗黙的なフォームであるマーク ラベルのコンテンツとしてフォーム コントロールを使用するか、 の下の for 属性を使用します。 ; タグは、明示的なフォームであるターゲット フォーム ID を指定します。

XHTML の例:

明示的な関連付け:

<label for="SSN">Social Security Number:</label>
<input type="text" name="SocSecNum" id="SSN" />

暗黙的な関連付け:

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

最初のタグは、テキスト「社会保障番号:」とフォームの社会保障番号を明示的に組み合わせます。テキスト入力コントロール (「SocSecNum」) ") が関連付けられており、その for 属性の値はコントロールの ID (SSN) と同じです。 2 番目のタグ (「Date of Birth:」) には for 属性は必要なく、それに関連付けられたコントロールには タグを配置することで暗黙的に接続されます。 。

ブラウザのサポート:

すべての主要なブラウザは for 属性をサポートします。

Safari 2 以前は for 属性をサポートしていません。

HTML 属性のラベルの構文:

<label for="value">

HTML 属性の属性値のラベル:

element_id: ラベルがバインドされる要素の ID

【関連する推奨事項】

html テキストエリア どういう意味ですか? textareaタグで改行とスペースを取得するにはどうすればよいですか?

HTML5 タグは何を意味しますか? HTML5のタグの基本的な使い方を詳しく解説

以上がHTML ラベルは何を意味しますか? HTMLのlabelタグと属性の使用例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。