Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML & CSS
Code

Überdenken der Formen in HTML5

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called HTML5 and You.
HTML5 Globals and You
HTML5 Microdata: Welcome to the Machine

German (Deutsch) translation by Tatsiana Bochkareva (you can also view the original English article)

Während es in der HTML5-Spezifikation viele Änderungen zum Besseren gibt, exestieren für die datengesteuerte Website keinen besseren Preis als die Transformation von Formularen. Diese einfachen Änderungen verändern die Art und Weise, wie Sie Eingaben eingeben, validieren, verarbeiten und sogar anzeigen. Sie können benutzerfreundlichere Webanwendungen mit weniger Code und weniger Verwirrung erstellen.


Einführung Was ist auf dem Lager?

"In der jüngeren Vergangenheit wurde der Großteil der Innovationen bei Formularen durch die Verwendung von JavaScript anstelle von altmodischem HTML erzielt. Die Verwendung von JavaScript zur Verbesserung von Formularen ist zwar nichts Falsches, bringt jedoch neben vielen Entwicklungsproblemen auch eine eigene Benutzerfreundlichkeit mit sich."

HTML 5 wird noch geändert, bevor es fertiggestellt wird. Wenn Sie sich die Spezifikation ansehen, werden Sie feststellen, dass es immer noch einen letzten Aufruf zur Kommentierung zusammen mit Anweisungen gibt, z. B. sollten Implementierer wissen, dass diese Spezifikation nicht stabil ist. Insbesondere für die Zwecke dieses Tutorials, das sich auf die Änderungen an Formularen konzentriert, ist die Browserimplementierung gelinde gesagt nur sporadisch. Trotzdem sind die Veränderungen am Horizont heute eine Prüfung wert. Während die Änderungen einen großen Umfang haben, scheint die Implementierung für Entwickler recht einfach zu sein. In diesem Tutorial werden wir einen umfassenden Überblick über diese bahnbrechenden Änderungen geben und darüber nachdenken, wie sie sich auf die Art der Benutzereingaben auswirken.

In der Vergangenheit waren Änderungen an Formen relativ gering. Wenn Sie zur HTML 3.2-Spezifikation zurückkehren, die 1997 fertiggestellt wurde, sehen Sie dieselben grundlegenden Formulareingaben, die Sie heute verwenden. Wählen Sie, Textbereich, Radio, Kontrollkästchen und Text waren dann verfügbar. Eine Generation von Webentwicklern ist damit aufgewachsen, nach denselben Standards zu schreiben. Während spätere Versionen der Spezifikation Änderungen an Formularen wie Feldsatz, Beschriftung, Legende und Formularaktionen wie Onsubmit oder Onchange mit sich brachten, ist die Art und Weise, wie wir mit Benutzereingaben umgehen, etwas statisch geblieben. In der jüngeren Vergangenheit wurde der Großteil der Innovationen bei Formularen durch die Verwendung von JavaScript anstelle von altmodischem HTML erzielt. Die Verwendung von JavaScript zur Verbesserung von Formularen ist zwar nichts Falsches, bringt jedoch neben vielen Entwicklungsproblemen auch eine eigene Benutzerfreundlichkeit mit sich. Zum Beispiel gibt es viele verschiedene Möglichkeiten, Formulare mit JavaScript zu validieren. Was passiert jedoch, wenn für einen Benutzer JavaScript nicht aktiviert ist? Wir müssen außerdem Logik auf unsere serverseitigen Skripte anwenden. Letztendlich haben wir eine nicht so konsistente Art, Benutzereingaben zu verarbeiten. HTML 5 behebt nicht alle Innovationsprobleme bei Formularen in den letzten 13 Jahren, bietet uns jedoch zahlreiche Tools
machen unsere Arbeit viel einfacher und ermöglichen es uns, viel konsistentere Formulare zu erstellen.

Es gibt drei grundlegende Änderungen, die wir untersuchen sollten. Zunächst werden die Änderungen an den Eingabeelementen wie Autovervollständigung oder Autofokus betrachtet. Das zweite sind Änderungen an den Eingangszuständen, und es gibt einige! Abschließend werden wir die neuen Formularelemente untersuchen. Es ist wichtig zu wiederholen, dass die Spezifikation im Fluss ist; Daher wäre ich nicht überrascht, wenn es in Zukunft subtile Änderungen an dem geben würde, was wir diskutieren. Das macht Spaß!


