detaillierte Erkl?rung und Best Practices für HTML5 -Formulareingangstypen

Kernpunkte

• HTML5 -Formulare führen neue Eingangstypen ein, z. B. E -Mail, Suche, Datum, Uhrzeit, Nummer, Reichweite, Farbe usw. Diese Typen bieten Benutzeroberfl?chenelemente und native Datenüberprüfungsfunktionen, die mit Datentypen übereinstimmen. Selbst in ?lteren Browsern funktionieren diese neuen Eingangstypen ordnungsgem??, au?er dass sie standardm??ig als Standard -Textfelder angezeigt werden.
• Sucheingabetyp (type="search") bietet ein Suchfeld, mit dem Benutzer intuitive Such -Site -Eingabeaufforderungen bereitgestellt werden k?nnen. Es wird normalerweise mit einer integrierten Klarschaltfl?che ausgestattet und kann so gestaltet werden, dass sie dem Suchfeld des Browser- oder Betriebssystems übereinstimmt.
• E -Mail -Eingabetyp (type="email") wird verwendet, um eine oder mehrere E -Mail -Adressen anzugeben. Es unterstützt das Boolesche multiple Attribut für mehrere von Kommas getrennte E-Mail-Adressen. Touchpad -Ger?te zeigen normalerweise Tastaturen an, die für die E -Mail -Eingabe optimiert sind, wenn dieses Feld den Fokus erh?lt, und einige Browser geben auch Fehlermeldungen für ungültige E -Mail -Eingaben an.
• URL -Eingangstyp (type="url") wird verwendet, um eine Netzwerkadresse anzugeben, ?hnlich wie beim E -Mail -Eingangstyp, der als normales Textfeld angezeigt wird, jedoch eine Tastatur bereitstellt, die für die Netzwerkadress -Eingabe auf dem Touchscreen optimiert ist. Moderne Browser verwenden diesen Eingangstyp, um das allgemeine Protokollformat der URL zu überprüfen.

