HTML5 -Formen: Das Markup

Key Takeaways

• HTML5 führt eine Reihe neuer Eingangstypen und -attribute für Formulare ein, einschließlich E-Mail, Tel, URL, Suche, Nummer, Bereich, Datum, DateTime, DateTime-Local, Monat, Zeit, Uhrzeit und Farbe, die native Eingaben liefern Unterstützung und Validierung ohne JavaScript -Code.
• HTML5 bietet schreibgeschützte Ausgabeoptionen, einschließlich Ausgabe (das Ergebnis einer Berechnung oder Benutzeraktion), Fortschritt (eine Fortschrittsleiste) und Messgerät (eine Skala, die sich je nach den für die Attribute festgelegten Werte zwischen den Werten ändern kann) . Es ermöglicht auch die Verwendung von Etikettenelementen entweder um oder neben der Eingabe selbst mit einem für Attribut mit der ID der Eingabe.
• Während HTML5 -Eingangstypen die Zukunft sind, ist es wichtig, immer den richtigen Eingangstyp für die von Ihnen angeforderten Daten zu verwenden und Benutzerdaten auf der Serverseite zu validieren. Die Client-Seite-Validierung hat und wird niemals ein Ersatz für die serverseitige Validierung sein.

Dies ist die erste in einer dreiteiligen Serie über HTML5-Webformulare. Wir werden das grundlegende Markup in diesem Artikel behandeln, bevor wir uns mit dem Styling und den clientseitigen JavaScript-Validierungs-APIs fortschreiten. Ich empfehle Ihnen, dies zu lesen, auch wenn Sie bereits mit Formularen vertraut sind - es gibt viele neue Attribute und Gotchas! HTML -Formulare mögen banal sein, sind jedoch für die meisten Websites und Apps von entscheidender Bedeutung. In HTML4 waren die Eingangsfelder beschränkt auf:

• Eingabetyp = "text"
• Eingabetyp = "Kontrollkästchen"
• Eingabe type = "radio"
• Eingabe type = "Passwort"
• Eingabe type = "Hidden" - Für Daten kann der Benutzer
nicht anzeigen
• Eingabe type = "Datei" - für Uploads
• textarea - für einen längeren Texteintrag
• Wählen Sie-für Dropdown-Listen
• Taste - Im Allgemeinen werden zum Senden eines Formulars verwendet, obwohl Eingabetyp = "Senden" und Eingabe -Typ = "Bild" auch verwendet werden könnte.

Auch:

• CSS -Styling -Möglichkeiten waren begrenzt,
• benutzerdefinierte Steuerelemente wie Datum und Farbpflücker mussten in Code und
entwickelt werden
• clientseitige Validierung erforderlich JavaScript.

Zusätzliche HTML5 -Eingangstypen

Eine Flut neuer Eingangstypen wurde eingeführt. Diese bieten native Eingabeunterstützung und Validierung ohne JavaScript -Code…
Typ Beschreibung E-Mail Geben Sie eine E -Mail -Adresse ein Tel Geben Sie eine Telefonnummer ein - es wird keine strenge Syntax durchgesetzt, aber Linienbrüche werden entfernt URL Geben Sie eine URL ein suchen Ein Suchfeld mit Zeilenunterbrechungen wurde automatisch entfernt Nummer eine schwebende Punktzahl Reichweite Eine Kontrolle über die Eingabe eines ungefähren Wertes, der typischerweise von einem Schieberegler dargestellt wird Datum Geben Sie den Tag, Monat und Jahr ein datetime Geben Sie den Tag, Monat, Jahr, Stunde, Minute, Zweiter und Mikrosekunde an, basierend auf der aktuellen UTC -Zeitzone datetime-lokal Geben Sie ein Datum und eine Uhrzeit ohne Zeitzone ein Monat Geben Sie den Monat und das Jahr ohne Zeitzone ein Woche Geben Sie eine Woche ohne Zeitzone ein Zeit Geben Sie die Zeit ohne Zeitzone ein Farbe eine Farbe angeben

Eingabungsattribute

Sofern nicht anders angegeben, können Eingangsfelder eine der folgenden formspezifischen Attribute haben. Einige sind boolesche Attribute, dh sie benötigen keine Werte, z. B.

