Heim Web-Frontend CSS-Tutorial Tutorial zur Verwendung des HTML-Labels label_Grundlegendes Tutorial

Tutorial zur Verwendung des HTML-Labels label_Grundlegendes Tutorial

May 16, 2016 pm 12:06 PM
html 教程 标签

Sobald in Dreamweaver8 ein Formular oder ein Formularobjekt, ein Textfeld usw. hinzugefügt wird, wird dem Code ein <label></label> hinzugefügt Habe es heute gerade gesehen. Hier kommt die Erklärung:
Es gibt zwei Attribute in Label, die sehr nützlich sind, eines ist FOR und das andere ist ACCESSKEY.
FOR-Attribut
Funktion: Gibt das HTML-Element an, das an das Label-Tag gebunden werden soll. Wenn Sie auf dieses Tag klicken, erhält das gebundene Element den Fokus.
Verwendung: <Label FOR="InputBox">Name</Label><input ID="InputBox" type="text">

ACCESSKEY-Attribut:
Funktion: Stellt dar ein Hotkey, der auf das an das Label-Tag gebundene Element zugreift. Wenn Sie den Hotkey drücken, erhält das gebundene Element den Fokus.
Verwendung: <Label FOR="InputBox" ACCESSKEY="N">Name</Label><input ID="InputBox" type="text">
Einschränkungen: accessKey-Attribut Die festgelegte Verknüpfung Die Tasten dürfen nicht mit den Tastenkombinationen des Browsers in Konflikt geraten, andernfalls werden die Tastenkombinationen des Browsers zuerst aktiviert.

Kommentare
Um LABEL an ein anderes Steuerelement zu binden, setzen Sie das FOR-Attribut des LABEL-Elements auf dieselbe ID wie das Steuerelement. Das Binden von LABEL an die NAME-Eigenschaft des Steuerelements ist nutzlos. Um das Formular abzusenden, müssen Sie jedoch einen Namen für das Steuerelement angeben, an das das LABEL-Element gebunden ist.
Es gibt zwei Möglichkeiten, der angegebenen Tastenkombination eine Unterstreichung hinzuzufügen. Die Rich-Text-Unterstützung des LABEL-Elements ermöglicht das Hinzufügen von U-Elementen auf beiden Seiten der durch das ACCESSKEY-Attribut angegebenen Tastenkombinationszeichen. Wenn Sie zum Anwenden von Stilen lieber Stylesheets (CSS) verwenden möchten, können Sie das Zeichen in SPAN einbinden und den Stil auf „text-decoration: underline“ setzen.

Wenn der Benutzer auf LABEL klickt, wird zuerst das Onclick-Ereignis auf LABEL ausgelöst, und dann wird das Onclick-Ereignis auf dem durch das htmlFor-Attribut angegebenen Steuerelement ausgelöst. Durch Drücken der von LABEL festgelegten Tastenkombination wird der Fokus festgelegt, das Onclick-Ereignis wird jedoch nicht ausgelöst.

Wichtige Hinweise:
1. Das Verschachteln von Tags ist nicht zulässig.
2. Dieses Element ist in HTML und Skripten von Internet Explorer 4.0 und höher verfügbar.
3. Dieses Element ist ein Inline-Element.
4. Dieses Element erfordert ein schließendes Tag.

Element-Beispielcode
Im folgenden Beispiel werden das LABEL-Element und das ACCESSKEY-Attribut verwendet, um den Fokus des Textfelds festzulegen.
<LABEL FOR="oCtrlID" ACCESSKEY="1">
<SPAN style="text-decoration:underline;">Name</SPAN>: <font color="# 999999 ">Drücken Sie ALT+1 zum Textfeld</font>
</LABEL>
<INPUT TYPE="text" NAME="TXT1" VALUE="A Huinan" SIZE=" 20" TABINDEX="1" ID="oCtrlID">
Demo:

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Verschachtelte Tabelle in HTML Verschachtelte Tabelle in HTML Sep 04, 2024 pm 04:49 PM

Verschachtelte Tabelle in HTML

Tabellenrahmen in HTML Tabellenrahmen in HTML Sep 04, 2024 pm 04:49 PM

Tabellenrahmen in HTML

HTML-Rand links HTML-Rand links Sep 04, 2024 pm 04:48 PM

HTML-Rand links

HTML-Tabellenlayout HTML-Tabellenlayout Sep 04, 2024 pm 04:54 PM

HTML-Tabellenlayout

Text in HTML verschieben Text in HTML verschieben Sep 04, 2024 pm 04:45 PM

Text in HTML verschieben

HTML-geordnete Liste HTML-geordnete Liste Sep 04, 2024 pm 04:43 PM

HTML-geordnete Liste

HTML-Onclick-Button HTML-Onclick-Button Sep 04, 2024 pm 04:49 PM

HTML-Onclick-Button

Wie analysiert und verarbeitet man HTML/XML in PHP? Wie analysiert und verarbeitet man HTML/XML in PHP? Feb 07, 2025 am 11:57 AM

Wie analysiert und verarbeitet man HTML/XML in PHP?

See all articles