Änderungen an Eingabeelementen: Ein völlig neuer Spielplatz.

Eingabeattribute sind die Elemente, die Sie in Eingaben platzieren, um zu erklären, was die Eingabe tut. Zum Beispiel:

Im obigen Beispiel sind die Eingabeattribute Wert, Größe und maximale Länge. Diese gibt es schon seit geraumer Zeit. HTML 5 ändert nichts am Konzept der Eingabeelemente, sondern fügt einige weitere hinzu. Es scheint mindestens eine Subtraktion oder vielmehr eine Substitution zu geben, und das heißt, die Änderung von deaktiviert scheint nun schreibgeschützt zu sein. Die Spezifikation geht nicht ins Detail auf die Änderung ein, aber wenn ich ein Wettmann wäre, würde die Änderung es Event-Handlern wie onblur ermöglichen, zu feuern - was ein deaktiviertes Element verhindert.

Die neuen Attribute umfassen Autofokus, automatische Vervollständigung, Liste, Erforderlich, Mehrfach, Muster, Min und Max, Schritt und Platzhalter. Ich betrachte diese als zwei verschiedene Arten von Elementen. Der erste Geschmack verbessert das Benutzererlebnis, während der zweite das Entwicklungserlebnis verbessert. Damit meine ich, dass Autofokus, automatische Vervollständigung, Liste, Mehrfach- und Platzhalter die Benutzererfahrung bei der Auswahl von Elementen unterstützen oder möglicherweise eine Beschreibung dessen enthalten, wonach die Formulareingabe sucht, oder indem sie beim Ausfüllen des Formulars helfen. Erforderlich, Min und Max, Muster und Schritt tragen zur Entwicklungserfahrung bei, indem sie sagen, was in der Form selbst sein soll.

Autofokus

Was jedes dieser neuen Attribute bewirkt, ist relativ einfach zu verstehen. Zum Beispiel:

Oben fokussiert das Autofokus-Element die Texteingabe auf das Laden der Seite. Dies bedeutet, dass diese Texteingabe nach dem Laden der Seite zur Eingabe bereit ist. Sie können sofort mit der Eingabe beginnen, da dieses Element den Fokus des Dokuments hat. Etwas, das wir früher in JavaScript in einer Zeile oder so gemacht haben, kann jetzt mit einem einzigen Wort gemacht werden.

Im obigen Beispiel verhindern Sie durch Deaktivieren der automatischen Vervollständigung, dass der Browser das Formularfeld mit einem vorherigen Wert ausfüllt. Nichts stört mich mehr, als zu sehen, wie meine Kreditkartennummer in einem Formular angezeigt wird, sobald ich eine Ziffer eingebe. Die Standardeinstellung für die automatische Vervollständigung ist "Aktivieren". Sie müssen dieses Element also nur verwenden, wenn Sie verhindern möchten, dass das Formularfeld aus vorherigen Einträgen ausgefüllt wird. Es trägt zur Benutzererfahrung bei, indem verhindert wird, dass vertrauliche Informationen nur "auftauchen".

Liste

Das Listenattribut ist sehr cool. Im Wesentlichen geben Sie eine Datenliste an, die ein Dropdown-Menü aus Ihrer Texteingabe erstellt. Betrachten Sie es als eine natürliche automatische Vervollständigung. Gehen Sie noch ein bisschen weiter und anstatt eine JavaScript-Bibliothek für eine schnelle Suche basierend auf Schlüsseleinträgen hinzufügen zu müssen, können Sie einfach einen "onchange" -Ereignishandler mit einem AJAX-Beitrag hinzufügen, und Sie erhalten einen Drop Das wird spezifischer, wenn der Benutzer in die Box eingibt. Mit HTML 5 kann diese Funktionalität mit nur wenigen Zeilen erstellt werden.

Mehrere

