Neue Formulareingabetypen in HTML5 - Dummies

HTML-Formulare nicht versteht, zentriert sich um das bescheidene, aber flexible Eingabeelement. HTML5 fügt eine Reihe von sehr nützlichen Eingabemethoden hinzu, die HTML in ein moderneres Benutzeroberflächen-Tool verwandeln.

Obwohl die Unterstützung für diese Tags nicht universell ist, können Sie sie jetzt sicher verwenden. Jeder Browser (auch IE6), der die erweiterten Eingabetypen nicht versteht, wird auf input type = "text" zurückgesetzt, was immer noch genau wie erwartet funktioniert (allerdings nicht mit den Validierungs- und Benutzeroberflächenverbesserungen der neueren Tags).

Der Standard gibt an, dass die verschiedenen Typen unterstützt werden, aber die genaue Art und Weise, wie die Elemente unterstützt werden, kann von Browser zu Browser variieren. Beispielsweise kann das E-Mail-Feld für einen Benutzer auf einem Standard-Desktop-Computer wie ein gewöhnliches Textfeld aussehen, aber die virtuelle Tastatur auf einem mobilen Gerät ändert möglicherweise das @, wenn ein E-Mail-Feld gefunden wird.

Die meisten dieser Spezialgebiete unterstützen die Validierung, daher ist es zumindest nützlich, einen: ungültigen CSS-Stil festzulegen, damit der Benutzer feststellen kann, ob die Daten im Feld enthalten sind. Hier sind die Eingabetypen mit Beispielcodierung:

• Farbe : Ermöglicht dem Benutzer die Auswahl einer Farbe unter Verwendung standardmäßiger Webformate - erkannte Farbnamen (gelb) und Hexadezimalwerte, denen ein # -Symbol vorangestellt ist (# FF0033).

• date : Einige Browser (Firefox 3. 5) zeigen ein Textfeld an, andere (Opera 10) zeigen ein spezielles Kalender-Steuerelement an, andere Browser (Chrome) enthalten sowohl Text als auch Popup-Kalender.. Wenn das Datum per Text eingegeben wird, muss es in einem JJJJ-MM-TT-Format eingegeben werden:

  Sie können die für einen bestimmten Bereich zulässigen Daten einschränken, indem Sie die Attribute min und max auf das Element anwenden.

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

• datetime : Kombiniert Datum und Uhrzeit zu einem einzelnen Element. Es enthält auch einen Mechanismus zum Eingeben der Zeitzone.

  Einige Browser zeigen ein Kalendersteuerelement für das Datum und eine formatierte Eingabe für die Uhrzeit an. Andere können virtuelle Tastaturen für die Eingabe von Datum und Uhrzeit ändern.

  Das offizielle vollständige Datums- und Uhrzeitformat, das von den verschiedenen Datums- und Uhrzeitelementen zurückgegeben wird, ist ein Spezialcode: yyyy-mm-ddThh: mm + ff: gg:

  • yyyy : Vier Ziffern für die Jahr.

  • - : Ein tatsächliches Strichzeichen, das zwischen Jahr und Monat eingefügt werden muss.Ein weiterer Gedankenstrich wird zwischen dem Monat und dem Tag eingefügt.

  • mm : Zwei Ziffern für den Monat.

  • TT : Zwei Ziffern für den Tag.

  • T : Die Großzahl T gibt den Beginn des Zeitteils des Codes an.

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

  • : : Der Doppelpunkt zwischen der Stunde und den Minuten. Ein weiterer Doppelpunkt erscheint zwischen den Stunden und Minuten des Zeitzonenversatzes.

  • mm : Zwei Ziffern für die Minuten.

  • + / - / Z : Der Zeitzonen-Offset wird durch ein großes Z (wenn die Zeit Zulu oder GMT-Zeit ist) oder das + oder - Symbol angezeigt, wenn die Zeit in einer anderen Zeitzone.

  • ff : Wenn die Zeitzone nicht Zulu-Zeit ist, geben Sie die Anzahl der Stunden an, die von GMT versetzt werden sollen.

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

  Zum Beispiel: 5.30 Uhr am 11. Oktober 2011 in New York City sieht so aus:

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

  Das Datum und die Uhrzeit müssen dabei sein Format, das für Browser gültig ist, die ein dateTime-Feld validieren.

• datetime-local : Genau wie das datetime-Element ohne Zeitzonenanzeige:

• email : Dies sieht aus wie ein Klartextfeld, kann aber entsprechend geändert werden. wie es zugegriffen wird.

• Monat : Dies erzeugt ein vierstelliges Jahr, gefolgt von einem zweistelligen Monat:

