HTML におけるラベルの役割と使用法についての深い理解 (コード付き)

yulia
リリース: 2018-09-11 11:29:21
オリジナル
4888 人が閲覧しました

フォーム レイアウトは、フォーム レイアウトでよく使用されます。多くの初心者は、ラベル タグを無視して学習する可能性があります。次に、ラベルの意味について説明します。ラベルラベルの用途は何ですか?

実際、ラベルにはスタイル効果はなく、対応するフォーム コントロールをトリガーする機能があります。たとえば、ラジオ ボタンまたは複数選択ボックスに対応するテキストをクリックすると、テキストに

1. label タグの使用方法

label タグは、span タグと同様に、入力要素のラベル (マーク) を定義します。ただし、ラベル label とスパン ラベルの最大の違いは、マウス ユーザーの使いやすさが向上し、特定のフォーム コントロールに関連付けることができることです。
ラベル label が特定のフォーム コントロールに関連付けられた後、ユーザーがラベル要素内のテキストをクリックすると、関連付けられたフォーム コントロールがトリガーされます。つまり、ユーザーがラベル label を選択すると、ブラウザは自動的にラベル label に関連するフォーム コントロールにフォーカスを向けます。

2. ラベルの構文


Label ラベルのテキストを入力する必要があります
Label ラベルの for 属性の値は次のとおりです。カスタム、通常は必要なものと同じ クリックすると、コントロール オブジェクトの対応する ID がトリガーされます。

3. label の実際の適用

HTML コード スニペットは次のとおりです:

<form action="" method="get"> 
性别:<br /> 
<input name="sex" id="man" type="radio" value="" /> 
<label for="man">男</label> 
<input name="sex" id="woman" type="radio" value="" /> 
<label for="woman">女</label> 
</form>
ログイン後にコピー

注: input タグの id の値は、label タグの for の値に対応します。

画像を見てください:

HTML におけるラベルの役割と使用法についての深い理解 (コード付き)

概要: 通常、選択する選択ボタンに対応するラジオ ボタン ボックス内のテキストまたは複数選択ボタン ボックス内のテキストをクリックする必要があります。 label ラベル。for と id の値は同じであることに注意してください。デフォルトでは、ラベル タグにはスタイルがありません。CSS を使用して、CSS 幅、CSS 高さ、CSS 境界線などのスタイルを設定できます。初心者はさらに多くのコードを入力して、このチュートリアルが役立つことを願っています。

以上がHTML におけるラベルの役割と使用法についての深い理解 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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