Mit dem Attribut multiple können Sie mehrere Elemente aus Ihrer Datenliste auswählen. Beispielsweise haben Sie möglicherweise ein Formular, das Nachrichten von Ihrer Website sendet. Mithilfe des Mehrfachelements können Sie dem Benutzer erlauben, mehrere Empfänger zum Senden dieser Nachricht auszuwählen. Auch dies können wir jetzt mit etwas JavaScript erreichen, aber mit HTML 5 müssen wir dem Formular nur einen einzigen Befehl hinzufügen.

Platzhalter

Das Platzhalterattribut machen wir seit Jahren mit einem Hauch von JavaScript. Sobald die Eingabe fokussiert ist, verschwindet Type Here. Wenn der Text bei Unschärfe nicht geändert wurde, wird "Hier eingeben" erneut angezeigt. Wir nehmen wieder etwas JavaScript aus dem Bild, um die Benutzererfahrung zu verbessern.

Erforderlich

Diese nächsten neuen Attribute verbessern unsere Entwicklung. Mit Ausnahme von "Schritt" hilft jeder bei der Validierung der Benutzereingaben.

Das erforderliche Attribut ist genau so, wie es sich anhört. Ich, der Entwickler dieser Webseite, fordere Sie auf, dieses Formular auszufüllen, bevor Sie auf "Senden" klicken. Dies ist die grundlegende Formularvalidierung, die wir heute mit JavaScript verwenden. Was zuvor eine Bibliothek benötigt hat, um einen erforderlichen Eintrag hinzuzufügen, enthält jetzt ein einzelnes Wort im Formular.

RegEx

Von allen neuen Formularattributen ist dies das, worüber ich mich am meisten freue. Mr. Form, lassen Sie mich Ihnen meinen guten Freund Regex vorstellen. Das ist richtig, wir können Formulareinträge basierend auf regulären Ausdrücken validieren. Während dieser zunächst mystifizierend sein wird, werden die Möglichkeiten der Validierung jetzt grenzenlos, wenn Sie den regulären Ausdruck lernen.

Validierung

Ich habe die letzten drei in einem Beispiel zusammengefasst, da sie sich alle mit der Validierung von Zahlen befassen - oder mit dem Zahlenbereich, den wir einschließen können.

  • Min: ist der minimale Wert, den eine Eingabe annehmen wird.
  • max: ist der maximale Eingabewert, den die Eingabe annehmen wird.

Jeder von diesen befasst sich mit numerischen Werten. Verwechseln Sie sie nicht mit der maximalen Länge, die sich auf die Anzahl der Zeichen bezieht, die eine Eingabe benötigt. Das Schrittelement ist genau so, wie es sich anhört. Wenn Sie einen numerischen Wert auswählen, erhöhen Sie ihn um 0,5 oder um 0,5 - was bedeutet, dass dieser Eingabetyp die möglichen Werte 1, 1,5, 2, 2,5 usw. hat.

Nach meinem besten Wissen ist die Browserunterstützung bei diesen Attributen derzeit etwas uneinheitlich. Hier ist eine kurze Tabelle, die zeigt, was ich auf den Implementierungen finden konnte.


Änderungen an Eingabetypen: Eine ganze Menge Liebe.

Es gibt acht neue Eingabetypen, wobei nicht alle neuen Datums- und Zeittypen berücksichtigt werden, die ich für unsere Zwecke in einen zusammenfasse. Es ist wichtig zu beachten, dass die Browser, die die neuen Eingabetypen nicht implementiert haben, sich auf jedem von mir getesteten Text zu einem Texttyp verschlechtern. Die neuen Eingabetypen bieten die Möglichkeit, Benutzereingaben anhand des von Ihnen verwendeten Typs zu überprüfen. Es wird auch eine weitere Validierung geben, die ich in den nächsten beiden Abschnitten erörtern werde. Jeder der neuen Eingabetypen ermöglicht es uns, von einem Textfeld zu etwas Spezifischerem zu trennen. Um beispielsweise Ganzzahl- oder Gleitkommawerte vor HTML 5 zu verwenden, haben wir meistens einen Eingabetyp von Text verwendet. Nur aus der Anmerkung ist es für Anfänger kontraintuitiv. Indem wir spezifischer sind, haben wir dann eine bessere visuelle Kontrolle über unsere Benutzeroberfläche. Je spezifischer das Element in HTML ist, desto mehr Kontrolle haben Sie innerhalb des CSS und desto einfacher ist es, diese visuellen Elemente zu definieren. Darüber hinaus können Browser mit den neuen spezifischen Eingabetypen jetzt den Eingabebereich genau einstellen. Mit dem Aufkommen des Mobile Computing können wir schließlich Webanwendungsformularelemente erstellen, die so gestaltet werden können, dass sie wie natürliche Anwendungen aussehen, oder die von uns verwendete Tastatur formen.