• Zahl : Numerische Daten können aus einem Textfeld bestehen, gefolgt von einer Art von Selektor (zum Beispiel Aufwärts- und Abwärtspfeile) oder dieses Tag kann das virtuelle Tastenfeld eines tragbaren Geräts so ändern, dass es nur numerische Eingaben verarbeitet.

  Der Zahleneingabetyp unterstützt mehrere spezielle Attribute:

  • min : Der zulässige Mindestwert.

  • max : Der maximal zulässige Wert.

  • Schritt : Dieser Wert gibt an, wie stark die visuellen Schnittstellenwerkzeuge (normalerweise kleine Auf- und Abwärtspfeile) den Wert ändern, wenn sie aktiviert werden.

  • Wert : Der numerische Wert des Elements.

  Alle Attribute des number-Elements können Integer oder Fließkomma sein. Aktuelle Browser, die dieses Tag unterstützen (Opera und Chrome), scheinen jedoch nicht so gut mit Gleitkommawerten zu validieren wie mit ganzzahligen Werten. Für eine bessere Kontrolle der numerischen Eingabe betrachten Sie den Bereichseingabetyp.

• range : Die meisten User-Interface-Toolkits haben eine Art Schieberegler oder Scrollbalken-Mechanismus, der es den Benutzern erleichtert, einen numerischen Wert visuell einzugeben. Das -Konstrukt fügt diese Funktionalität schließlich zu HTML-Formularen hinzu.

  Die Bereichseingabe hat die gleichen Attribute wie Zahl, Min, Max, Wert und Schritt. Wenn der Browser das Range-Tag unterstützt, sieht der Benutzer einen Scroller. Wenn nicht, wird ein Klartext-Eingabe-Typ angezeigt.

  Der Bereichstyp zeigt nicht den genauen Wert an, und es kann schwieriger sein, genaue Ergebnisse zu erhalten als mit dem Zahleneingabetyp. Eine Lösung besteht darin, ein Ausgabe-Tag mit dem Bereich zu paaren und JavaScript zu verwenden, um die Ausgabe zu aktualisieren, wenn der Bereich geändert wird.Ein Beispielformular, das diese Idee enthält:

  128
  

  Wenn der Bereichswert geändert wird, ruft es eine JavaScript-Funktion namens updateOutput auf:

  function updateOutput () {// get elements var myRange = document. getElementById ("myRange"); var myOutput = Dokument. getElementById ("meinOutput"); // kopiere den Wert über myOutput. Wert = MeinRange. value;} // end function
  

  Wie der Zahleneingabetyp können dem Bereich auch Gleitkommawerte zugewiesen werden.

• search : Dient zum Abrufen von Text, der als Teil einer Suche verwendet werden soll (entweder intern oder über einen Suchdienst). In den meisten Browsern wird dieses Tag wie ein gewöhnliches Textfeld angezeigt. Es hat manchmal ein besonderes Verhalten. In Safari wird das Suchfeld mit einem kleinen x angezeigt, wodurch der Inhalt der Suche gelöscht wird. In Chrome werden die automatischen Vervollständigungsfunktionen der Hauptsuchleiste (die auch das URL-Eingabeelement in Chrome ist) automatisch auf das Suchfeld angewendet.

  Wie die anderen neuen Eingabetypen gibt es keine Strafe für die Verwendung des Suchelements in Browsern, die es nicht unterstützen. Der Fallback ist eine Klartexteingabe.

  Das Suchelement führt keine Suche durch. Um es funktionsfähig zu machen, müssen Sie etwas Code schreiben.

• tel : Dieses Feld erwartet drei Ziffern gefolgt von einem Bindestrich und vier Ziffern - eine lokale Telefonnummer. Möglicherweise müssen Sie mit dem Musterattribut spielen, wenn Sie eine Vorwahl oder Erweiterungen zulassen möchten.

• URL : Browser, die dieses Element unterstützen, suchen nach dem // Präfix für eine Webadresse. Mobile Browser können die virtuelle Tastatur auch an Zeichen anpassen, die häufig in URLs vorkommen: Doppelpunkt (:), Schrägstrich (/) und Tilde (~).

• Woche : Lässt den Benutzer eine Woche aus einer Kalendersteuerung auswählen. Es gibt einen Wert im folgenden Format zurück: yyyy-Wnn

  • yyyy : Stellt ein vierstelliges Jahr dar.

  • - : Das Bindestrichzeichen.

  • W : Das Großbuchstabe W .

  • nn : Die Woche als zweistellige Zahl.

  Einige Browser zeigen das Standardkalender-Steuerelement an. Wenn der Benutzer ein Datum (oder eine Woche) auswählt, werden nur das Jahr und die Woche zurückgegeben. Andere Browser validieren einfach das richtige Format.