<span><span><span><input> type<span>="email"</span> name<span>="email"</span> required /></span></span></span>

Sie können sie jedoch hinzufügen, wenn Sie eine strengere XHTML-ähnliche Syntax bevorzugen, z.

<span><span><span><input> type<span>="email"</span> name<span>="email"</span> required<span>="required"</span> /></span></span></span>

Attribut Beschreibung Name Der Eingabefeldname Wert ein Anfangswert überprüft Überprüft ein Kontrollkästchen oder ein Radioeingang Maxlenlänge die maximale Länge der eingegebenen Zeichenfolge. Dies kann auch auf TextArea -Felder in HTML5 angewendet werden Minlenlänge Die Mindestlänge der eingegebenen Zeichenfolge. Dies wird dokumentiert, aber zum Zeitpunkt des Schreibens ist die Browserunterstützung schlecht und das Attribut führt zu einem Fehler. Eine alternative Option ist muster = ". {3,}"Das würde mindestens drei Zeichen erzwingen. Platzhalter Ein subtiler Text Hinweis im Eingangsfeld angezeigt Autofokus Setzen Sie den Fokus auf dieses (nicht verborgene) Feld, wenn die Seite geladen wird erforderlich Gibt an, dass ein Wert eingegeben werden muss Muster stellt sicher, dass ein Wert an einen regulären Ausdruck hält min Der zulässige Mindestwert (numerische und Datumstypen) Max Der Maximalwert erlaubt (numerische und Datumstypen) Schritt die Wertgranularität. Beispielsweise würde Eingabe type = "number" min = "10" max = "19" step = "2" würden nur die Werte 10, 12, 14, 16 oder 18 zulassen. automatisch vervollständigt Bietet dem Browser einen Hinweis für die automatische Vervollständigung, z. "Abrechnungs -E -Mail" oder kann auf "Ein" oder "aus" festgelegt werden, um zu aktivieren und entsprechend zu deaktivieren inputMode Gibt den Eingangsmechanismus an. Die nützlichsten Optionen:

• wörtlich-Nicht-Pro-Pro-Inhalte wie Benutzernamen
• lateinisch - lateinisches Skript wie Suchfelder
• lateinamame-Namen, d. H. Mit der Erstbriefkapitalisierung
• lateinische Produkte-Prosa-Inhalte wie Nachrichten, Tweets usw.
• numerisch - numerische Eingabe, bei der Anzahl oder Bereich nicht geeignet wäre, z. Kreditkartennummern

Größe Die Größe in Zeichen für Text- oder Kennworteingänge oder Pixel für E -Mail-, Tel-, URL- oder Sucheingänge. Wahrscheinlich am besten vermieden, da Sie CSS verwenden sollten, um Felder zu stylen. Reihen Anzahl der Textreihen (nur Textbereich) cols Anzahl der Textspalten (nur TextArea) Liste zeigt auf eine festgelegte Datalist -Optionen Rechtschreibprüfung auf True oder False eingestellt, um die Zauberprüfung zu aktivieren oder zu deaktivieren bilden Die ID der Form, zu der diese Eingabe gehört. Im Allgemeinen sollten Eingaben in einem Formular verschachtelt sein, aber dieses Attribut ermöglicht es, dass eine Eingabe überall auf der Seite definiert werden kann Formaktion Gibt eine URI an, um die Formularaktion beim Senden zu überschreiben (nur Schaltflächen/Bilder senden). Formmethode Gibt GET oder Post an, um die Formularmethode beim Senden zu überschreiben (nur Schaltflächen/Bilder senden). Formenctype Gibt den Inhaltstyp beim Senden an (Text/Ebene, Multipart/Form-Data oder Anwendung/X-WWW-Form-Urlencoded nur für Senden-Schaltflächen/Bilder). Formtarget Gibt ein Zielfenster/ein Rahmen an, um das Formularziel beim Senden zu überschreiben (nur Schaltflächen/Bilder senden). Readonly Der Eingangswert kann nicht geändert werden, obwohl er validiert und eingereicht wird deaktiviert Deaktiviert die Eingabe - Es wird keine Validierung stattfinden und Daten werden nicht eingereicht
Beachten Sie, dass Datumsfelder immer yyyy-mm-dd für Wert, Min und Max verwenden müssen Attribute.
Das folgende Beispiel fordert eine obligatorische E -Mail an, die in @mySite.com endet und sich beim Laden der Seite konzentriert:

<span><span><span><input> type<span>="email"</span> name<span>="email"</span> required /></span></span></span>

Datalisten

Ein Datalist enthält eine Reihe geeigneter Optionen für jede Art von Eingabe, z.

<span><span><span><input> type<span>="email"</span> name<span>="email"</span> required<span>="required"</span> /></span></span></span>

Wenn der Datalist unterstützt wird, zeigt der Browser, wenn Sie mit dem Eingeben beginnen. Die gesamte Liste wird normalerweise angezeigt, wenn Sie auf die Steuerung doppelklicken oder auf den Pfeil nach unten klicken (falls angezeigt). Im Gegensatz zu einem Standard-Auswahl-Dropdown kann der Benutzer diese Auswahlmöglichkeiten überschreiben und seinen eigenen Wert eingeben. Es ist möglich, Werte und Text wie Standard -Auswahloptionen festzulegen, z.

<span><span><span><input>
</span></span><span>  <span>type<span>="email"</span>
</span></span><span>  <span>name<span>="login"</span>
</span></span><span>  <span>pattern<span>="@mysite\.com$"</span>
</span></span><span>  <span>autocomplete<span>="email"</span>
</span></span><span>  <span>autofocus
</span></span><span>  <span>required /></span></span></span>

Beachten Sie jedoch, dass Implementierungen unterschiedlich sind. Zum Beispiel kann Firefox automatisch auf dem Text selbst (Internet Explorer) vervollständigt, während Chrome den Wert (dh) bevorzugt und den Text angezeigt hat:

Datalisten können von JavaScript bevölkert werden, wenn Sie Optionen über AJAX abrufen möchten.

Behinderung der Validierung

Die Validierung für das gesamte Formular kann deaktiviert werden, indem ein Novalidat -Attribut auf das Formularelement festgelegt wird. Alternativ können Sie ein Formnovalidat -Attribut für die Schaltfläche/das Bild des Formulars einstellen. Denken Sie auch daran, dass das Einstellen des deaktivierten Attributs einer Eingabe die Validierung in diesem Feld verhindert.

Ausgabefelder

Während wir in erster Linie Eingabetypen diskutieren, bietet HTML5 auch Leseausgabeoptionen:

• Ausgabe - Das Ergebnis einer Berechnung oder einer Benutzeraktion
• Fortschritt - Ein Fortschrittsbalken (der Wert und die Max -Attribute definieren den Status)
• Meter - eine Skala, die sich je nach den für den Wert der Attributen festgelegten Werte zwischen grün, bernstein und rot ändern kann, max, niedrig, hoch und optimal

Trenn- und Kennzeichnungseingänge

In der Form von Whatwg.org heißt es:

Jeder Teil einer Form wird als Absatz angesehen und wird typischerweise von anderen Teilen unter Verwendung von

Elementen

getrennt Interessant. Normalerweise benutze ich ein DIV, obwohl ich bezweifle, dass es aus semantischer Sicht von Bedeutung ist. Ein P -Tag ist kürzer, obwohl Sie eine Klasse anwenden müssen, um die Margen zu ändern. Noch wichtiger ist, dass Sie beschriften, entweder um oder neben der Eingabe selbst mit einem für das Attribut angegebenen Attribut die ID der Eingabe, z.

<span><span><span><input> type<span>="email"</span> name<span>="email"</span> required /></span></span></span>

Keine Standardsteuerung

Es gibt keine spezifischen Schnittstellenrichtlinien, die Browser -Anbieter befolgen können. Dies ist beabsichtigt: Ein typischer Desktop-Maus-kontrollierter Date-Picker kann auf einem mobilen Gerät zu klein sein, damit der Anbieter eine berührungsbasierte Alternative implementieren kann.

Browserunterstützung

In allen Browsern wird nicht jeder Eingangstyp und jedes Attribut unterstützt. Im Allgemeinen enthalten die meisten modernen Browser aus IE10 Grundlagen wie E -Mail und Nummer. Die Datumstypen werden jedoch zum Zeitpunkt des Schreibens nur in Webkit- und Blink -Browsern unterstützt. Der Browser kehrt zu einer Standardtexteingabe zurück, wenn ein bestimmter Typ ein bestimmtes Typ und ignoriert Attribute, wenn diese Werte nicht unterstützt werden.

