ホームページ > ウェブフロントエンド > htmlチュートリアル > htmlのlabelタグの機能は何ですか? htmlのlabelタグの使い方を詳しく解説

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

寻∝梦
リリース: 2018-09-04 15:51:11
オリジナル
5385 人が閲覧しました

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

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

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

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

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

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

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

<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 codeタグをどのように囲むか?この記事では、コードフレーズの使い方を徹底的に理解します

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

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート