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>