Verwenden Sie immer den richtigen Typ!

Es ist wichtig, den richtigen Eingangstyp für die von Ihnen angeforderten Daten zu verwenden. Das mag offensichtlich erscheinen, aber Sie werden auf Situationen stoßen, wenn Sie versucht sind, eine Standardtexteingabe zu verwenden. Betrachten Sie Daten. Die Unterstützung ist fleckig und dies führt zu Implementierungsproblemen:

1. Die Standarddatumeingabe gibt immer Daten im yyyy-mm-dd-Format zurück, unabhängig davon, wie der Datumspicker in Ihrem Gebietsschema dargestellt wird.


2. IE und Firefox werden auf einen Standard-Texteingabe zurückgreifen, aber Ihre Benutzer erwarten möglicherweise Werte in den US-amerikanischen MM-DD-YJJJ oder in europäischem DD-MM-YJYY-Format.


3. Ein JavaScript-Datumspicker wie das in der JQuery-Benutzeroberfläche können Sie ein benutzerdefiniertes Format definieren-oder sogar Jyjyy-MM-DD für die Konsistenz-, aber Sie können nicht garantieren, dass JavaScript aktiviert wird.

Die einfache Lösung besteht darin, die HTML5 -Datumseingabe aufzugeben, zu Text zurückzukehren und Ihre eigene Datumsregelung zu implementieren. Nicht. Sie erstellen niemals einen benutzerdefinierten Datumspicker, der in allen Geräten auf allen Bildschirmauflösungen funktioniert, die Tastatur-, Maus- und Berührungseingabe unterstützt und weiter funktioniert, wenn JavaScript deaktiviert ist. Insbesondere sind mobile Browser häufig ihren Desktop-Cousins ​​voraus und implementieren gute Touchscreen-Steuerelemente. Die HTML5 -Eingangstypen sind die Zukunft. Verwenden Sie sie und fügen Sie bei Bedarf JavaScript-Polyfills in Situationen hinzu, in denen Sie eine gute Cross-Browser-Unterstützung benötigen. Aber denken Sie daran,…

serverseitig

validieren Die Browser -Validierung ist nicht garantiert. Selbst wenn Sie alle gezwungen haben, mit der neuesten Version von Chrome zugreifen zu können, könnten Sie niemals verhindern:

• Browser -Fehler oder JavaScript -Fehler, die ungültige Daten zulassen
• Der Benutzer ändert Ihre HTML oder Skripte mithilfe von Browser -Tools
• Einreichung von Systemen außerhalb Ihrer Kontrolle oder
• Datenabfangen zwischen dem Browser und dem Server (sicherlich über HTTP).

Die Client-Seite-Validierung hat und wird niemals ein Ersatz für die serverseitige Validierung sein. Die Validierung von Benutzerdaten auf dem Server ist unerlässlich. Auf dem Kunden ist es ein nice-to-have . Schließlich können Sie in Yyyy-MM-DD oder dem Format, das Sie dem Benutzer angegeben haben (MM-DD-YJJJ, DD-MM-YYYY usw.) erhalten werden, prüfen Sie in den ersten vier Zeichen oder verwenden Sie die Muttersprache/ verwenden Sie die Muttersprache/ verwenden Sie die Muttersprache. Framework Datum Parsingmethoden nach Bedarf. Wir haben in diesem Artikel viel behandelt. Im nächsten Teil werden wir uns mit Formularbezogenen CSS-Eigenschaften befassen.

häufig gestellte Fragen (FAQs) zu HTML5 -Formularen Markup

Was ist die Bedeutung der Verwendung von HTML5 in Form von Markup? Diese neuen Funktionen ermöglichen spezifischere Eingangstypen wie E -Mail, Datum und Uhrzeit, die vom Browser selbst validiert werden können, wodurch die Notwendigkeit zusätzlicher JavaScript reduziert werden kann. Dies führt zu sauberer, effizienterer Code und einer glatteren Benutzererfahrung. Zum Beispiel kann das „erforderliche“ Attribut verwendet werden, um sicherzustellen, dass es sich um wesentliche Felder ausgefüllt werden. Das Attribut „Platzhalter“ kann den Benutzern Hinweise darauf geben, welche Art von Informationen in einem Feld erwartet werden. Darüber hinaus kann das Attribut "Autofocus" den Cursor automatisch auf ein bestimmtes Eingabefeld konzentrieren, wenn die Seite geladen wird, wodurch die Interaktion des Benutzers mit dem Formular leitet.

