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</span> type<span>="email"</span> name<span>="email"</span> required /></span></span>

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

<span><span><span><input</span> type<span>="email"</span> name<span>="email"</span> required<span>="required"</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</span> type<span>="email"</span> name<span>="email"</span> required /></span></span>

Datalisten

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

<span><span><span><input</span> type<span>="email"</span> name<span>="email"</span> required<span>="required"</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>  <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>

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</span> type<span>="email"</span> name<span>="email"</span> required /></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!