Ein Blick in HTML5-Formulare Eingabetypen Datum, Farbe und Bereich

Formulare finden Sie überall auf Websites. Facebook, Twitter, Google - um nur einige zu nennen - erfordern, dass wir uns über ein Formular bei der Website anmelden oder uns registrieren. Tatsächlich verwenden wir auch ein Formular zum Aktualisieren und Aktualisieren des Status auf sozialen Websites. Zusamenfassend, Das Formular ist ein sehr wichtiger Teil, um mit einer Website interagieren zu können.

Ein Webformular wird aus Eingaben erstellt. In der Vergangenheit haben wir nur einige Optionen für die Eingabetypen. sowie Text, Passwort, Radio, Kontrollkästchen und einreichen. HTML5 bietet jetzt große Verbesserungen und führt viele neue Eingabetypen in die Spezifikation ein.

In diesem Beitrag werden wir einige der neuen interessanten Stücke aus der HTML5-Formulare dass wir denken, dass Sie sie anprobieren sollten; lass uns sie überprüfen.

Datumsauswahl

Das erste, was wir uns ansehen möchten, ist die Datumsauswahl. Die Auswahl des Datums ist eine übliche Sache, die Sie im Anmeldeformular finden können, insbesondere auf einigen Websites oder in Anwendungen wie Flug- und Hotelbuchungen.

Es gibt viele JavaScript-Bibliotheken, um die Datumsauswahl zu erstellen. Jetzt können wir mit HTML5-Eingaben auch sehr viel einfacher eine erstellen Datum, wie folgt;

Das Datumsauswahl in HTML5 funktioniert grundsätzlich ähnlich wie die JavaScript-Bibliotheken; Wenn wir uns auf das Feld konzentrieren, wird ein Kalender angezeigt, und wir können dann durch die Monate und Jahre navigieren, um das Datum auszuwählen.

Allerdings sind alle Browser, die derzeit das unterstützen Datum Der Eingabetyp, nämlich Chrome, Opera und Safari, zeigt diesen Eingabetyp etwas anders an, was möglicherweise zu Inkonsistenzproblemen bei der Benutzererfahrung führen kann.

Einige bemerkenswerte Unterschiede, die Sie auf einen Blick im obigen Screenshot sehen können; Die Opera verwendete die englische Dreibuchstabe aus drei Buchstaben für den Namen der Tage - Sun, Mo, Do und so weiter, während Chrome meine Landessprache verwendete, die Safari dagegen eher seltsam arbeitet und keinen Kalender anzeigt überhaupt.

Es gibt auch einige neue Eingang Typen zu wählen Sie Datum oder Uhrzeit genauer aus; Monat, Woche, Zeit, Terminzeit und datetime-local, Wir sind uns sicher, dass das Keyword selbst sehr anschaulich ist, um zu sagen, was es tut.

Sie können alle über den unten stehenden Link in Aktion anzeigen. Stellen Sie jedoch sicher, dass Sie sie in Opera 11 und höher anzeigen, da dies der einzige Browser ist, der alle diese Eingabetypen unterstützt.

Datepicker Demo

Farbwähler

Farbwähler wird in bestimmten webbasierten Anwendungen wie diesem CSS3-Gradientengenerator häufig benötigt, aber auch die Webentwickler verlassen sich immer noch auf eine JavaScript-Bibliothek wie jsColor. Jetzt können wir mit HTML5 einen Farbwähler für native Browser erstellen Farbe Eingabetyp;

Wieder einmal machen die Browser, in diesem Fall Chrome und Opera, diesen Eingabetyp etwas anders.

Opera zeigt zunächst die Grundfarbenoption beim Klicken sowie das Hex-Format der aktuell ausgewählten Farbe in einer Dropdown-Liste an, während Chrome die Farbpalette direkt in einem neuen Fenster öffnet, wenn Sie darauf klicken.

Darüber hinaus können wir die Standardfarbe auch mit festlegen Wert Attribut wie folgt;

Auf diese Weise wird, wenn es in den nicht unterstützten Browsern angezeigt wird, die Eingang wird in einem Textfeld abgebaut und der Standardwert wird angezeigt, der den Benutzern eine Art Hinweis geben kann, was in das Feld eingegeben werden soll.

Zeigen Sie den Farbwert an

