HTMLフォームのラベルタグ

DreamWeaverでは、フォームまたはフォームオブジェクト、テキストボックスなどが追加されるとすぐに、<label> </label>がコードに追加されます。私はこのレーベルが何をするのか理解したことがありません。今日はたまたま説明をしました：

ラベルには非常に便利な2つのプロパティがあり、1つはaccessKeyです。

属性用

関数：ラベルタグがバインドされるHTML要素を示します。このタグをクリックすると、バインドされた要素がフォーカスを取得します。

使用法：<label for = inputbox> name </label> <input id = inputboxタイプ=テキスト>

AccessKey属性：

関数：ラベルタグにバインドされた要素へのアクセスを示すホットキー。 Hotkeyを押すと、バインドされた要素が焦点を当てます。

使用法：<label for = inputboxアクセスキー= n> name </label> <input id = inputboxタイプ=テキスト>

制限：アクセスキープロパティによって設定されたショートカットキーは、ブラウザのショートカットキーと競合することはできません。そうしないと、ブラウザのショートカットキーが最初にアクティブになります。

コメント

ラベルを別のコントロールにバインドするには、ラベル要素のプロパティをコントロールと同じIDに設定します。コントロールの名前プロパティへのバインディングラベルは役に立たない。ただし、フォームを送信するには、ラベル要素がバインドされるコントロールの名前を指定する必要があります。

指定されたショートカットキーを強調するには、2つの方法があります。ラベル要素の豊富なテキストは、AccessKey属性によって指定されたショートカットキー文字の両側にU要素を追加することをサポートします。スタイルシート（CSS）を使用してスタイルを適用したい場合は、キャラクターをスパンに含めて、テキストデコレーション：アンダーラインにスタイルを設定できます。

ユーザーがラベルをクリックすると、ラベルのオンクリックイベントが最初にトリガーされ、次にHTMLFORプロパティによって指定されたコントロールのオンクリックイベントがトリガーされます。ラベルで設定されたショートカットキーを押すと、フォーカスが設定されますが、オンクリックイベントをトリガーしません。

注意すべきこと：

1.ラベルをネストすることは許可されていません。

2.この要素は、HTMLとInternet Explorer 4.0以上のスクリプトで利用できます。

3.この要素はインライン要素です。

4.この要素はタグを閉じる必要があります。

要素サンプルコード

次の例では、ラベル要素とAccessKey属性を使用して、テキストボックスの焦点を設定します。

 <labelfor = octrlidaccesskey = 1>
 <spanstyle = text-decoration：underline;> name </span>：<fontcolor =＃999999> alt+1をテキストボックスに押します</font>
 </label>
 <inputType = textName = txt1value = ah huinan size = 20tabindex = 1id = octrlid>