Heim > Web-Frontend > H5-Tutorial > Formulare in HTML5

Formulare in HTML5

高洛峰
Freigeben: 2017-02-06 14:11:23
Original
1345 Leute haben es durchsucht

Im Vergleich zu HTML4 bieten die Elemente und Funktionen in HTML5 ein höheres Maß an semantischem Markup und entfernen außerdem eine große Anzahl redundanter Elemente, die in HTML4 aufgrund von Skripten und Stilen vorhanden sind. Indem sie dafür sorgen, dass sich Formulare auf verschiedenen Websites konsistenter verhalten und zeitnah auf Benutzereingabedaten reagieren, bieten HTML5-Formularfunktionen Benutzern ein besseres Erlebnis. Diese Erfahrungen gelten auch für Benutzer, die Browser-Scripting deaktiviert haben.

In diesem Thema werden einige neue Funktionen oder Änderungen beschrieben, die von Gecko/Firefox4 oder höher unterstützt werden. Das Typattribut des

-Elements hat mehr Werte: Dieses Element stellt ein Suchfeld dar. Zeilenumbrüche werden aus dem Eingabewert entfernt, es gibt jedoch keine weiteren Syntaxverbesserungen.

tel: Dieses Element kann als Eingabesteuerung zum Bearbeiten einer Telefonnummer verwendet werden. Zeilenumbrüche werden aus dem Eingabewert entfernt und es werden keine weiteren Syntaxverbesserungen vorgenommen, da die Unterschiede bei der Internationalisierung von Telefonnummern sehr offensichtlich sind. Sie können Eigenschaften wie Muster und Maxlänge verwenden, um die in das Steuerelement eingegebenen Werte zu begrenzen.

URL: Dieses Element rendert ein Eingabesteuerelement zum Bearbeiten einer URL. Zeilenumbrüche sowie führende und nachfolgende Leerzeichen werden automatisch entfernt.

E-Mail: Dieses Element gibt eine E-Mail-Adresse wieder. Zeilenumbrüche werden automatisch entfernt. Es ist möglich, eine ungültige E-Mail-Adresse festzulegen, aber wenn sie die Einschränkungen des Eingabefelds erfüllt, muss sie den Spezifikationen in der Extended Backus Normal Form (ABNF) entsprechen: 1( atext / "." ) "@" ldh-str 1( "." ldh-str ), wobei atext in RFC 5322 Abschnitt 3.2.3 und ldh-str in RFC 1034 Abschnitt 3.5 definiert ist. .

Hinweis: Wenn das Mehrfachattribut festgelegt ist, können mehrere E-Mails durch Kommas getrennt eingegeben werden, Firefox unterstützt dies jedoch nicht. Das Element .

Liste: Die ID des -Elements, der Inhalt des Elements und das

Muster: Ein regulärer Ausdruck, der zum Überprüfen des Werts eines Steuerelements verwendet wird und auf Eingabeelemente angewendet werden kann, deren Typwerte Text, Tel., Suche, URL und E-Mail sind.

form: Eine Zeichenfolge, die angibt, zu welchem ​​

-Element diese Eingabe gehört. Eine Eingabe kann nur in einer Form vorliegen.

formmethod: Eine Zeichenfolge, die angibt, welche HTTP-Methode (GET oder POST) verwendet wird, wenn das Formular gesendet wird. Das Methodenattribut im -Element kann überschrieben werden. formmethod kann nur wirksam werden, wenn der Typwert „image“ oder „submit“ lautet und das Formularattribut festgelegt ist.

x-moz-errormessage: Eine Zeichenfolge, die eine Fehlermeldung anzeigt, wenn die Formularfeldvalidierung fehlschlägt. Dieser Wert ist eine Mozilla-Erweiterung und kein Standard. Das

-Element

hat eine neue Funktion:

novavalidate: Wenn Sie diese Funktion festlegen, wird das Formular nicht validiert, bevor es gesendet wird. Das

-Element Das

-Element zeigt eine Spalte mit

Sie können das Listenattribut für das -Element verwenden, um eine bestimmte Eingabe einem bestimmten -Element zuzuordnen. Das

-Element


Sie können das for-Attribut verwenden, um das -Element mit anderen Elementen im Dokument zu verknüpfen, die sich auf den Vorgang auswirken (z. B. Eingaben oder Parameter). Der Wert des for-Attributs ist eine durch Leerzeichen getrennte Liste von IDs anderer Elemente.

Gecko 2.0 (was bei anderen Browsern nicht der Fall ist) unterstützt das Anpassen von Gültigkeitsbeschränkungen und Fehlermeldungen für das . Sie können die folgenden CSS-Pseudoklassen verwenden: :invalid, :valid, :-moz -ui-invalid und :-moz-ui-valid. Dies kann in Situationen nützlich sein, in denen das berechnete Ergebnis gegen eine Geschäftsregel verstößt, aber nicht auf einen Fehler in einem bestimmten Eingabewert zurückzuführen ist (z. B. „Der Gesamtprozentsatz darf 100 nicht überschreiten“).

Platzhalterattribut

Platzhalterattribut funktioniert bei -Elementen und fordert den Benutzer auf, welche Inhalte in dieses Feld eingegeben werden können. Der Text im Platzhalter darf keine Wagenrückläufe und Zeilenvorschübe enthalten.

Autofokus-Attribut

Mit dem Autofokus-Attribut können Sie ein Formularsteuerelement angeben, das beim Laden der Seite automatisch den Fokus erhält, es sei denn, der Benutzer überschreibt es, indem er beispielsweise einen Wert in ein anderes Steuerelement eingibt. Nur ein Formular innerhalb eines Dokuments kann das Autofokus-Attribut haben, bei dem es sich um einen booleschen Wert handelt. Dieses Attribut gilt für die Elemente ,