htmlのlabelタグの機能は何ですか？ htmlのlabelタグの使い方を詳しく解説-htmlチュートリアル-php.cn

htmlのlabelタグの機能は何ですか？ htmlのlabelタグの使い方を詳しく解説

寻∝梦

リリース： 2018-09-04 15:51:11

オリジナル

5380 人が閲覧しました

この記事では、主に Dare html ラベルタグの紹介と html ラベルタグの主な使用シナリオを紹介し、最後に html ラベルタグに関するコメントがあります。それでは、この記事を見てみましょう

まず、HTML の label タグの概要を見てみましょう:

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

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

HTML ラベルタグの主な使用シナリオ:

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

次に、HTML label タグの使用について説明します。

label は、入力要素のラベル (マーク) を定義します。 label 要素はユーザーに特別な効果を与えません。ただし、マウスユーザーにとっては使いやすさが向上します。このコントロールは、ラベル要素内のテキストをクリックするとトリガーされます。つまり、ユーザーがラベルを選択すると、ブラウザは自動的にラベルに関連するフォームコントロールにフォーカスを向けます。ラベルの for 属性は、関連する要素の id 属性と同じである必要があります。 2 つの入力フィールドと関連タグを含む単純な HTML フォームの例:

<form> 
<label for="male">两个人</label> 
<input type="radio" name="sex" id="male" />
<label for="female">一个人</label> 
<input type="radio" name="sex" id="female" />
</form>

ログイン後にコピー

これはラジオボタンであるため、効果を表示する必要はありません。

最後に、HTML ラベルタグに関するコメントを見てみましょう:

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

指定したショートカットキーに下線を付ける方法は2通りあります。 LABEL 要素のリッチテキストサポートにより、ACCESSKEY 属性で指定されたアクセラレータ文字の両側に U 要素を追加できます。スタイルシート (CSS) を使用してスタイルを適用したい場合は、SPAN に文字を含めて、スタイルを「text-decoration: Underline」に設定できます。

ユーザーが LABEL をクリックすると、まず LABEL の onclick イベントがトリガーされ、次に htmlFor 属性で指定されたコントロールの onclick イベントがトリガーされます。 LABEL で設定されたショートカットキーを押すとフォーカスが設定されますが、onclick イベントはトリガーされません。

HTML空間コードの書き方は？ HTML空間コードの表現まとめ

以上がhtmlのlabelタグの機能は何ですか？ htmlのlabelタグの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。