Share
In diesem Lernprogramm erfahren Sie, wie Sie HTML5-Formulare für moderne Browser bereitstellen und ältere Browser durch Verwendung einer Mischung aus Webforms2, Modernizr, jQuery UI und verschiedenen jQuery-Plugins kompensieren.
HTML5-basierte Formulare bieten viel semantisches Markup und machen die Verwendung von JavaScript unnötig.
Eine der ersten Bemühungen in Bezug auf HTML5 war WHATWGs Web Forms 2.0, ursprünglich als XForms Basic bezeichnet. Die Spezifikation führte unter anderem neue Formularsteuerungen und -validierungen ein. Später wurde es in HTML5 integriert und anschließend vom Wiederholungsmodell befreit, was zu den heutigen HTML5-Formularen führte.
Die allgegenwärtige Ausgabe, Abwärtskompatibilität, ist jedoch immer noch ein Problem. Entwickler müssen sich mit dem gefürchteten Internet Explorer auseinandersetzen, der, wie Sie vielleicht schon vermutet haben, nicht viel Unterstützung für die neuesten Fortschritte in Formularen bietet - selbst in der neuesten verfügbaren Beta von IE9. Ältere Versionen von IE? Fagetaboutit.
Trotzdem möchten wir diese neuen Funktionen nutzen und nutzen, wir werden es tun! Heute werden wir uns einige dieser neuen Elemente ansehen. Wir prüfen, ob der Browser diese Funktionen unterstützt, und falls nicht, stellen Sie mithilfe von CSS und JavaScript Fallbacks bereit.
Wir bieten Fallbacks nur für Browser an, die keine HTML5-Formulare oder bestimmte Teile davon unterstützen. Anstatt sich auf das Browser-Sniffing zu verlassen, ist es die richtige Technik, die Feature-Erkennung zu verwenden. Wir werden die beliebte Modernizr-Bibliothek verwenden.
Modernizr ist eine kleine JavaScript-Bibliothek, die den aktuellen Browser mit einer Vielzahl von HTML5- und CSS3-Funktionen testet.
Wenn Sie mehr über Modernizr erfahren möchten, besuchen Sie das Premium-Tutorial "Ein Video-Crash-Kurs in Modernizr", das auf dem Tuts + Marketplace erhältlich ist.
Webforms2 ist eine JavaScript-Bibliothek von Weston Ruter, die eine browserübergreifende Implementierung der "vorherigen" Version von HTML5-Formularen, der Spezifikation "WHATWG Web Forms 2.0", bereitstellt.
Wir werden es zur Validierung und Erweiterung der Funktionalität für aktuelle Elemente verwenden.
Die Spezifikation beschreibt die Bereichseingabe als ein ungenaues Steuerelement zum Festlegen des Elementwerts auf eine Zeichenfolge, die eine Zahl darstellt.
Hier sehen Sie eine Vorschau auf Opera 10.63:
Um einen Fallback für andere Browser bereitzustellen, verwenden wir das Slider-Widget der jQuery-Benutzeroberfläche.
Zuerst, Wir erstellen unsere Initialisierungsfunktion, die den Schieberegler aus dem Eingabebereichselement erstellt.
Accentsconagua
var initSlider = function () $ ('input [type = range]'). each (function () var $ input = $ (this); var $ slider = $ (''); var step = $ input.attr ('step'); $ input.after ($ slider) .hide (); $ slider.slider (min: $ input.attr ('min'), max: $ input.attr ('max'), Schritt: $ input.attr ('step'), Änderung: Funktion (e, ui) $ (this) .val (ui.value);); ); ; Wir schaffen ein neues <div> Element für jede unserer Bereichseingaben, und rufen Sie den Schieberegler an diesem Knoten auf. Dies liegt daran, dass der Slider der jQuery-Benutzeroberfläche nicht funktioniert, wenn er direkt für das Eingabeelement aufgerufen wird.
Beachten Sie, dass wir Attribute von der Eingabe erhalten, wie z
Minimal MaximalundSchritt,, und verwenden sie dann als Parameter für den Schieberegler. Dies hilft unserem Fallback-Schieberegler, den echten HTML5-Schieberegler in seiner Funktionalität nachzuahmen.
Nächster, Wir verwenden Modernizr, um festzustellen, ob der aktuelle Browser diesen Eingabetyp unterstützt. Modernizr fügt dem Dokumentelement Klassen hinzu (html), mit dem Sie bestimmte Browserfunktionen in Ihrem Stylesheet ansprechen können. Es erstellt auch ein selbstbenanntes globales JavaScript-Objekt, das Eigenschaften für jedes Feature enthält: Wenn ein Browser es unterstützt, wird die Eigenschaft mit ausgewertet wahr und wenn nicht, wird es sein falsch.
Mit diesem Wissen werden wir die Unterstützung für Eingabetypen verwenden Modernizr.inputtypes [Typ].
if (! Modernizr.inputtypes.range) $ (document) .ready (initSlider); ;
Wenn die Bereichseingabe nicht unterstützt wird, fügen Sie das ein initSlider Funktion für jQuery document.ready, um unsere Funktion zu initialisieren, nachdem die Seite geladen wurde.
So sollte der Schieberegler in einem Browser ohne native Unterstützung für die Bereichseingabe aussehen.
Um Mark Pilgrim zu zitieren:
Nach einer Nummer zu fragen ist schwieriger als nach einer E-Mail-Adresse oder Webadresse zu fragen.
Aus diesem Grund verfügen wir über ein separates Formularsteuerelement, das sich speziell mit Zahlen befasst: dem numerischen Spinner, der auch als numerischer Stepper bezeichnet wird.
Zum Zeitpunkt dieses Schreibens wird es von Opera und Webkit-basierten Browsern unterstützt. Hier ist eine Momentaufnahme von Opera 10.6.
Da jQuery keinen numerischen Spinner bereitstellt, verwenden wir stattdessen ein jQuery-Plugin von Brant Burnett, das als jQuery-UI-Widget erstellt wurde.
Wir implementieren dieselbe Technik wie zuvor; bauen Sie die Funktion aus, um den Spinner zu erstellen, testen Sie mit Modernizr und fügen Sie die Funktion hinzu $ (Dokument) .ready.
var initSpinner = function () $ ('input [type = number]'). each (function () var $ input = $ (this); $ input.spinner (min: $ input.attr ('min') ), max: $ input.attr ('max'), Schritt: $ input.attr ('step'));); ; if (! Modernizr.inputtypes.number) $ (document) .ready (initSpinner); ; Weil Zahleneingaben auch unterstützen Minimal Maximal und Schritt, Wir erhalten die Attribute aus dem Feld und verwenden sie als Parameter für die Initialisierung des numerischen Spinner-Plugins.
Und unser Fallback-Widget sieht so aus:
Es gibt nicht weniger als sechs Eingabetypen, die als Datumsauswahl dienen.
Der einzige Browser, der sie ordnungsgemäß unterstützt, ist Opera, Version 9+.
Für den Moment bieten wir nur Rückschläge für die Datum Eingabe mit dem jQuery UI Datepicker. Sie können jederzeit ein beliebiges anderes Plugin verwenden, um die Funktionalität der HTML5-Datumsauswahl in Ihrer Implementierung vollständig nachzuahmen.
var initDatepicker = function () $ ('input [type = date]'). each (function () var $ input = $ (this); $ input.datepicker (minDate: $ input.attr ('min') ), maxDate: $ input.attr ('max'), dateFormat: 'yy-mm-dd');); ; if (! Modernizr.inputtypes.date) $ (document) .ready (initDatepicker); ; 
Im Moment unterstützt kein Browser die Farbe Eingang. Bis sie aufholen, müssen alle unsere Fallback-Technik anwenden.
Wir verwenden das jQuery-Plug-in ColorPicker von Stefan Petre, da die jQuery-Benutzeroberfläche noch kein Basispaket enthält.
var initColorpicker = function () $ ('input [type = color]'). each (function () var $ input = $ (this); $ input.ColorPicker (onSubmit: function (hsb, hex, rgb, el) $ (el) .val (hex); $ (el) .ColorPickerHide ();;); ; if (! Modernizr.inputtypes.color) $ (Dokument) .ready (initColorpicker); ; Und unser Ergebnis:
Das neue Suche Der Eingabetyp wird implizit für die Semantik verwendet, könnte jedoch in Zukunft viele interessante Funktionen bieten.
Derzeit unterstützen nur Webkit-basierte Browser diese Funktion. Die Spezifikation unterstützt auch a Ergebnisse Attribut, um eine Anzahl von Suchbegriffen in einer Dropdown-Liste anzuzeigen.
Auf Safari unter OS X sollte es so aussehen:
Die anderen Browser zeigen dieses als Standardtextfeld an, so dass Sie es mit der Standardmarkierung verwenden können.
Diese zwei Eingabetypen, url und Email, werden zu Validierungszwecken verwendet. Sie können besonders in mobilen Browsern nützlich sein, bei denen das Bildschirmlayout der Tastatur an das fokussierte Feld angepasst werden kann. Dies ist bereits in Safari auf iOS (iPhone, iPad, iPod) und einigen Android-Versionen implementiert.
Diese Eingabetypen können von Webforms2 in anderen Browsern implementiert werden.
Sie können diese Typen in Ihren neuen Projekten frei verwenden, da sie auf einfache Textfelder zurückgreifen. Auf Ihrem Telefon werden Sie feststellen, dass sich die Tastatur entsprechend ändert, wenn Sie diese Eingaben mit Ihren Eingaben versehen.
Die neue Spec stellt das sehr praktisch vor erforderlich Attribut. Anstatt fancy JavaScript für die erforderlichen Felder zu verwenden, können wir dieses Attribut jetzt problemlos verwenden.
Für Browser, die dieses Attribut nicht unterstützen, können wir erneut Webforms2 verwenden. Da wir es von Anfang an aufgenommen haben, gibt es nichts zu befürchten.
Hinweis: Stellen Sie sicher, dass Sie eine Name Attribut zu Ihren Formularelementen oder erforderlich Attribut wird nicht wirksam.
Das Muster Das Attribut wird für die Feldvalidierung verwendet und akzeptiert nur Werte, wenn sie einem bestimmten Format entsprechen, das mit regulären Ausdrücken definiert ist. Wenn der eingegebene Wert nicht mit dem Muster übereinstimmt, wird das Formular nicht gesendet.
Um beispielsweise eine Telefonnummer zu bestätigen, müssten wir Folgendes verwenden Muster, oder regulärer Ausdruck:
Das Muster Attribute können in Browsern implementiert werden, die dies nicht unterstützen, indem Sie Webforms2 verwenden.
Das Autofokus Attribut macht genau das, was es sagt: Fokussiert automatisch eines unserer Steuerelemente. Es wird derzeit von Webkit-basierten Browsern (Safari, Chrome usw.) und Opera unterstützt. Denken Sie daran: Nur ein Formularsteuerelement kann dieses Attribut empfangen.
Webforms2 kümmert sich um die Implementierung in nicht unterstützten Browsern.
Das Platzhalter Attribut ist etwas, was wir seit Jahren mit JavaScript machen. Es fügt eine Information über das Feld hinzu, beispielsweise eine kurze Beschreibung, die verschwindet, wenn das Feld fokussiert ist.
Dieses Attribut wird von den neuesten Browsern von Beta Firefox und Webkit unterstützt.
Um das Verhalten in älteren Browsern nachzuahmen, verwenden wir das Placehold-Plugin jQuery von Viget's Design Lab.
var initPlaceholder = function () $ ('input [Platzhalter]'). placehold (); ; if (! Modernizr.input.placeholder) $ (document) .ready (initPlaceholder); ; Das Minimal Maximal und Schritt Eingabeattribute geben Einschränkungen für bestimmte Formularsteuerelemente wie Datumsauswahl, Anzahl und Bereich an. Sie können sicher den Zweck von erraten Mindest und max von ihren Namen. Das Schritt Attribut gibt den mehrfachen Bereich für jeden Klick oder "Schritt" an. Wenn der Schrittwert 2 ist, könnten die akzeptierten Werte 0, 2, 4 usw. sein.
Diese Attribute werden derzeit nur von Opera- und Webkit-Browsern unterstützt und als Fallback für andere Browser von Webforms2 implementiert.
Wir haben heute gelernt, dass das Erstellen von Formularen und das Bereitstellen von Fallback für die meisten neuen Ergänzungen eine relativ einfache Aufgabe ist. Wenn Sie immer noch versuchen, Sie vor der Verwendung von HTML5 zu fürchten, achten Sie nicht auf sie. Nutzen Sie jetzt die großartigen Tools, die Ihnen zur Verfügung stehen!
Schauen Sie sich auch die großen html5Widgets von Zoltan "Du Lac" Hawryluk an, die ähnliche Lösungen mit nativen JavaScript-Widgets bieten.
