HTML5-HTML-Elementerweiterung (Teil 2) – Das erweiterte Formularelement verdient Aufmerksamkeit. HTML5-Tutorial-Kenntnisse

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:

< label for="name">Click Me< ;/label>

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:

Wählen Sie Ihre Lieblingsfarbe:
Geburtstag: < ;input type="date" name="bday" />
Geburtstag (Datum und Uhrzeit):
Geburtstag ( Datum und Uhrzeit):
Geburtstag (Monat und Jahr):
Wählen Sie eine Zeit:
Wählen Sie eine Woche:
Menge ( zwischen 1 und 5):
Menge (zwischen 1 und 10):
Google durchsuchen:
Telefon:
Fügen Sie Ihre Homepage hinzu:
E-Mail:

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:

Favoriten

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:

Kopieren Sie den Code

Der Code lautet wie folgt:

E-Mail:
Bild :
Geben Sie ein Datum vor dem 01.01.1980 ein:
Geben Sie ein Datum nach dem 01.01.2000 ein:
Menge (zwischen 1 und 5):
Bilder auswählen:
Ländercode:
Vorname:
Benutzername:
Zahl:

Vorname:

Nachname:

建议：虽然并不是所有的浏览器都支持全部的类型，但是还是鼓励大家使用这些新类型, 因为即使浏览器不支持, 只不过是会退化成简单的text输入框而已.

实用参考：
W3C的教程：http://www.w3schools.com/html5/default.asp
HTML5官方指导：http://dev.w3.org/html5/html-author/
相当不错的一个指导网站：http://html5doctor.com/
HTML5中文教程:http://www.html5china.com/
一个不错的前端博客:http://www.pjhome.net/default.asp?cateID= 1
JS操作表单的相关知识：http://www.cnblogs.com/xugang/archive/2010/08/12/1798005.html