Neues Formular Eingabetypen in HTML5

HTML-Formulare sind um den bescheidenen zentriert, aber flexibel Eingang Element. HTML5 fügt eine Reihe von sehr nützlichen Formen der Eingabe, die in einem modernen Tool User-Interface drehen HTML helfen.

Obwohl die Unterstützung für diese Tags nicht universell ist, ist es sicher jetzt mit ihnen zu beginnen. Jeder Browser (auch IE6), die nicht die erweiterten Input-Typen versteht kehrt zu input type = "Text", was genau das noch funktioniert, wie erwartet (wenn auch nicht mit der Validierung und User-Interface-Verbesserungen der neueren Tags).

Der Standard gibt an, dass die verschiedenen Typen unterstützt werden, aber die genaue Art und Weise die Elemente werden unterstützt von Browser zu Browser variieren kann. Zum Beispiel kann die E-Mail-Feld aussehen wie ein normaler Textfeld für einen Benutzer auf einem Standard-Desktop-Computer, aber die virtuelle Tastatur auf einem mobilen Gerät könnte das @ enthalten ändern, wenn es eine E-Mail-Feld trifft.

Die meisten dieser Fachgebiete unterstützen Validierung, so auf ein Minimum, ist es nützlich ein zu setzen :ungültig CSS-Stil, so kann der Anwender feststellen, ob die Daten im Feld ist. Hier sind die Eingangstypen mit Beispielcodierung:

  • Farbe: Hier kann der Benutzer eine Farbe unter Verwendung von Standard Web-Formate zur Auswahl - anerkannten Farbnamen (gelb) und hex voran Werte durch ein Symbol # (# FF0033).

  • Datum: Einige Browser (Firefox 3.5) ein Textfeld angezeigt werden, andere (Opera 10) zeigen eine spezielle Kalendersteuerelement, noch andere Browser (Chrome) umfassen sowohl Text als auch ein Pop-up-Kalender. Wenn das Datum von Text eingegeben wird, muss er in einem yyyy-mm-dd Format eingegeben werden:

    Sie können die Daten auf einen bestimmten Bereich erlaubt beschränken die durch die Anwendung min und max Attribute an das Element.

  • Zeit: mm-Format: Die Zeit wird im hh gespeichert. Einige Browser enthalten einen Doppelpunkt direkt auf dem Feld, und einige ändern, um die virtuelle Tastatur mit Zahlen und dem Doppelpunkt. Es ist auch möglich, dass ein Browser von benutzerdefinierten Zeitwähler eine Art Pop-up, aber dies ist noch nicht in allen gängigen Browsern unterstützt.

  • Terminzeit: Combines Datum und Zeit in einem einzigen Element. Es enthält auch einen Mechanismus, um die Zeitzone für die Eingabe.

    Einige Browser öffnet sich ein Kalender-Steuerelement für den neuesten Stand zu bringen und eine formatierte Eingabe für die Zeit. Andere können für Datum und Uhrzeit Eingabe virtuelle Tastaturen ändern.

    Die offizielle vollständige Datums- und Uhrzeitformat aus den verschiedenen Datums- und Zeitelemente zurückgegeben wird, ist ein spezialisierter Code: yyyy-mm-ddThh: mm + ff: gg:

  • yyyy: Vier Ziffern für das Jahr.

  • -: Eine tatsächliche Strichzeichen, die zwischen Jahr und Monat gestellt werden muss. Ein weiterer Strich zwischen den Monat und den Tag gelegt.

  • Millimeter: Zwei Ziffern für den Monat.

  • dd: Zwei Ziffern für den Tag.

  • T: Die Hauptstadt T zeigt den Beginn der Zeit des Codeteils.

  • hh: Zwei Ziffern für die Stunde im 24-Stunden-Format.

  • :: Der Doppelpunkt zwischen der Stunden- und Minuten. Ein weiterer Doppelpunkt erscheint zwischen der Stunde und Minuten der Zeitzonen-Offset.

  • Millimeter: Zwei Ziffern für die Minuten.

  • +/ - / Z: Die Zeitzonen-Offset wird durch eine Kapital angezeigt Z (Wenn die Zeit Zulu oder GMT-Zeit ist) oder das Symbol + oder - wenn die Zeit in einer anderen Zeitzone.

  • ff: Wenn die Zeitzone nicht Zulu Zeit ist, geben die Anzahl der Stunden von der GMT-Offset.

  • gg: Anzahl der Minuten von Zulu Zeit versetzt. Typischerweise ist dies 00, aber es ist möglich, dass die Zeitzone von 15, 30 oder 45 Minuten versetzt wird.

Zum Beispiel, 05.30 am 11. Oktober 2011 in New York City sieht wie folgt aus:

2011-10-11T17: 30-05: 00