Schauen wir uns zuerst die Handhabung von Zahlen an:

Zahlen, Ganzzahlen und Gleitkommazahlen

Jeder dieser Eingabetypen ermöglicht es uns, mit Zahlen zu spielen. Wenn wir die Formulare veröffentlichen, sollten wir sicher sein, dass wir diese Gleitkommawerte für unsere serverseitige Verarbeitung ohne die zusätzliche JavaScript-Validierung haben. Einfach ausgedrückt, erwarten wir für jeden dieser Typen, dass die Zahlen wieder innerhalb des von uns definierten Bereichs und mit dem gewünschten Schritt liegen. Der Unterschied zwischen den beiden Typen besteht darin, wie sie angezeigt werden. Während ich auf die Implementierung des Nummerntyps warte, würde ich entweder eine Rolle oder ein Textfeld oder möglicherweise einen Typ einer Auswahl mit Zahlen erwarten. Der Bereichstyp ist insofern etwas anders, als er wie ein gleitender Wert aussieht, ähnlich dem, was Sie von einem Lautstärkeregler erwarten würden.

Daten und Zeiten

Eine weitere große Erleichterung bei der Standardisierung Ihrer Backend-Entwicklung sind die neuen Eingabetypen für Datum und Uhrzeit. In der Opera-Implementierung, die ich gesehen habe, wird jeweils ein Dropdown-Menü für den Kalender angezeigt, in dem Ihr Benutzer ein Datum auswählen kann. Auch hier können wir auf unserer Webseite überprüfen, ob die Eingabe in dem von uns erwarteten Format vorliegt. Jeder macht genau das, was Sie denken würden; Sie wählen einen Monat, eine Woche, einen Tag oder eine Uhrzeit aus. Das etwas andere ist das Datum/Uhrzeit-Lokal, das Datum und Uhrzeit ohne Ihren Zeitzonenversatz anzeigt. Wenn Sie beispielsweise einen Flug auswählen, zeigt das Datum/Uhrzeit-Lokal die Uhrzeit und das Datum in der Stadt an, in die Sie fliegen. Dies ist nicht unbedingt die Zeitzone, in der Sie sich gerade befinden.

URLs, E-Mails, Telefon und Farbe

Jeder dieser Eingabetypen ist beschreibend. Sowohl der URL- als auch der E-Mail-Typ haben die Validierung gültiger URL-Muster und gültiger E-Mail-Muster. Das Telefon entspricht jedoch keinem bestimmten Muster. Es werden nur Zeilenumbrüche entfernt. Wenn Sie ein Validierungsmuster für das Telefonfeld erzwingen möchten, können Sie immer das Musterelement verwenden. Jedes dieser Elemente minus Farbe nimmt auch das Listenattribut minus Farbe an. Farbe ist der seltsame Ball des Haufen; Ich kann seine praktische Verwendung sehen, bei der Sie eine Farbe aus einem ausgefallenen Pulldown auswählen können, das Farben anzeigt, und die Texteingabe von etwas wie #000000 erzwingen können, aber meiner Meinung nach passt es nicht wirklich zu den restlichen Änderungen. Es ist wie zu spielen, welches nicht wie das andere ist.

Wie die Attribute ist auch die Implementierung des Eingabetyp-Browsers recht unvollständig. Mein iPhone scheint mehr davon zu unterstützen als Safari, was für mich ein bisschen lustig ist. Dies ist das Beste, was ich finden konnte, um zu unterstützen.


Änderungen an Formularelementen: Nicht ganz so drastisch