(Das Folgende wird aus dem Buch "HTML5 & CSS3 für die reale Welt, 2. Ausgabe" von Alexis Goldstein, Louis Lazaris und Estelle Weyl ausgehoben. Das Buch ist in Gesch?ften auf der ganzen Welt erh?ltlich und erh?ltlich. Sie k?nnen es auch hier finden Sie sind m?glicherweise bereits mit den

-Elements vertraut. Diese Eigenschaft bestimmt, welche Art von Formulareingabe dem Benutzer pr?sentiert wird. Wenn diese Eigenschaft weggelassen wird - oder für neue Eingangstypen und ?ltere Browser, bleibt der Browser nicht gültig. Dies ist es, was HTML5 -Formulare heute noch funktionieren l?sst, auch wenn Sie immer noch ?ltere Browser unterstützen. Wenn Sie einen neuen Eingabetyp wie E -Mail oder Suche verwenden, zeigt der ?ltere Browser nur Standardtextfelder für den Benutzer an. input type Unser Registrierungsformular verwendet derzeit vier der zehn Eingangstypen, mit denen Sie vertraut sind: Kontrollk?stchen, Text, Passwort und Senden. Hier finden Sie eine Liste aller verfügbaren Typen, die vor HTML5 verfügbar sind: type="text"

Taste

CheckBox
Datei
versteckt
Bild
Passwort
Radio
zurücksetzen
subine
text
• HTML5-Spezifikation bietet uns neun neue Eingabetypen, die UI-Elemente und native Datenüberprüfungsfunktionen bereitstellen, die mehr datentypkonform sind:
• such
• E -Mail
• url
• Tel
• Datum
• Zeit
• Nummer
• Bereich
• Farbe

HTML5.1 und Whatwg HTML Living Standard enthalten vier zus?tzliche Datumseingangstypen, von denen drei in modernen Browsern gut unterstützt werden:

• datetime-local
• Monat
• Woche
• DateTime (kein Browser unterstützt es)

Erfahren wir mehr über jeden neuen Typ und wie man sie benutzt.

Suche (Suche)

Sucheingabetyp (type="search") bietet ein Suchfeld - ein einzelnes Texteingangsregel für ein oder mehrere Suchbegriffe. Die Spezifikation zeigt:

Der Unterschied zwischen Textzustand und Suchzustand ist haupts?chlich im Stil: Auf Plattformen, auf denen sich das Suchfeld vom normalen Textfeld unterscheidet Normales Textfeld.

Viele Browserstil -Sucheing?nge in konsistenter Weise als Suchfeld des Browser- oder Betriebssystems. Derzeit haben Chrome, Safari, Opera und IE die Funktion des L?schens der Eingabe hinzugefügt, indem Sie auf die Maus klicken, um das × Symbol nach Eingabe von Text bereitzustellen, wie in Abbildung 4.5 gezeigt. Der Datums-/Zeiteingangstyp kann auch in Chrome und Opera gel?scht werden.



Auf Apple -Ger?ten haben die Suchfelder in Chrome, Safari und Opera standardm??ig abgerundet und entsprechen dem Aussehen des Suchfelds des Ger?ts. Auf einem Touchpad mit einer dynamischen Tastatur wird die Schaltfl?che ?GO“ je nach Ger?t als Suchymbol oder das Wort ?Suche“ angezeigt. Wenn Sie nicht standardm??ige
Eigenschaften einbeziehen, werden Chrome und Opera das Lupenglas/Find-Symbol im Formfeld angezeigt.

results W?hrend Sie weiterhin

verwenden k?nnen, um Suchfelder zu erstellen, kann der neue Suchentyp Benutzer intuitiv fordern, wo sie nach Websites suchen und eine Schnittstelle bereitstellen k?nnen, an die Benutzer gew?hnt sind.

Es gibt kein Suchfeld, aber hier ist ein Beispiel dafür, wie man es verwendet: type="text" HTML5 Herald

Da die Suche wie alle neuen Eingangstypen als regul?res Textfeld in nicht unterstützten Browsern angezeigt wird, gibt es keinen Grund, es bei Bedarf nicht zu verwenden.

<form id="search" method="get">
  <label for="s">Search:</label>
  <input type="search" id="s" name="s"/>
  <input type="submit" value="Search"/>
</form>

E -Mail -Adressen (E -Mail -Adressen)

E -Mail -Typ (

) wird verwendet, um eine oder mehrere E -Mail -Adressen anzugeben. Es unterstützt Boolesche

Attribute und erm?glicht mehrere von Kommas getrennte (optionale R?ume) E-Mail-Adressen. ?ndern wir das Formular, um type="email" für die E -Mail -Adresse des Registranten zu verwenden: multiple

<form id="search" method="get">
  <label for="s">Search:</label>
  <input type="search" id="s" name="s"/>
  <input type="submit" value="Search"/>
</form>

Wenn Sie den Eingabetyp von Text in E -Mail ?ndern, werden Sie feststellen, dass die Eingabe immer noch wie ein normales Textfeld aussieht. Es gibt jedoch Unterschiede hinter den Kulissen.

Wenn Sie ein Touchpad -Ger?t verwenden, wird diese ?nderung offensichtlich. Wenn Sie sich auf das E -Mail -Feld konzentrieren, zeigen die meisten Touchpad -Ger?te wie iPads oder Android -Telefone, die Chrom ausführen, Tastaturen an, die für E -Mail -Eingaben optimiert sind, einschlie?lich @ -Symbole, Perioden und Space -Schaltfl?chen, jedoch nicht, aber nicht Kommas, wie in Abbildung 4.6 gezeigt.



Firefox, Chrome, Opera und Internet Explorer 10 enth?lt au?erdem Fehlermeldungen für ungültige E -Mail -Eingaben: Wenn Sie versuchen, ein Formular einzureichen, das nicht als eine oder mehrere E -Mail -Adressen anerkannt wird, wird der Browser Ihnen mitgeteilt, was falsch ist. Die Standardfehlermeldung ist in Abbildung 4.7 dargestellt.

Abbildung 4.7. Hinweis: Benutzerdefinierte überprüfungsnachrichten m?gen die vom Browser bereitgestellten Standardfehlermeldungen nicht? Verwenden Sie

akzeptiert nur einen Parameter, die Fehlermeldung, die Sie angeben m?chten. Wenn Sie eine benutzerdefinierte Validierungsmeldung einrichten, müssen Sie die Validierungsnachricht nach dem Wert des Wertes zu einem gültigen Wert auf eine leere Zeichenfolge (Falschwert) einstellen, um die Einreichung der Formulare zu aktivieren:

.setCustomValidity(errorMsg) W?hrend Sie den Inhalt der Nachricht ?ndern k?nnen, sind Sie zumindest vorerst immer noch durch das Aussehen begrenzt. setCustomValidity

url

<label for="email">My email address is:</label>
<input type="email" id="email" name="email"/>

URL -Eingabe (

) wird verwendet, um die Netzwerkadresse anzugeben. ?hnlich wie E -Mail wird es als normales Textfeld angezeigt. Auf vielen Touchscreens wird die angezeigte On-Screen-Tastatur für die Netzwerkadresseingabe mit Vorw?rts-Schr?gstrichen (/) und ".com" -Knorteilen optimiert. Aktualisieren wir unser Registrierungsformular, um den URL -Eingangstyp zu verwenden:

überprüfung der URL type="url"

Alle modernen Browser beginnen mit dem Internet Explorer 10 URL -Eingangstypen. Wenn der Wert nicht mit einem Protokoll beginnt, wird die Eingabe als ungültig angegeben. Validieren Sie nur das allgemeine Protokollformat der URL, so dass q: //example.xyz beispielsweise als gültig angesehen wird, auch wenn q: // kein reales Protokoll ist. Wenn Sie m?chten, dass der eingegebene Wert ein spezifischeres Format anpasst, geben Sie Informationen in das Tag (oder Platzhalter) an, um den Benutzer zu informieren und das Attribut

function setErrorMessages(formControl) {
  var validityState_object = formControl.validity;
  if (validityState_object.valueMissing) {
      formControl.setCustomValidity('Please set an age (required)');  
  } else if (validityState_object.rangeUnderflow) {
      formControl.setCustomValidity('You\'re too young');
  } else if (validityState_object.rangeOverflow) {
      formControl.setCustomValidity('You\'re too old');
  } else if (validityState_object.stepMismatch) {
      formControl.setCustomValidity('Counting half birthdays?');
  } else {
      //如果有效，必須設(shè)置虛假值，否則將始終出錯(cuò)
      formControl.setCustomValidity('');
  }
}

zu verwenden, um seine Richtigkeit zu gew?hrleisten, wie bereits erw?hnt.

Telefonnummern (Telefonnummern)

Verwenden Sie für Telefonnummern einen Teleingabentyp (type="tel"). Im Gegensatz zu URL- und E -Mail -Typen erzwingen Teletypen keine bestimmte Syntax oder Muster. Buchstaben und Zahlen - eigentlich ein Zeichen au?er Zeilenumbrüche oder Kutschenrendite - sind gültig. Dies hat einen guten Grund: Auf der ganzen Welt hat jedes Land eine gültige Telefonnummern verschiedener L?ngen und Interpunktion. Daher ist es unm?glich, ein einzelnes Format als Standard anzugeben. In den USA ist beispielsweise 1 (415) 555-1212 so leicht zu verstehen wie 415.555.1212, aber Unternehmen k?nnen auch Buchstaben in Telefonnummern wie (800) Call-Now verwenden. Sie k?nnen eine spezifische Formatierung f?rdern, indem Sie Platzhalter mit korrekter Syntax oder Kommentaren nach der Eingabe sowie Beispiele einbeziehen. Zus?tzlich k?nnen Sie das Format mit dem Attribut pattern angeben. Geben Sie ein pattern in das Attribut title ein, um Tooltips bereitzustellen und die Benutzererfahrung native Verifizierungsfehlermeldungen zu verbessern. Sie k?nnen auch die setCustomValidity -Methode verwenden, um eine informativere Kundenüberprüfung vorzunehmen. Bei Verwendung des Tel -Eingangstyps zeigt das dynamische Touchpad normalerweise die Telefontastatur an, einschlie?lich der Sternchen- und Pfund -Tasten. Sie k?nnen Tel für andere Zwecke als Telefonnummern verwenden. Zum Beispiel kann es die beste Tastatur für die Eingabe der Sozialversicherungsnummer sein.

FAQs für HTML5 -Formulareingangstypen (FAQs)

Was sind die verschiedenen Arten von Eingangstypen von HTML5 -Formen?

html5 führt verschiedene neue Formulareingangstypen ein. Dazu geh?ren "Farbe", "Datum", "DateTime-Local", "E-Mail", "Monat", "Nummer", "Bereich", "Suche", "Tel", "Zeit", "URL" und "Woche" ”. Jeder Eingangstyp hat seinen spezifischen Zweck und kann die Benutzererfahrung der Website erheblich verbessern, indem sie angemessenere und benutzerfreundlichere Eingabefelder bereitstellen.

Wie funktioniert der "Datum" -Eingabetyp in HTML5?

Der Eingabetyp "Datum" in HTML5 erstellt ein Eingabefeld, mit dem der Benutzer ein Datum eingeben kann. Das Datumsformat ist gem?? dem Browser -Gebietsschema des Benutzers formatiert und ein Datumsauswahl wird normalerweise für die Benutzerfreundlichkeit bereitgestellt. Die Unterstützung für diesen Eingangstyp variiert jedoch vom Browser zum Browser.

Was passiert beim Betrachten von HTML5 -Formulareingangstypen in ?lteren Browsern?

Wenn Sie den HTML5 -Formulareingangstyp in einem ?lteren Browser anzeigen, der ihn nicht unterstützt, stand der Browser standardm??ig zum Standard "Text" -Antragsfeld. Dies bedeutet, dass der Benutzer weiterhin Informationen eingeben kann, aber bestimmte Funktionen des HTML5 -Eingangstyps (z.

Wie überprüfen Sie die Benutzereingabe in HTML5 -Form?

HTML5 liefert mehrere Attribute für die Eingabeüberprüfung, einschlie?lich "Erforderlicher", "Muster" und "min"/"max" der numerischen Eingangstypen. Diese Eigenschaften k?nnen verwendet werden, um sicherzustellen, dass die Eingabe der Benutzer bestimmte Kriterien erfüllt, bevor das Formular eingereicht wird.

Was ist der "Bereich" -Ineingangstyp in HTML5?

Der Eingangstyp "Bereich" in HTML5 erstellt einen Schieberegler, mit dem der Benutzer Werte in einem bestimmten Bereich ausw?hlen kann. Sie k?nnen den Bereich anhand der Eigenschaften "min" und "max" angeben und den Standardwert mit den "Wert" -Formen angeben.

Wie verbessert der Eingang "E -Mail" in HTML5 die Benutzererfahrung?

Der Eingabetyp "E -Mail" in HTML5 bietet den Benutzern eine bequeme M?glichkeit, ihre E -Mail -Adresse einzugeben. Es enth?lt eine integrierte überprüfung, um zu überprüfen, ob sich der eingegebene Text im E-Mail-Adressformat befindet. Einige Browser bieten m?glicherweise auch automatisch für diesen Eingangstyp.

Was ist der Zweck des Eingangstyps "Such" in HTML5?

Der Eingabetyp "Such" in HTML5 ist für Suchfelder ausgelegt. Dieser Eingabetyp kann suchspezifische Funktionen liefern, z. B. das L?schen des Suchfelds mit einem Klick oder die neuesten Suchergebnisse für den Benutzer.

Wie verwendet ich den Eingangstyp "Nummer" in HTML5?

Mit dem Eingangstyp "Nummer" in HTML5 kann der Benutzer die digitale Eingabe eingeben. Sie k?nnen die MIN- und MAX -Eigenschaften verwenden, um den akzeptablen Zahlenbereich anzugeben und die Eigenschaft "Schritt" zu verwenden, um Schrittwerte anzugeben.

Wofür ist der "Tel" -Eingangstyp in HTML5?

Der "Tel" -Eingangstyp in HTML5 wird für das Eingabefeld verwendet, das die Telefonnummer enthalten sollte. Es wird jedoch nicht die Eingabe überprüft, daher sollten Sie JavaScript oder ?hnliche Techniken zur überprüfung verwenden.

Wie funktioniert der "URL" -Intragstyp in HTML5?

Der Eingangstyp "URL" in HTML5 wird für Eingangsfelder verwendet, die URLs enthalten sollten. Es enth?lt eine integrierte überprüfung, um zu überprüfen, ob sich der eingegebene Text im URL-Format befindet. Einige Browser bieten m?glicherweise auch automatisch für diesen Eingangstyp.

Das obige ist der detaillierte Inhalt vonHTML5 -Formulare: Eingangstypen (Teil 1) - SitePoint. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!