Was sind einige häufige Fehler, die Sie bei der Verwendung von HTML5 für das Formular Markup vermeiden sollten? Beispielsweise kann die Verwendung des falschen Eingangstyps dazu führen, dass falsche Daten übermittelt werden. Ein weiterer Fehler ist, dass ältere Browser, die HTML5 nicht unterstützen, keine angemessenen Fallbacks bereitstellt. Dies kann zu einer schlechten Benutzererfahrung für diejenigen führen, die ältere Technologie verwenden.

Wie kann ich HTML5 verwenden, um interaktivere Formen zu erstellen? interaktive Formen. Zum Beispiel kann das Element „Datalist“ verwendet werden, um eine Dropdown -Liste von Optionen für ein Eingabebuch zu erstellen, während die Elemente „Fortschritt“ und „Meter“ verwendet werden können, um den Fortschritt einer Aufgabe oder den aktuellen Wert innerhalb eines visuell darzustellen Der bekannte Bereich. Zum Beispiel kann das „erforderliche“ Attribut verwendet werden, um sicherzustellen, dass ein Feld nicht leer bleibt, während das Attribut „Muster“ verwendet werden kann, um einen regulären Ausdruck anzugeben, mit dem der Wert des Eingabefeldes übereinstimmt. Wenn die Eingabe diese Kriterien nicht erfüllt, wird das Formular nicht eingereicht und der Benutzer wird aufgefordert, ihre Eingaben zu korrigieren. Die Elemente in HTML5 geben einen klaren Hinweis darauf, welche Art von Inhalten in ihnen enthalten ist, sodass Entwickler und Maschinen (wie Suchmaschinen) die Struktur und den Inhalt einer Webseite erleichtert. Dies kann die Optimierung und Zugänglichkeit der Suchmaschine verbessern.

Wie kann ich sicherstellen, dass meine HTML5 -Formulare mit älteren Browsern kompatibel sind? Browser, die möglicherweise nicht alle HTML5 -Funktionen unterstützen. Dies kann durch JavaScript verwendet werden, um festzustellen, ob ein Browser eine bestimmte Funktion unterstützt und eine alternative Implementierung bereitstellt, wenn dies nicht der Fall ist. 🎜> HTML5 führt mehrere Funktionen ein, die das mobile Erlebnis von Formularen verbessern können. Zum Beispiel kann das Attribut „Autofocus“ verwendet werden, um den Cursor automatisch auf ein bestimmtes Eingabefeld zu konzentrieren, wenn die Seite geladen wird, wodurch die Notwendigkeit reduziert wird, dass Benutzer manuell auf das Feld tippen. Darüber hinaus bringen die neuen Eingangstypen wie „E -Mail“ und „tel“ spezielle Tastaturen auf mobilen Geräten auf, sodass Benutzer den richtigen Datentyp eingeben können.

Was sind einige Best Practices für die Strukturierung eines Webformulars in HTML5? Steuerelemente verwenden das Element "Etikett" und das Element "Legend", um eine Bildunterschrift für jeden "Felderset" bereitzustellen. Darüber hinaus ist es wichtig, die entsprechenden Eingangstypen und -attribute zu verwenden, um die Datengültigkeit zu gewährleisten und die Benutzererfahrung zu verbessern. HTML5 bildet auf verschiedene Weise. Sie können beispielsweise CSS verwenden, um die Farbe, Größe und Schriftartelemente zu ändern, Grenzen und Hintergründe hinzuzufügen und Schwebeffekte anzuwenden. Darüber hinaus können CSS verwendet werden, um das Layout von Formularelementen wie die Ausrichtung von Formularsteuerungen und -bezeichnungen und das Erstellen von Multi-Säulen-Formen zu steuern.

.

Das obige ist der detaillierte Inhalt vonHTML5 -Formen: Das Markup. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!