HTML5-HTML-Elementerweiterung (Teil 2) – Das erweiterte Formularelement verdient Aufmerksamkeit. HTML5-Tutorial-Kenntnisse
WBOY
Freigeben： 2016-05-16 15:49:54
Original
1961 Leute haben es durchsucht
Unter den erweiterten HTML5-Elementen ist das Formularelement das bemerkenswerteste. In HTML5 wurden Formulare erheblich überarbeitet und einige Funktionen, die zuvor JavaScript-Codierung erforderten, können jetzt problemlos ohne Codierung implementiert werden. Bevor wir mit der Diskussion beginnen, muss noch etwas beachtet werden:
In HTML5 können Formularsteuerelemente außerhalb eines oder mehrerer Formulare liegen, zu denen sie gehören. Daher haben Formularsteuerelemente wie Fieldset, Label und Input das Formularattribut hinzugefügt, um das Formular zu identifizieren, zu dem das Formularsteuerelement gehört.
in HTML5 :
1. Das Formularelement selbst fügt zwei neue Attribute hinzu: Autocomplete und Novavalidate. Das Autocomplete-Attribut wird verwendet, um die Funktion „Dropdown-Vorschlagsliste“ zu aktivieren, und das Novalidate-Attribut wird verwendet, um die Formularvalidierungsfunktion zu deaktivieren, was beim Testen nützlich sein kann.
2. Das Fieldset-Element fügt drei neue Attribute hinzu: „disable“, „name“ und „form“. Das Attribut „disable“ dient zum Deaktivieren des Feldsatzes, das Attribut „name“ dient zum Festlegen des Namens des Feldsatzes und der Wert des Attributs „form“ ist die ID eines oder mehrerer Formulare, zu denen der Feldsatz gehört Wird das Fieldset außerhalb des Formulars platziert, müssen Sie das Formularattribut des Fieldset-Tags festlegen, damit das Fieldset korrekt einem oder mehreren Formularen zugeordnet werden kann.
3. Zusätzlich zum for-Attribut fügt das label-Element nur das form-Attribut hinzu. Erwähnenswert ist hier das for-Attribut, das mir bisher noch nicht wirklich aufgefallen ist. Das for-Attribut wird verwendet, um das an die Beschriftung angehängte Formularsteuerelement anzugeben, sodass beim Klicken auf die Beschriftung das angehängte Formularsteuerelement den Fokus erhält, zum Beispiel:
Code kopieren
Der Code lautet wie folgt:
Klicken Sie auf „Click Me“, und das folgende Eingabefeld wird fokussiert.
4. Das Eingabeelement führt einige neue Typen und Attribute ein, um die Benutzerfreundlichkeit des Formulars zu verbessern. Diese neuen Eingabetypen sind sehr nützlich zum Organisieren und Kategorisieren von Daten, aber leider unterstützt kein Browser alle davon gut. Zusätzlich zu den ursprünglichen Typen „Schaltfläche“, „Text“, „Senden“, „Kontrollkästchen“, „Radio“, „Auswählen“ und „Passwort“ wurden in HTML5 die folgenden neuen Eingabetypen hinzugefügt:
Farbe: Farbe Verschiedene Daten: Datum, Datum/Uhrzeit, Datum/Uhrzeit-lokal, Monat, Woche, Uhrzeit E-Mail: E-Mail Nummer: Nummer Bereich: Bereich Suche: Suche Telefon : tel URL-Typ: URL
Sie können das folgende Beispiel ausführen, um die Unterstützung verschiedener Browser zu überprüfen:
Kopieren Sie den Code
Der Code ist wie folgt:
Im Folgenden sind die neu hinzugefügten Eingabeattribute aufgeführt: Autovervollständigung: Zeigt automatisch zuvor eingegebene Informationen an und nimmt den Wert „Ein“ oder „Aus“ an. Anwendbar auf Text, Suche, URL, Telefonnummer, E-Mail, Passwort, Datumsauswahl, Bereich und Farbtypen.
Autofokus: Erhält automatisch den Fokus, nachdem die Seite geladen wurde. Formular: Geben Sie das Formular an, zu dem die Eingabe gehört. Es kann mehrere Formulare geben. formaction: Geben Sie die Seite (URL) oder Datei an, um diese Eingabe nach dem Absenden des Formulars zu verarbeiten. formenctype: Geben Sie an, wie die Daten nach dem Absenden des Formulars kodiert werden sollen. formmethod: Gibt die HTTP-Methode zum Senden von Formulardaten an, die die HTTP-Methode des entsprechenden Formulars überschreibt. formnovalidate: Überprüft nicht die Gültigkeit der Daten vor der Übermittlung. formtarget: Geben Sie an, wo der Antwortinhalt nach dem Absenden des Formulars angezeigt werden soll. Höhe, Breite: Länge und Breite des Eingabefelds, gilt nur für den Bildtyp. max, min: Die Maximal- und Minimalwerte des Eingabewerts. Geeignet für aussagekräftige Zahlen-, Bereichs- und Datumstypen. mehrere: Gibt an, ob die Eingabe mehrerer Werte zulässig ist, anwendbar auf E-Mail- und Dateitypen. Muster: Gibt den regulären Ausdruck zur Überprüfung des Eingabewerts an, geeignet für Text, Suche, URL, Telefonnummer, E-Mail, Passwort. Platzhalter: Informationen vor der Eingabe abfragen, anwendbar auf Text, Suche, URL, Telefonnummer, E-Mail, Passwort. erforderlich: Gibt an, ob es sich um ein erforderliches Element handelt. Wenn das erforderliche Element nicht ausgefüllt ist, kann das Formular nicht gesendet werden. Gilt für Text, Suche, URL, Telefonnummer, E-Mail, Passwort, Datumsauswahl. Nummer, Kontrollkästchen, Radio und Dateitypen. Schritt: Geben Sie den Schrittwert für das automatische Wachstum ein, der für die Typen Zahl, Bereich, Datum, Datum/Uhrzeit, Datum/Uhrzeit-Lokal, Monat, Uhrzeit und Woche gilt. Liste: Eine Kandidatenliste von Eingabeelementen, die in Verbindung mit dem Datenlistenelement verwendet werden muss. Das Listenattribut kann für folgende Typen verwendet werden: Text, Suche, URL, Telefonnummer, E-Mail. Datum, Nummer, Bereich und Farbe funktionieren bei FireFox. Schauen Sie sich ein kleines Beispiel an:
Kopieren Sie den Code
Der Code lautet wie folgt:
Das Folgende Wenn Sie beispielsweise versuchen, jede Eigenschaft zu verwenden, können Sie sie in verschiedenen Browsern ausführen, um den tatsächlichen Effekt zu sehen:
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
