Dies ist meiner Meinung nach der derzeit beste Weg, Formulare progressiv zu verbessern. Das heißt, HTML5-Funktionen nutzen, wenn sie verfügbar sind, und auf JavaScript-Alternativen zurückgreifen, wenn sie es nicht sind.
Laden Sie Yepnope.js
<script src="scripts/yepnope.js"></script>Yepnope ist ein "Skript-Loader", der Skripte *bedingt* lädt. Sie geben ihm einen booleschen Wert (true oder false), wenn er true ist, lädt er eine Reihe von Skripten (oder CSS), wenn er false ist, eine andere Reihe. Woher bekommen wir diesen booleschen Wert? Indem wir ein Feature testen mit...
Laden Sie Modernizr
<script src="scripts/modernizr.js"></script>Modernizr gibt Ihnen die Möglichkeit, HTML5 und CSS3¹-Features zu testen. Zum Beispiel ist mit geladenem Modernizr Modernizr.inputtypes.date true, wenn Sie sich in einem Browser befinden, der Eingaben mit dem Typ "date" unterstützt (nur Opera, ab Version 9) und false, wenn Sie sich in einem Browser befinden, der den "date"-Typ nicht unterstützt.
Noch besser: Sie können einen benutzerdefinierten Build von Modernizr mit nur den benötigten Tests (Eingabetypen und Eingabeattribute) erhalten, wobei Yepnope ebenfalls integriert ist, im Modernizr 2 Beta Builder.
Kombinieren Sie die beiden
Mit beiden großartigen Werkzeugen einsatzbereit können wir ihre Kräfte vereinen.
yepnope({
test : Modernizr.inputtypes.date,
nope : [
// load scripts to simulate date type
]
});Wir brauchen in diesem Fall kein "yep", denn "yep" bedeutet, der Browser unterstützt es, also brauchen wir keine Hilfe.
Was brauchen wir als Fallback?
Da wir bisher das HTML5-Eingabetyp "date" als Beispiel verwendet haben, denken wir über einen Fallback dafür nach. jQuery UI hat einen *ziemlich guten Datepicker*. jQuery wird uns wahrscheinlich helfen, viele Fallback-Probleme zu lösen, daher ist das eine solide Wahl. Um den Datums-Fallback zu realisieren, benötigen wir vier Ressourcen:
- jQuery
- jQuery UI
- jQuery UI's CSS
- Unser eigenes Skript, das den Datepicker aufruft
Laden Sie sie hoch
Mit unserer Yepnope/Modernizr-Kombination sieht diese lange Liste so aus:
yepnope({
test : Modernizr.inputtypes && Modernizr.inputtypes.date,
nope : [
'scripts/jquery.js',
'scripts/jquery-ui.js',
'css/jquery-ui.css',
'scripts/datepicker.js'
]
});Unser benutzerdefiniertes Skript (geladen *zuletzt*, dank Yepnope) ist wahrscheinlich so einfach wie das Aufrufen der Datepicker-Funktion, sobald wie möglich.
// DOM ready function because we should probably
// be doing this in the <head>
$(function() {
$("input[type='date']").datepicker();
});Und jetzt bekommen wir
|
Opera 11Native Unterstützung, keine zusätzlichen Skripte geladen. |
|
Firefox 4Keine native Unterstützung, jQuery UI Datepicker verwendet. |
Mach weiter so
Der "date"-Typ-Support ist nicht das Einzige, was wir hier tun können. Nehmen wir an, wir wollen auch den "placeholder" verwenden. Rock'n'Roll, verwenden Sie einfach einen weiteren Yepnope-Test.
yepnope({
test : Modernizr.input.placeholder,
nope : [
'scripts/jquery.js',
'scripts/placeholder.js'
]
});Beachten Sie, dass wir wieder jQuery verwenden und somit die jQuery-Bibliothek angeben. Nehmen wir an, wir befinden uns in einem Browser, der *weder* "date" noch "placeholder" unterstützt, und wir planen, jQuery für *beide* Fallbacks zu verwenden. Um dies am besten zu tun, fassen wir die Tests, die jQuery benötigen, in einem eigenen Yepnope-Block zusammen, damit wir jQuery nicht mehr als einmal laden.
yepnope([
{
test: Modernizr.input.placeholder || (Modernizr.inputtypes && Modernizr.inputtypes.date),
nope: 'jquery.js'
},
{
test : Modernizr.inputtypes && Modernizr.inputtypes.date,
nope : [
'scripts/jquery-ui.js',
'css/jquery-ui.css',
'scripts/datepicker.js'
]},
{
test : Modernizr.input.placeholder,
nope : 'scripts/placeholder.js'
}
]);Cooler als Polyfills
Polyfills sind im selben Geiste. Sie testen auf Feature-Unterstützung und verwenden native Technologie, wenn möglich, ansonsten "faken" sie es irgendwie. Sie sind großartig. Dies unterscheidet sich von Polyfills, da wir das Testen nicht selbst durchführen müssen, das haben wir bereits mit Modernizr erledigt. Daher können die Skripte, die wir laden, einfach davon ausgehen, dass keine Unterstützung vorhanden ist und von dort aus weitermachen. Ich denke, dies könnte besser sein als Polyfilling, weil:
- Wir laden zunächst nur zwei Skripte. Wenn ein Browser super modern ist, ist das alles, was er jemals laden wird. Mit Polyfill-Skripten laden Sie eines für jedes Feature.
- Wir lagern die Feature-Erkennung an Modernizr aus, ein Projekt, das sich ganz der optimalen Durchführung widmet. Polyfill-Skripte werden in dieser Hinsicht möglicherweise nicht so gut gepflegt.
Oder...
Ich habe sie nicht viel ausprobiert, aber es gibt ein paar Projekte, die darauf abzielen, jedes einzelne HTML5-Formular-Feature als Polyfill bereitzustellen. Eines davon ist webforms2. Ich mag die Kontrolle, die Feature-Tests und Fallbacks selbst durchzuführen, aber es gibt sicherlich Reiz an einem "Set-it-and-forget-it"-Ansatz.
¹ Modernizr testet auf andere schicke Web-Dinge, die technisch nicht HTML5 oder CSS3 sind, aber typischerweise damit gruppiert werden, wie @font-face.
Eigentlich brauchen Sie Yepnope + Modernizr nicht, Sie können einfach Modernizr mit Yepnope verwenden, das darin enthalten ist, von hier: http://modernizr.github.com/Modernizr/2.0-beta/ schauen Sie sich den anderen Abschnitt an (Modernizr.load)
Verdammt, du warst mir zuvor, lol
Hallo, das war sehr hilfreich, danke. Da es 3 Jahre her ist und sich die Dinge schnell entwickeln, wollte ich fragen, ob Sie ein Update zu diesem Beitrag haben.
Kam auf die Seite, um etwas über Formular-Styling zu recherchieren, und das war Ihr letzter Beitrag – Chris, Sie sind ein Gedankenleser!
Hey, Sie können Ihren Modernizr-Download anpassen, um ihn mit Yepnope auszuliefern: http://modernizr.github.com/Modernizr/2.0-beta/ wissen Sie das :)
Wenn ich 10 Antworten auf diesen Kommentar erhalte, spende ich 150 US-Dollar an Japans Wohltätigkeitsprogramm. :)
1
2
Gott segne dich :)
3
4 – gut gemacht!
5 – machen Sie es!
Dies ist eine Antwort auf Ihren Kommentar, damit Sie Geld für Japans Wohltätigkeitsprogramm spenden können. Vielen Dank für Ihre Freundlichkeit.
Ich denke, Sie sollten es unabhängig von den Antworten auf Kommentare tun.
9
Und 10. Jetzt fühle ich mich, als hätte ich ein wenig geholfen : )
Ups :D Ich habe vergessen, eine Null an diese Zahl anzuhängen. Ich wollte 1500 US-Dollar sagen :D
@Chris: Nun, jetzt sind mehr als 10 Leute daran beteiligt, das gibt mir und ihnen ein besseres Gefühl :)
Möchtest du noch mehr hinzufügen?
Für Japan sage ich Hallo. Langjähriger Leser, nie Poster. Liebe CSS-Tricks und hoffe, es geht Ihnen gut, Adel.
Prost.
Ich habe heute einen Datepicker geschrieben (ich werde ihn veröffentlichen, wenn ich fertig bin ;) und stand ebenfalls vor diesem Dilemma. Opera hat einen ziemlich guten nativen Datepicker, wenn auch hässlich. Webkit zeigt jedoch nur eine lahme Spinner-ähnliche Steuerung, die definitiv nicht benutzerfreundlich ist. Es gibt jedoch keine Möglichkeit, sicher zu erkennen, ob der vom Browser implementierte Datepicker gut ist oder nur eine Möglichkeit für sie, zu sagen "wir implementieren auch die Datumskontrolle", ohne Autoren tatsächlich einen Mehrwert zu bieten.
In meinem Fall habe ich mich entschieden, die JavaScript-Version zu verwenden und auf die native Steuerung zurückzufallen, wenn JS nicht verfügbar ist. Ich bin nicht glücklich, dass ich das tun musste, aber dank @#*&^% Webkit ist das meiner Meinung nach der einzige Weg. :(
Bitte veröffentlichen Sie ihn! Datepicker hatten schon immer eine intensive Abneigung gegen mich und zu diesem Zeitpunkt ist das Gefühl gegenseitig.
Prost.
Das wirklich Ärgerliche ist, dass Webkit-Browser Unterstützung für die Eingabetypen "date/time" melden, aber ihre Implementierung völlig kaputt ist. Wie Lea feststellt, ist die Steuerung selbst ziemlich lahm, aber schlimmer ist, dass der Benutzer einen Wert im richtigen (maschinell lesbaren) Format eingeben muss, sonst weigert sich der Browser, das Formular einzureichen, und bietet überhaupt kein Feedback!
Ich will es nicht sagen, aber es ist irgendwie zurück zum Browser-Sniffing – alles außer Opera braucht den JS-Datepicker.
Modernizr meldet den aktuellen Webkit <input type=date> als nicht unterstützt. Und ich habe eine Bestätigung vom Webkit-Ingenieur erhalten, der dafür verantwortlich ist, dass er keine Eingabevalidierung hinzufügt (was dazu führt, dass Modernizr durchgeht), bis die Benutzeroberfläche vorhanden ist.
http://formalize.me/
?
... kümmert sich um das Aussehen von Formularen, nicht um die Funktion. (es ist aber super nett, was das Aussehen angeht)
Hm, die rechte Seitenleiste dieser Website auf dieser Seite ist bis zum Ende versaut.
- Thema :) Ich bin bei Gabri
Hallo,
Ziemlich gut, aber der ausgewählte Wert sollte im Feld gesperrt sein. So schützen wir den richtigen Wert.
Es wäre großartig, wenn jeder Artikel erwähnen würde, welche genauen Browser diesen oder jenen Anpassungstyp unterstützen.
Aber es ist trotzdem ein guter Artikel. Danke.
Das ist etwas Interessantes, aber ich habe 2 Fragen.
1) Angenommen, ich verwende ein CMS wie Typo3 und füge eine Erweiterung hinzu, die jQuery (unbestimmte Version, könnte älter, könnte neuer sein) enthält.
Wenn Yepnope zum ersten Mal versucht, die jQuery-Bibliothek zu laden, erkennt es dann, dass bereits eine geladen wurde, oder lädt es sie erneut?
2) Ist es mit dieser Methode möglich, das clevere HTML5-Boilerplate zu implementieren?
[[ Zeilen 54-56 aus index.html in http://html5boilerplate.com/ ]]
Wenn Sie sowieso jQuery laden, müssen Sie es nicht mit Yepnope für einen Fallback laden, entfernen Sie es einfach aus dem Array der zu ladenden Dateien im "nope". Ich glaube nicht, dass Yepnope Skripte erkennt, die es nicht selbst geladen hat.
Chris Coyier ist Andy McKee ist Chris Coyier
http://onemansblog.com/wp-content/uploads/2008/12/andy-mckee.jpg
haha. Ich habe mir dasselbe gedacht. Ich frage mich, welcher Name das Alias ist und welcher Name echt ist.
Hatte noch nie von Yepnope gehört. Beginne, Modernizr für CSS-Bits zu verwenden, aber diese Kombination ist wirklich schick.
Ich verstehe nicht wirklich, was diese Codes bedeuten, aber ich fange an, einiges zu verstehen. Danke für die Tipps.
Zum Initialisieren des Datepickers würde ich dies empfehlen:
Dies schützt vor Unregelmäßigkeiten / Verzögerungen, die während des Skriptladens auftreten könnten. Da Ihr Skriptladen verzögert ist, ist es durchaus möglich, dass das jQuery-Dokument-Bereitschaft feiert, bevor
datepicker.jsgeladen ist. Dies schützt davor, indem die Funktion "Dokument ist bereit" in einem Callback registriert wird, der mit dem Laden vondatepicker.jsverknüpft ist.Außerdem haben wir mehrere Anfragen bezüglich des Nicht-Ladens desselben Skripts zweimal erhalten. Dies ist in der Tat ein valider Anwendungsfall, den wir wahrscheinlich in zukünftigen Versionen aufgreifen werden.
Vielen Dank für den großartigen Artikel.
Wirklich clever, Chris. Danke.
Jeder Webentwickler sollte über Progressive Enhancement und Ari-Technologie Bescheid wissen. Es gibt immer noch Entwickler, die Old-School-Markup erstellen, und ich schlage vor, sie sollten dies lesen.
Jetzt, da Sie ein Fallback-Skript / Polyfill für Platzhalter erwähnt haben, ohne tatsächlich auf ein Beispiel zu verlinken, darf ich mein jQuery-Platzhalter-Plugin bewerben :)
Theoretisch, wenn die Leute das hier verwenden, könnten sie (und sollten vielleicht) den if/else isSupported-Teil oben entfernen, denn das ist der Sinn der Modernizr-Tests zuerst, dieses Skript muss keine eigenen Tests durchführen.
ABER, ich glaube nicht, dass Modernizr einzelne Tests für textarea und input durchführt, und ich weiß, dass Sie wissen, dass es dort einige Browser-Diskrepanzen gibt (Opera 11 und Safari 4 unterstützen es für Eingaben, aber nicht für Textareas).
So viele Fallstricke bei diesem Zeug.
In einigen Browsern funktioniert der Code in diesem Artikel nicht. Das liegt daran, dass Modernizr nur vorhandene Elemente meldet, alle anderen sind undefiniert. Daher erhalten Sie in Browsern, die keine HTML5-Eingabetypen unterstützen, einen Fehler.
Um dies zu beheben, fügen Sie eine Schutzbedingung hinzu.
Ich versuche herauszufinden, wie inputtypes definiert werden könnten, sehe aber keinen Grund. Wenn Sie weitere Details oder einen Testfall haben, würde ich ihn gerne erhalten.
zu viel Arbeit. Ich würde lieber einfach den kleinsten gemeinsamen Nenner verwenden, anstatt doppelte Arbeit zu leisten und die Wartung zu erhöhen.
Ich habe gerade den Datepicker-Fallback erstellt, stoße aber auf ein böses Problem!
Opera mit HTML5-Unterstützung formatiert das Datum als yyyy-mm-dd, während ich dieses Format als dd/mm/yyyy benötige.
Ist es möglich, das Format mit HTML5 anzupassen, oder sollte ich eine JS-Lösung darüber bauen?
YYYY-MM-DD ist das ISO 8601-Format. Sie müssen es selbst in DD/MM/YYYY konvertieren. Ich würde empfehlen, es auf dem Server durchzuführen, wenn möglich, aber clientseitig kurz vor dem Senden der Daten könnte funktionieren.
Gute Sache!!! HTML5 wird großartig werden!!
Das einfache Implementieren eines Datepickers über type=date funktioniert nicht, weil:
1. Das HTML5-Datepicker-Format ist immer yyyy-mm-dd.
2. Der Typ=date hat mehrere Features wie min/max, step, valueAsNumber, valueAsDate, die für die Konfiguration des Datepicker-Polyfills verwendet werden müssen + Sie müssen dynamische Änderungen an diesen Eigenschaften respektieren.
@Jeroen
Sie müssen dies "beheben". Der einfachste Weg ist, den Datepicker immer yyyy-mm-dd verwenden zu lassen.
Wenn Sie ein anderes (lokalisiertes) Format benötigen, müssen Sie dies mit JavaScript tun. Aber Sie können dies dem Date-Typ nicht hinzufügen, dieser Typ sendet immer yyyy-mm-dd. Wenn Sie dies nicht tun, reichen neuere Webkit-Browser (Chrome 10+) Ihr Formular nicht ein. Sie müssen input[type=date] ausblenden, ein neues input[type=text] erstellen, den Datepicker zu diesem neuen Eingabefeld hinzufügen und dann die beiden Eingabeelemente mit dem richtigen Format synchronisieren.
Tatsächlich habe ich bereits einen Polyfill geschrieben, der eine lokalisierte Ansicht anzeigt (Standard = Sprache des User-Agents, kann aber konfiguriert werden) und immer korrekt die vom HTML5 spezifizierten Daten an den Server sendet. Sie finden dies unter http://afarkas.github.com/webshim/demos/index.html.
Das gesagt, wenn Sie etwas Ähnliches wie das wollen, was HTML5 tut, ist das Tutorial hier in Ordnung, aber wenn Sie etwas brauchen, das den richtigen Code implementiert, sollten Sie so etwas wie webshims lib verwenden. Nach meinen Tests hat webshims lib derzeit den einzigen funktionierenden Forms-Polyfill, der die neuen Webforms-Sachen richtig implementiert (-> korrekt, gemäß der Spezifikation).
Grüße
Alex
(Offenlegung: Ich bin der Ersteller von webshims lib...)
Danke für den informativen Artikel. Ich verwende Modernizr, aber war Yepnope.js noch nicht begegnet.
Auf einer anderen Notiz stieß ich auf eine wortwörtliche Kopie dieses Artikels auf einer anderen Website und wollte Sie darauf aufmerksam machen, falls es sich um eine unbefugte Kopie handelt.
Die betreffende Website ist
www_phphosts_org/2011/03/progressively-enhancing-html5%C2%A0forms/ (ersetzen Sie Unterstriche durch Punkte – ich möchte nicht darauf verlinken).
Seitdem ich meine Webdesign-Reise begonnen habe, waren Formulare ein schwacher Punkt, aber mit Ihren coolen Lehren und HTML5 liebe ich es! Danke Chris! Sie sind der wahre McCoyier! :)
Ich habe kürzlich viel Arbeit mit HTML-Formularen für mein PHP geleistet. Es wird interessant sein zu sehen, wie ich diese neue Technik in meine Formulare integrieren kann.