Tatsächlich wurden die Formmerkmale von HTML5 in den Artikel 28 HTML5 -Funktionen, Tipps und Techniken eingeführt, die Sie letztes Jahr kennen müssen. Es ist jedoch etwas bedauerlich, dass die Einführung dieses Teils in Form eines Videos angezeigt wird. Tatsächlich ist es in Ordnung, wenn es ein Video ist. Der Schlüssel ist das Toutube -Video, das Jailbreak zum Anschauen sein muss. Nun, ein guter Bürger wie ich, der nur eine gewissenhafte Person ist, ist zu faul, um in anderen Situationen bis auf den Flugbegleiter täuschen zu lassen, sodass der in diesem Teil des Videos angezeigte Inhalt tatsächlich leer ist.
Hier ist also ein Patch, um diesen Teil des Inhalts zu verbessern. Der allgemeine Inhalt dieses Artikels lautet:
# <Eingabetyp = Nummer />
# <Eingabetyp = Bereich />
# <Eingabetyp = Datum /> und andere Zeitauswahlsteuerungen
# <Eingabe type = color /> Farbauswahl
# <Eingabe type = search />
# <Datalist> Element- und Listenattribut
# Die mehrdeutige Beziehung zwischen HTML5 -Formbestätigung und CSS3
Mit dem HTML -Formelement mit type = number können Sie den Wert im Textfeld durch Drücken einer Taste ändern. Dieser Effekt ist häufig in Windows -Systemen zu sehen, wie z. B.:
Faule Leute würden lieber auf einem Stuhl liegen und auf die Maus klicken, als sich aufzusetzen und die Tastatur zu drücken. Daher gibt es im Vergleich zu Tastatureingaben auch einen Markt zum Klicken und Eingaben. Aus diesem Grund gibt es in HTML5 -Formularen numerische Auswahlkontrollen.
Der grobe HTML -Code lautet wie folgt:
Anzahl der Personen: <Eingabetyp = Zahlenwert = 1 />
Wenn Sie eine geeignete Breitengrenze für Punkte hinzufügen, ist der Effekt in Chrom (die geschätzte Benutzeroberfläche mit Systemthemen zusammenhängt) wie folgt:
Der derzeit unterstützte Browser ist Opera 11, aber die Schaltflächen, die Werte unter Opera ein wenig krumant hinzufügen und subtrahieren, haben einen abstrakten Stil.
Sie können hier auf hart klicken: HTML5 Formular Nubmer Control Demo
2. Typ = BereichBereich Chinese Bedeutung Wertschöpfungsbereich, und diese Art von Effekt ist auch im Fenstersystem üblich, wie im folgenden Screenshot gezeigt:
In HTML5 gibt es eine Eingangskontrolle mit ähnlichen Effekten. Definieren Sie einfach seinen Typ als Reichweite, so einfach!
Ziehenbereich: <Eingabetyp = Bereichswert = 50 />
Standardmäßig beträgt der Wertebereich 0 ~ 100. Wenn Wert = 50 also in der Mitte des Gebietsbereichs liegt. Wie in der Abbildung unten gezeigt:
Mein Firefox ist derzeit Version 3.6 und diese Funktion wird noch nicht unterstützt. Chrome, Opera und Safari 4 haben jedoch alle Effekte, aber sie sind doch nicht derselbe Vater, daher gibt es einige Unterschiede im Erscheinungsbild, sodass diese Unterschiede hier nicht gezeigt werden.
Sie können hier auf hart klicken: HTML5 Formebereichesteuerung Demo
Der letzte Punkt der 28 HTML5 -Funktionen, -Tricks und -techniken, die zu Beginn erwähnt wurden, dh das hervorragende Effektbeispiel des 28. Elements ist der Effekt, der auf die Reichweite implementiert wird, die auch die min, maximalen Attribute und Stufenattribute umfasst. Es ist ein Beispiel, das es wert ist, beobachtet und zu lernen. In Bezug auf diese Beispiel -Demo können Sie hier hart klicken.
3. Typ = Datum und andere ZeitkontrollenDies ist die Zeitauswahlsteuerung. Wenn Sie eine lange Zeit wählen, kümmern Sie sich nicht um ein JS-Plug-In. Haben Sie einfach ein Date -Attribut, und dann können Sie mit der alten Dame kommunizieren, die während des Kaffees den Boden neben Ihnen fegte. Wenn Sie es nicht glauben, schauen Sie:
Datum auswählen: <Eingabetyp = Datumswert = 2011-01-04 />
Infolgedessen sind unter unterstützten Browsern wie Opera die folgenden Effekte verfügbar:
Dies ist ein Zeitauswahl, der nicht am Leben ist!
Abgesehen von seinem hässlichen Aussehen sind die anderen ziemlich entzückend.
Zeitklassenraum, nicht nur Datumstyp, sondern auch Zeittyp, sondern auch DateTime, Woche und Monat.
Wie der Name schon sagt, besteht der Datumstyp natürlich darin, Datum auszuwählen, mit dem Zeittyp die Zeit auszuwählen, die DateTime dient Datum und Uhrzeit, und die Woche besteht darin, Woche auszuwählen, und der Monat wird feststellen, dass der Monat ausgewählt wird.
Sie können hier auf hart klicken: HTML5 Form Time Class Space Demo
Ich habe es getestet und Safari gerade auf Version 5.0 aktualisiert. Ich fand, dass der Opera -Browser derzeit diese Art von Zeitsteuerung unterstützt. Die Effekte sind wie folgt:
Wenn type = Zeit ist, ist der Effekt etwas ähnlich wie Typ = Zahl. Sie können Ereignisse durch Klicken wechseln. Standardmäßig ist jeder Punkt einst, die Zeit ist 1 Minute lang und die Maus wird lange gedrückt und die Maus ist ebenfalls gültig.
Wählen Sie Zeit: <Eingabetyp = Zeitwert = 22: 52 />
Zeit auswählen:
Unter Typ = Woche wird die Hintergrundfarbe des Datums jeder Zeile (eine Woche), wenn die Maus vorbeikommt, zusammen dunkler, wie in der folgenden Abbildung gezeigt:
Wenn Typ = Monat ist, wird die Hintergrundfarbe des gesamten Monats dunkler, wie in der folgenden Abbildung gezeigt:
Die Datenwerte nach Auswahl der beiden sind wie folgt:
4. Typ = FarbeDies ist eine Farbauswahlsteuerung, die ziemlich leistungsfähig ist. Es ist sehr einfach zu verwenden, wie folgt:
Wählen Sie Farbe: <Eingabetyp = Farbe Wert =#34538b />
Der Standard -Effekt im Opera -Browser lautet wie folgt:
Die Standardeingangskontrolle verfügt über einen runden Farbhintergrund mit #34538b. Wir klicken, um fallen zu lassen, und das Ergebnis ist, löschen und erweitern das Web -Farbfeld:
Klicken Sie auf die Schaltfläche unten mit anderen ... Wörtern, und als Ergebnis wurde das wunderschöne Farbauswahlfeld erweitert:
Es ist cool, es ist sehr einfach zu bedienen, oh hehe.
Sie können hier auf hart klicken: HTML5 Formular Farbauswahlsteuerung.
5. Typ = SucheEs ist die Suchfunktion. Ich erinnere mich, als ich sah, dass das Eingabefeld vom Suchtyp automatisch ein Suchgrößen -Glas -Symbol hat. Ich habe diesen Test jedoch nicht gesehen (ist er in einem Traum) und der UI-Effekt dieses Attributs ist sehr zurückhaltend und kalt. Im Webkit -Core -Browser wird nach dem unten gezeigten Wert ein sexy Kreuz vorhanden, wie unten gezeigt:
Ich habe nichts Besonderes an etwas anderem gefunden, also habe ich diesen gerade erwähnt. Sie können hier auf hart klicken: HTML5 -Suchtypsteuerung Demo
6. <Datalist> Element- und ListenattributDatalist ist ein sehr seltenes Element, das den Pulldown-Effekt der Datenliste implementiert, und der UI-Stil ist ein bisschen ähnlich wie die automatische Vervollständigung.
Ein einfaches Beispiel geben:
Der folgende HTML -Code:
List: <input type=text list=mydata placeholder=popular movie rankings/> <datalist id=mydata> <option label=Top1 value=Let the bullets fly> <option label=Top2 value=If you are the one 2> <option label=Top3 value=Laughing Jianghu> <option label=Top4 value=Orphan of Zhao> <option label=Top5 value=The little thing about first love> </datalist>
Das Ergebnis ist wie folgt, nachdem der Eingabefeld den Fokus erhalten hat:
Dieses Ding, dieses Attribut ist eine gute Sache. Gehen Sie nicht herum und finden Sie nicht heraus, dass es nur Auswirkungen unter dem neuesten Opernbrowser hat. Es ist nicht bekannt, ob andere Browser es in Zukunft unterstützen werden.
Mit HTML5 sind auch einige neue Pseudoklassen im Selektorteil von CSS3 aufgetreten, wie z. B.:
Zum Beispiel die folgenden CSS- und HTML -Codes:
input [type = text]: fokus: gültig, input [type = mail]: fokus: gültig, input [type = number]: fokus: in-ine {scrine: 2px green solide; } input [type = text]: fokus: ungültig, input [type = mail]: fokus: ungültig, input [type = numme]: fokus: Out-of-of-te-of-Range {scrine: 2px rot solide; }<p> normales Eingangsfeld: <Eingabetyp = Text /> < /p> <p> Mail -Eingangsfeld: <Eingabetyp = E -Mail /> < /p> <p> Numerisches Eingabefeld: <Eingabetyp = Nummer min = 0 max = 10 /> (0 ~ 10) < /p> < /p>
Nehmen Sie das Mail -Eingabefeld als Beispiel. Wenn der Eingabetxt keine legale Mailbox ist, zeigt der Umriss des Eingabefelds eine rote Warnstufe an:
Wenn die Mailbox legal ist, wird der Grenzrot in einen sicheren grünen Rand gebürstet, wenn die Mailbox legal ist:
Die Überprüfungsarbeiten sowie das verwandte Stil Display usw. werden vom Browser und CSS abgeschlossen. Ich habe 10 Jahre später darüber nachgedacht, wow, das ist das Web, alles ist so schön.
Einige andere Merkmale von HTML5 -Formularen wie Erforderlich, Autofokus, Platzhalter, Muster usw. wurden in den 28 HTML5 -Funktionen, Tipps und Techniken gezeigt und erklärt, die Sie wissen müssen, sodass ich hier nicht in Details eingehe.
Wenn Sie an HTML5 interessiert sind, empfehle ich persönlich, den vorherigen Artikel über 28 Dinge zu lesen. Der Inhalt dieses Artikels kann als weitere Verbesserung und Ergänzung zu einem bestimmten Punkt (andere neue Funktionen von HTML5 -Formularen) sein. Ersteres ist eine große Sache, und dieser Artikel ist bestenfalls eine hochrangige Sojasauce.
Da es alles HTML5-Dinge ist, wenn der Browser, den Sie jetzt tun möchten, dh, auch wenn Sie Ihren Browser für eine Weile fliegen lassen, werden Sie diese auffälligen Effekte nicht sehen. Daher wird empfohlen, zur neuesten Version der modernen Browser umzusteigen.
Referenzartikel:Neue Formularfunktionen in html5: http://dev.opera.com/articles/view/new-formfeatures-in-html5/