HTMLでのlabelタグの使い方

今回は、HTML での label タグの使用方法を紹介します。完成したフォームは、フォームタグ

まず例を見てみましょう:

[html] view plain copy
<label for="email">E-mail:</label>  
<input type="text" id="email">

フォーム コントロールはすべて インライン要素 であるため、1 行に表示されます。 Webページ上で「メール」という文字またはテキストボックスをクリックすると、テキストボックス内にカーソルが表示されます。これがlabelタグの機能です。率直に言うと、ラベル label は、関連付けられているフォーム コントロールの拡張です。つまり、ラベル label をマウスでクリックすると、関連付けられているフォーム コントロールをクリックするのと同じ効果が得られます。前提として、ラベルの for 属性の属性値が、関連付けたいフォーム コントロールの ID と同じであることが前提となります。

for との関連付けに ID を使用したくない場合は、2 番目の方法を使用することもできます。

効果は以前と同じです。

もちろん、他のフォーム コントロールもラベルに関連付けることができます。たとえば、次の例:

[html] view plain copy

<label>E-mail:<input type="text"></label>

このラベルは、考えてもあまり役に立たないと言えるかもしれません。

もちろん、それはうまくいきます。ユーザー エクスペリエンスを向上させるだけでなく、身体の不自由な人々がインターネットにアクセスする際の利便性も提供します。たとえば、視覚障害者は「Web ページ リーダー」の音を使って Web ページを閲覧します。ラベル タグの関連付けがなければ、サーファーは頭の中で対応関係を想像することができず、Web サイトのフォームの内容をよく理解できません。表現。別の例として、身体障害のあるサーファーはマウスの制御が困難ですが、ラベルを使用すると、クリック対象が大きくなり、操作が容易になります。

したがって、本当に優れたページは、クロスブラウザーであり、さまざまなサイズの画面を備えたデバイスに適応できる必要があり、また、あらゆるタイプのインターネット ユーザー (高齢者や障害者など) に利便性を提供する必要があります。

HTML で label タグを使用する方法は限られていますので、必要な方はこのサイトの他の 更新 にも注目してください。

関連記事:

HTMLの命名規則

DIV境界を越えるコンテンツを非表示にする方法

CSSを使用してマウススタイルを変更する方法

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