Anstatt Photoshop zu öffnen, nur um das zu kopieren verhexen Beim Farbformat können Sie mit diesem Eingabetyp tatsächlich ein einfaches Werkzeug erstellen, um die Aufgabe auszuführen, da die erzeugte Farbe bereits im Hexadezimalbereich vorliegt. Dies wäre sehr einfach.

Zuerst fügen wir eine ID hinzu Farbwähler zur Eingabe und fügen wir auch eine leere hinzu div mit id hexcolor daneben den Wert enthalten.

Wir brauchen die jQuery im Kopf unseres Dokuments. Dann speichern wir den Farbwert und den neu hinzugefügten Wert div in einer Variablen, wie so;

 var color = $ ('# colorpicker'). val (); hexcolor = $ ('# hexcolor');

Holen Sie sich den Anfangswert von #Farbwähler;

 hexcolor.html (Farbe);

… Und zuletzt den Wert ändern, wenn auch die gewählte Farbe geändert wird;

 $ ('# colorpicker'). on ('change', function () hexcolor.html (this.value););

Das ist es; Lassen Sie uns es jetzt in Aktion betrachten.

Colorpicker Demo

Angebot

Das Angebot Mit dem Eingabetyp können Sie im Browser einen Schieberegler hinzufügen, um die Nummer in einem Bereich auszuwählen, den Sie auch in der jQuery-Benutzeroberfläche finden können.

Das obige Snippet ist grundlegend für die Implementierung von Angebot Eingabetyp. Wir können die Ausrichtung des Schiebereglers auch mithilfe von CSS in vertikal ändern:

 Eingabe [Typ = Bereich] Breite: 20px; Höhe: 200px; -webkit-Aussehen: Schieberegler-vertikal;

Zusätzlich können wir das einstellen Mindest und max Bereich der Zahlen zum Beispiel;

In dem folgenden Ausschnitt stellen wir das Mindest zu null und 225 für das Maximum. Wenn sie nicht explizit angegeben sind, wird der Browser standardmäßig verwendet 0 für das Minimum zu 100 für das Maximum.

Zeigen Sie die Nummer an

Es gibt jedoch eine Einschränkung, die Anzahl ist unsichtbar. Wir können die generierte Anzahl / den Wert des Schiebereglers im Browser nicht sehen. Um die Zahl anzeigen zu können, müssen wir etwas JavaScript oder jQuery hinzufügen.

Zuerst fügen wir ein leeres hinzu div neben der Eingabe, stylen Sie die div ausreichend, so dass es wie eine Box aussieht.

Fügen Sie dann den folgenden Code ein, der dasselbe wie der obige Code in Strongcolor Picker ausführt, außer Wir erhalten jetzt den Wert vom Schieberegler.

 $ (function () var val = $ ('# slider'). val (); output = $ ('# output'); output.html (val); $ ('# slider'). change (function ( ) output.html (this.value);););

Nun können Sie die Demo sehen. Nur eine Erinnerung, sehen Sie sich die Demo in diesen Browsern an - Chrome, Opera und Safari, da Firefox und IE das nicht unterstützen Angebot Eingabetyp im Moment.

Bereich Demo

Letzte Worte

Es ist klar, dass HTML5 unser Leben durch die Einführung vieler neuer Eingabetypen erheblich vereinfacht. Aber wie bei allen anderen HTML5-Funktionen ist die Unterstützung besonders in älteren Browsern sehr eingeschränkt. Daher sollten wir diese neuen Funktionen mit Vorsicht verwenden, insbesondere die neuen Eingabetypen, die wir in diesem Beitrag behandelt haben. Datum, Farbe und Bereich.

Aber letztendlich hoffen wir, dass Sie jetzt mehr Einblick haben HTML5-Formulare. Vielen Dank, dass Sie diesen Beitrag gelesen haben, und wir hoffen, es hat Ihnen gefallen.

Demo
Quelle herunterladen

Lesen Sie weiter

Nachfolgend finden Sie einige nützliche Links, über die Sie sich weiter in HTML-Formulare bewegen können.

Neue Formularfunktionen in HTML5 - Opera Dev.
Der aktuelle Status von HTML5-Formularen - Wufoo
HTML5-Formularattribute - w3school.org
Wann kann ich HTML5-Formulare verwenden? - CanIUse.com