Datum und Uhrzeit müssen in diesem Format gültig sein für Browser zu betrachten, eine Validierung Terminzeit Feld.

  • datetime-local: Genau wie die Terminzeit Element ohne Zeitzonenanzeige:

  • Email: Das sieht aus wie ein einfaches Textfeld, aber es kann entsprechend modifiziert werden, wie es abgerufen.

  • Monat: Dies erzeugt ein vierstelliges Jahr von einem zweistelligen Monat folgt:

  • Nummer: Numerische Daten können durch eine Art von Selektor (zum Beispiel nach oben und unten Pfeile), oder dieses Tag kann die virtuelle Tastatur, gefolgt von einem Textfeld besteht aus einem tragbaren Gerät ändern, um nur numerische Eingabe handhaben.

    Das Nummer Eingabetyp unterstützt verschiedene spezielle Attribute:

  • min: Der Minimalwert erlaubt.

  • max: Der maximal zulässige Wert.

  • Schritt: Dieser Wert gibt an, wie stark die visuelle Schnittstelle Werkzeuge (in der Regel klein und ab Pfeile), um den Wert zu ändern, wenn sie aktiviert.

  • Wert: Der numerische Wert des Elements.

    • Alle Attribute des Nummer Element kann ganze oder Gleitkomma- sein. Allerdings werden die derzeitigen Browser, die dieses Tag (Opera und Chrome) unterstützen scheinen nicht so gut mit Floating-Point-Werte zu prüfen, wie sie mit ganzzahligen Werten zu tun. Für mehr Kontrolle über numerische Eingabe, betrachten die Angebot Eingabetyp.

  • Angebot: Die meisten User-Interface-Toolkits haben eine Art von Schieber oder Scrollbar-Mechanismus, der es dem Anwender einfach macht optisch einen numerischen Wert einzugeben. Das "Angebot"> konstruieren fügt schließlich diese Funktionalität zu HTML-Formularen.

    Das Angebot Eingabe nimmt die gleichen Attribute wie Nummer, min, max, Wert, und Schritt. Wenn der Browser unterstützt die Angebot Tag, wird der Benutzer eine scroller- wenn nicht, ein Klartext-Eingabetyp werden sehen, erscheinen.

    Das Angebot Typ nicht den genauen Wert angezeigt werden, und es kann schwieriger sein, genaue Ergebnisse zu erzielen als mit der Nummer Eingabetyp. Eine Lösung ist, ein zu paaren Ausgabe Tag der Angebot, und verwenden javascript, um die Ausgabe zu aktualisieren, wenn der Bereich geändert wird. Ein Musterformular, das diese Idee beinhaltet:

    Wenn das Angebot Wert geändert wird, ruft eine javascript-Funktion aufgerufen updateOutput:

     Funktion updateOutput () {// get elementsvar myRange = document.getElementById ( "myRange") - var myOutput = document.getElementById ( "myOutput") - // den Wert kopieren overmyOutput.value = myRange.value-} // end function

    Wie Nummer Eingabetyp, der Angebot können Fließkommawerte gegeben werden, wenn Sie mögen.

  • Suche: Verwendet Text abzurufen, die als Teil einer Suche verwendet werden, ist beabsichtigt (entweder intern oder über einen Suchdienst). Bei den meisten Browsern, zeigt dieser Tag wie ein normaler Textfeld ein. Es ist manchmal etwas besonderes Verhalten. Auf Safari wird das Suchfeld mit einem kleinen angezeigt x, die löscht den Inhalt der Suche. Auf Chrome, die Auto-Vervollständigung Merkmale des Hauptsuchleiste werden automatisch in das Suchfeld (die auch die URL-Eingabeelement in Chrome ist) angewendet.

    Wie die anderen neuen Input-Typen gibt es keine Strafe für die Verwendung der Suche Element in Browsern, die es nicht unterstützen. Der Rückfall ist ein Klartext-Eingabe.

    Das Suche Element nicht wirklich jede Suche tun. Um es funktionsfähig zu machen, müssen Sie einen Code zu schreiben.

  • tel: Dieses Feld erwartet drei Ziffern, gefolgt von einem Bindestrich und vier Ziffern - eine lokale Telefonnummer. Sie können mit der Notwendigkeit zu spielen Muster Attribut, wenn Sie eine Vorwahl oder Erweiterungen zu überprüfen zulassen möchten.

  • url: Browser, die dieses Element unterstützen wird für die Überprüfung http: // Präfix für eine Webadresse. Mobile Browser kann auch die virtuelle Tastatur anpassen in URLs gefunden Zeichen häufig enthalten: den Doppelpunkt (:), Schrägstrich (/) und Tilde (~).

  • Woche: Der Benutzer kann in der Woche von einem Kalendersteuerelement wählen. Es gibt einen Wert in folgendem Format: yyyy-Wnn

  • yyyy: Stellt eine vierstellige Jahreszahl.

  • -: Der Strichzeichen.

  • W: Die Hauptstadt W Charakter.

  • nn: Die Woche als zweistellige Zahl.

    • Einige Browser Pop der Standard-Kalender-Steuerelement auf. Wenn der Benutzer ein Datum auswählt (oder eine Woche), wird nur das Jahr und die Woche zurückgegeben werden. Andere Browser einfach für das richtige Format zu validieren.

    Ähnliche

    Menü