HTML5 -Formulare: Eingangstypen (Teil 1) - SitePoint

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

-Merkmalen des

-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.



Abbildung 4.5.
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.



Abbildung 4.6.
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

, um Ihre eigene Nachricht festzulegen.
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 {
      //如果有效，必须设置虚假值，否则将始终出错
      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!