Die Anzahl der Änderungen an den Formularelementen ist nicht so drastisch wie bei Eingabeattributen und -typen. Es gibt jedoch einige neue Elemente zu beachten. Wir haben bereits die Datenliste behandelt - auf diese Weise definieren wir, was aus einem Listenelementaufruf ausgewählt wird -, aber wir haben weder Keygen, Ausgabe, Fortschritt noch Meter gesehen. Außerhalb von Keygen. Diese sind nicht ganz so selbsterklärend wie die neuen Attribute. Lassen Sie uns diese nur ein wenig untersuchen.

Keygen

Dieser ist ein bisschen verwirrend. Es wird kein öffentlicher Schlüssel für Sie generiert. Stattdessen handelt es sich um eine Schlüsselpaar-Generatorsteuerung. Sobald das Formular gesendet wurde, packt es das Schlüsselpaar, um den privaten Schlüssel im lokalen Schlüsselspeicher zu speichern, und sendet den öffentlichen Schlüssel zurück an den Server. Das Client-Zertifikat wird generiert und dem Benutzer zum Herunterladen angeboten. Nach dem Herunterladen und Speichern mit dem privaten Schlüssel können Sie Dienste wie SSL oder Zertifikatauthentifizierung authentifizieren.

Ausgabe

Stellen Sie sich das Ausgabeelement als Textbereich für Steroide vor. Sie können aus zwei Texteingaben vom Typ Zahl berechnen und diese Berechnung ausgeben, ohne das Formular jemals an den Server zurückzusenden. Wenn Sie im obigen Beispiel nur false onsubmit zurückgeben, wird number_1 plus number_2 berechnet und Sie erhalten die Antwort. Wie viele Dinge, die in diesem Tutorial besprochen werden, können wir dies heute mit JavaScript erreichen, aber dies verringert wirklich die Menge an Code, die wir in Zukunft schreiben müssen.

Fortschritt und Anzeige

Die letzten beiden neuen Elemente sind Fortschritt und Anzeige. Sie sind ähnlich, aber mit einem Unterschied. Fortschritt soll verwendet werden, um den Fortschritt einer bestimmten Aufgabe zu messen. Wenn Sie beispielsweise vor Abschluss einer Umfrage möglicherweise noch fünf weitere Seiten ausfüllen müssen, wird das Fortschrittselement in diesem Bereich angezeigt. Das Messgerät hingegen ist ein Maß für etwas. Möglicherweise möchten Sie den verbleibenden Speicherplatz anzeigen, den ein Benutzer noch hat. Sie würden das Messgerät verwenden, um diese Messung anzuzeigen. Es gibt neue Grenzelemente wie niedrig, hoch und optimal. Diese ersetzen die Min- oder Max-Elemente; Wenn sie diese überschreiten, werden sie zur neuen Unter- und Obergrenze der Form.

Wie bei den übrigen Änderungen des HTML 5-Formulars ist die Browser-Implementierung derzeit schlecht. Hier ist, was zu funktionieren scheint und was nicht (zum Zeitpunkt dieses Schreibens).


Abschluss

Soweit ich sehen kann, gibt es keinen Grund, HTML 5-Formulare nicht zu verwenden. Die Eingabeelemente und -typen werden alle gut beeinträchtigt, selbst in IE6, wo sie entweder als Elemente ignoriert oder zu Texteingaben herabgesetzt werden. Wir werden eine Weile warten müssen, bis die Validierungsattribute Realität werden, aber dennoch gibt es heute noch einige Anwendungen ohne diese Vorteile. Das iPhone ändert beispielsweise die Tastatur, wenn Sie die Typen URL, E-Mail oder Nummer verwenden. Der Bereichseingabetyp wird bereits in WebKit-Browsern unterstützt, sodass Sie möglicherweise das erste Kind im Block mit einem Zahlenregler sind, der ohne JavaScript funktioniert. Die Spezifikation wird schnell fertiggestellt, und die Browser holen den Paradigmenwechsel ziemlich schnell ein. Es gibt keine Zeit wie heute, um zumindest mit diesen neuen Spielzeugen zu spielen! Was denken Sie?

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.