Share
Zwar gibt es viele Änderungen zum Vorteil der HTML5-Spezifikation, aber für die datengesteuerte Website gibt es nichts Besseres als die Umwandlung von Formularen. Diese einfachen Änderungen verändern die Eingabe, Validierung, Verarbeitung und Anzeige von Eingaben. Sie können mehr verwendbare Webanwendungen mit weniger Code und weniger Verwirrung erstellen.
"In der jüngsten Vergangenheit hat die Mehrheit der Innovationen bei Formularen auf die Verwendung von JavaScript und nicht auf altmodisches HTML zurückgegriffen. Obwohl die Verwendung von JavaScript zur Verbesserung von Formularen nicht falsch ist, bringt dies neben der Entwicklung auch viele Entwicklungsprobleme mit sich. "
HTML 5 wird vor dem Abschluss noch geändert. Wenn Sie sich die Spezifikation ansehen, werden Sie feststellen, dass noch ein letzter Aufruf für Kommentare zusammen mit Anweisungen wie z, Die Implementierer sollten wissen, dass diese Spezifikation nicht stabil ist. Darüber hinaus ist die Browserimplementierung insbesondere für die Zwecke dieses Tutorials, die sich auf Änderungen an Formularen konzentriert, gelinde gesagt fleckig. Allerdings sind die Veränderungen am Horizont heute eine Untersuchung wert. Die Änderungen sind zwar erheblich, aber die Implementierung für Entwickler scheint recht einfach zu sein. In diesem Lernprogramm werden wir einen umfassenden Überblick über diese bahnbrechenden Änderungen erstellen und darüber nachdenken, wie sich diese auf die Natur der Benutzereingaben auswirken.
In der Vergangenheit waren Formänderungen relativ gering. Wenn Sie auf die HTML 3.2-Spezifikation zurückgreifen, die 1997 fertiggestellt wurde, sehen Sie dieselben grundlegenden Formulareingaben, die Sie heute verwenden. Auswahl, Textbereich, Radio, Kontrollkästchen und Text waren dann verfügbar. Eine Generation von Web-Entwicklern ist mit den gleichen Standards aufgewachsen. Während spätere Versionen der Spezifikation Änderungen an Formularen wie Feldsatz, Beschriftung, Legende und Formularaktionen (z. B. onsubmit oder onchange) vorgenommen haben, ist der Umgang mit Benutzereingaben etwas statisch geblieben. In der jüngsten Vergangenheit wurde der Großteil der Innovationen bei den Formularen auf die Verwendung von JavaScript und nicht auf altmodisches HTML zurückgeführt. Die Verwendung von JavaScript zur Verbesserung von Formularen ist zwar nicht verkehrt, bringt jedoch neben der Entwicklung auch viele Entwicklungsprobleme mit sich. Es gibt beispielsweise verschiedene Möglichkeiten, Formulare mithilfe von JavaScript zu überprüfen. Was passiert jedoch, wenn ein Benutzer JavaScript nicht aktiviert hat? Wir müssen außerdem Logik auf unsere serverseitigen Skripts anwenden. Am Ende haben wir eine weniger konsistente Art, Benutzereingaben zu handhaben. HTML 5 befasst sich in den letzten 13 Jahren nicht mit jedem Innovationsschmerz für Formulare, aber es gibt uns eine Menge Werkzeuge
Sie erleichtern uns die Arbeit und ermöglichen uns, konsistente 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. Die zweite ist die Änderung der Eingangszustände, und es gibt einige! Zum Schluss werden wir die neuen Formularelemente untersuchen. Es ist wichtig anzumerken, dass die Spezifikation im Fluss ist; Es würde mich also nicht wundern, wenn sich in Zukunft geringfügige Änderungen in dem, was wir diskutieren, ändert. Das macht das Spaß!
Eingabeattribute sind die Elemente, die Sie in Eingaben platzieren, um zu erläutern, was die Eingabe bewirkt. Zum Beispiel:
Im obigen Beispiel lauten die Eingabeattribute value, size und maxlength. Diese gibt es schon länger. HTML 5 ändert nicht das Konzept der Eingabeelemente, sondern fügt einige weitere hinzu. Es scheint mindestens eine Subtraktion oder vielmehr eine Substitution zu geben, und dies bedeutet, dass die Änderung der Deaktivierung jetzt als "readonly" erscheint. Die Spezifikation geht nicht im Detail auf die Änderung ein, aber wenn ich ein Wettmann wäre, würde die Änderung Eventhandlern wie onblur erlauben, zu schießen - was ein deaktiviertes Element verhindert.
Zu den neuen Attributen gehören Autofokus, Autovervollständigung, Liste, erforderlich, mehrere, Muster, Min und Max, Schritt und Platzhalter. Ich betrachte diese als zwei verschiedene Arten von Elementen. Die erste Variante verbessert die Benutzererfahrung, die zweite die Entwicklungserfahrung. Was ich damit meine, ist Autofokus, Autovervollständigung, Liste, Mehrfach- und Platzhalter. Dies hilft dem Benutzer beim Auswählen von Elementen oder indem er eine Beschreibung dazu gibt, wonach die Formulareingabe sucht, oder indem sie beim Ausfüllen des Formulars behilflich ist. Erforderlich, Min und Max, Muster und Schritt ergänzen die Entwicklungserfahrung, indem sie sagen, was in der Form selbst enthalten sein sollte.
Was jedes dieser neuen Attribute bewirkt, ist relativ leicht zu verstehen. Zum Beispiel:
Das Autofokuselement fokussiert die Texteingabe auf das Laden der Seite. Das heißt, sobald die Seite geladen ist, ist diese Texteingabe für eine Eingabe bereit. Sie können sofort mit der Eingabe beginnen, da dieses Element den Fokus des Dokuments hat. Etwas, das wir in JavaScript in einer Zeile verwendet haben, kann jetzt mit einem einzigen Wort gemacht werden.
Im obigen Beispiel verhindern Sie, indem Sie die automatische Vervollständigung deaktivieren, dass der Browser das Formularfeld aus einem vorherigen Wert ausfüllt. Nichts stört mich mehr, als zu sehen, wie meine Kreditkartennummer in einer Form erscheint, sobald ich eine Ziffer eingebe. Die Standardeinstellung für Autovervollständigung ist aktiviert. Wenn Sie dieses Element nur verwenden möchten, müssen Sie nur verhindern, dass das Formularfeld aus vorherigen Einträgen ausgefüllt wird. Es trägt zur Benutzererfahrung bei, indem es verhindert, dass sensible Informationen nur "auftauchen".
Das Listenattribut ist sehr cool. Im Wesentlichen stellen Sie eine Dataliste bereit, und es wird ein Dropdown aus Ihrer Texteingabe erstellt. Betrachten Sie es als eine natürliche Autovervollständigung. Nehmen Sie es etwas weiter, und anstatt eine JavaScript-Bibliothek für eine schnelle Suche basierend auf Schlüsseleinträgen hinzufügen zu müssen, können Sie ganz einfach einen "onchange" -Ereignishandler mit einem AJAX-Post hinzufügen, und Sie landen mit einem Drop unten wird das genauer, wenn der Benutzer in die Box eingibt. Mit HTML 5 kann diese Funktionalität mit wenigen Zeilen erstellt werden.
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. Wenn Sie das multiple Element verwenden, können Sie dem Benutzer ermöglichen, mehrere Empfänger zum Senden dieser Nachricht auszuwählen. Dies ist etwas, was wir jetzt mit etwas JavaScript erreichen können, aber mit HTML 5 müssen wir dem Formular nur einen einzigen Befehl hinzufügen.
Das Platzhalterattribut ist etwas, das wir seit Jahren mit einem Hauch von JavaScript tun. Dies bedeutet, sobald die Eingabe fokussiert ist, verschwindet der Typ hier. Wenn der Text bei Unschärfe nicht geändert wurde, wird Type Here wieder angezeigt. Wieder einmal nehmen wir etwas JavaScript aus dem Bild, um die Benutzererfahrung zu verbessern.
Diese nächsten neuen Attribute verbessern unsere Entwicklung. Mit Ausnahme von "step" hilft jeder bei der Validierung der Benutzereingabe.
Das erforderliche Attribut ist genau so, wie es sich anhört. Ich, der Entwickler dieser Webseite, muss vor dem Absenden dieses Formular ausfüllen. Dies ist die grundlegende Formularüberprüfung, die wir heute mit JavaScript verwenden. Was eine Bibliothek vor dem Hinzufügen eines erforderlichen Eintrags erforderte, benötigt nun ein einzelnes Wort im Formular.
Von allen neuen Formattributen bin ich am meisten begeistert. Mr. Form, ich möchte Sie meinem guten Freund Regex vorstellen. Das ist richtig, wir können Formulareinträge basierend auf regulären Ausdrücken überprüfen. Während dieser zunächst mysteriös wird, wenn Sie den regulären Ausdruck lernen, sind die Validierungsmöglichkeiten jetzt unbegrenzt.
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.
Jedes davon beschäftigt sich mit numerischen Werten. Verwechseln Sie sie nicht mit maxlength, was sich auf die Anzahl der Zeichen bezieht, die eine Eingabe annehmen wird. Das Schrittelement ist so, wie es sich anhört. Wenn Sie einen numerischen Wert auswählen, müssen Sie ihn um 0,5 oder 0,5 erhöhen. Dies 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 momentan etwas unklar. Hier ist ein kurzer Chart, der zeigt, was ich bei den Implementierungen finden konnte.
Es gibt acht neue Eingabetypen, wobei nicht alle neuen Datums- und Zeittypen berücksichtigt werden, was ich für unsere Zwecke in einem zusammenfassen kann. Es ist wichtig anzumerken, dass die Browser, die die neuen Eingabetypen nicht implementiert haben, sich auf jedem getesteten Text in einen Texttyp verwandeln. Die neuen Eingabetypen bieten die Möglichkeit, Benutzereingaben basierend auf dem von Ihnen verwendeten Typ zu überprüfen. Es wird auch mehr Bestätigung geben, die ich in den nächsten beiden Abschnitten besprechen werde. Jeder der neuen Eingabetypen ermöglicht es uns, uns von einem Textfeld etwas genauer zu trennen. Um beispielsweise ganzzahlige oder float-Werte vor HTML 5 zu übernehmen, haben wir meistens einen Eingabetyp für Text verwendet. Schon aus der Anmerkung heraus ist es für Anfänger intuitiv. Indem wir genauer sind, haben wir eine bessere visuelle Kontrolle über unsere Schnittstelle. Je genauer das Element in HTML ist, desto größer ist die Kontrolle über das CSS und desto einfacher ist es, diese visuellen Elemente zu definieren. Außerdem können Browser mit den neuen spezifischen Eingabetypen den gewünschten Eingabebereich genau einstellen. Mit dem Aufkommen des Mobile Computing können wir schließlich Formularelemente für Webanwendungen erstellen, die so gestaltet sind, dass sie wie natürliche Anwendungen aussehen oder die Tastatur, die wir verwenden, gestalten.
Schauen wir uns zuerst die Zahlenverarbeitung an:
Bei jedem dieser Eingabetypen können wir mit Zahlen spielen. Wenn wir die Formulare veröffentlichen, sollten wir sicher sein, dass wir diese Float-Werte für unsere serverseitige Verarbeitung ohne die zusätzliche JavaScript-Überprüfung haben. Vereinfacht gesagt: Wir erwarten für jeden dieser Typen, dass wir Zahlen innerhalb des von uns definierten Bereichs und mit dem von uns gewünschten Schritt zurückbekommen. Der Unterschied zwischen den beiden Typen besteht darin, wie sie angezeigt werden. Während ich auf die Implementierung der Nummernart warte, würde ich entweder eine Rolle oder ein Textfeld oder möglicherweise eine Art Auswahl mit Zahlen erwarten. Der Bereichstyp ist etwas anders, da er wie ein gleitender Wert aussieht, ähnlich dem, was Sie für einen Lautstärkeregler erwarten würden.
Eine weitere große Erleichterung für die Standardisierung Ihrer Backend-Entwicklung sind die neuen Eingabetypen für Datum und Uhrzeit. Bei der Opera-Implementierung, die ich gesehen habe, wird jeweils eine Kalenderliste angezeigt, in der der Benutzer ein Datum auswählen kann. Wieder können wir auf unserer Webseite bestätigen, dass die Eingabe in dem Format vorliegt, das wir erwarten. Jeder macht genau das, was Sie denken würden; Sie wählen einen Monat, eine Woche, einen Tag oder eine Uhrzeit aus. Etwas anders ist das datetime-local, das Datum und Uhrzeit ohne Zeitzonenversatz anzeigt. Wenn Sie beispielsweise einen Flug auswählen, zeigt das datetime-local Datum und Uhrzeit in der Stadt an, in der Sie sich gerade befinden. Dies ist nicht unbedingt die Zeitzone, in der Sie sich gerade befinden.
Jeder dieser Eingabetypen ist beschreibend. Sowohl die URL- als auch die E-Mail-Typen haben gültige URL-Muster und gültige E-Mail-Muster. Das Telefon entspricht jedoch keinem bestimmten Muster. Es entfernt nur Zeilenumbrüche. Wenn Sie ein Validierungsmuster im 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 das Komische des Bündels; Ich kann die praktische Anwendung sehen, bei der Sie eine Farbe aus einem ausgefallenen Pulldown auswählen können, das Farben zeigt, und die Texteingabe von etwas wie # 000000 erzwingen, aber meiner Meinung nach passt das nicht zu den übrigen Änderungen. Es ist wie das Spielen, bei dem man nicht wie die anderen ist.
Wie bei den Attributen ist auch die Browserimplementierung des Eingabetyps ziemlich fleckig. Mein iPhone scheint mehr davon zu unterstützen als Safari, was für mich ein bisschen komisch ist. Dies ist das Beste, was ich finden konnte, um es zu unterstützen.
Die Anzahl der Änderungen an den Formularelementen ist nicht so drastisch wie die Eingabeattribute und -typen. Allerdings gibt es einige neue Elemente, die Sie beachten sollten. Wir haben bereits datalist behandelt - so definieren wir, was aus einem Listenelementaufruf ausgewählt wird -, aber Keygen, Ausgabe, Fortschritt oder Zähler wurden nicht gesehen. Außerhalb von keygen. Diese sind nicht so selbsterklärend wie die neuen Attribute. Lasst uns nur ein bisschen in diese eintauchen.
Dieser ist etwas verwirrend. Es generiert keinen öffentlichen Schlüssel für Sie. Stattdessen ist es eine Schlüsselpaar-Generatorsteuerung. Nach dem Senden des Formulars verpackt es das Schlüsselpaar, um den privaten Schlüssel im lokalen Schlüsselspeicher zu speichern, und sendet den öffentlichen Schlüssel an den Server zurück. 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.
+ =
Stellen Sie sich das Ausgabeelement als einen Textbereich auf Steroiden vor. Was Sie tun können, ist die Berechnung aus zwei Texteingaben vom Typ Zahl und die Ausgabe dieser Berechnung, ohne das Formular jemals an den Server zurücksenden zu müssen. Wenn Sie nur false onsubmit zurückgeben, berechnet es im obigen Beispiel number_1 plus number_2 und liefert Ihnen die Antwort. Wie viele Dinge, die in diesem Tutorial behandelt werden, können wir dies heute mit JavaScript erreichen. Dies verringert jedoch wirklich die Menge an Code, die wir in der Zukunft schreiben müssen.
12 cm
Die letzten beiden neuen Elemente sind Fortschritt und Zähler. Sie sind ähnlich, aber mit einem Unterschied. Fortschritt soll dazu dienen, den Fortschritt einer bestimmten Aufgabe zu messen. Wenn Sie beispielsweise fünf weitere Seiten vor Abschluss einer Umfrage abschließen müssen, wird das Fortschrittselement in diesem Bereich angezeigt. Das Messgerät dagegen ist ein Maß für etwas. Möglicherweise möchten Sie den verbleibenden Speicherplatz anzeigen, den ein Benutzer übrig 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 sie übersteigen, werden sie die neuen unteren und oberen Grenzen der Form.
Wie bei den restlichen HTML 5-Formularänderungen ist die Browserimplementierung derzeit schlecht. Heres, was zu funktionieren scheint und was nicht (zum Zeitpunkt dieses Schreibens).
Soweit ich sehen kann, gibt es keinen Grund, keine HTML 5-Formulare zu verwenden. Die Eingabeelemente und -typen lassen sich auch im IE6 gut abbauen, wo sie entweder als Elemente ignoriert oder auf Texteingaben reduziert werden. Wir werden eine Weile warten müssen, bis die Validierungsattribute Realität werden, aber mit diesen Worten gibt es heute noch einige Anwendungen ohne diese Vorteile. Das iPhone ändert beispielsweise die Tastatur, wenn Sie die URL-, E-Mail- oder Nummern-Typen verwenden. Der Bereichseingabetyp wird bereits in WebKit-Browsern unterstützt. Sie könnten also das erste Kind mit einem Zahlenschieber sein, der ohne JavaScript funktioniert. Die Spezifikation wird schnell abgeschlossen, und Browser holen den Paradigmenwechsel ziemlich schnell auf. Es gibt keine Zeit wie die Gegenwart, um wenigstens mit diesen neuen Spielsachen zu spielen! Was denkst du?
Accentsconagua