HTML5-Tutorial-Anmeldeseite mit HTML5-Formularen
HTML5 bietet viele Funktionen und Verbesserungen Webformulare, Es gibt neue Attribute und Eingabetypen, die eingeführt wurden hauptsächlich, um das Leben der Webentwickler zu erleichtern und den Webbenutzern eine bessere Erfahrung zu bieten.
In diesem Beitrag erstellen wir also eine Login-Seite mit HTML5-Formulare um zu sehen, wie die neuen Funktionen funktionieren.
- Demo
- Quelle herunterladen
HTML5-Eingabe
Schauen wir uns das folgende Markup an.
Wenn Sie zuvor mit HTML-Formularen gearbeitet haben, wird Ihnen das bekannt vorkommen. Aber Sie werden dort auch Unterschiede feststellen. Die Eingänge haben Platzhalter und erforderlich Attribute, die neue Attribute in HTML5 sind.
Platzhalter
Das Platzhalter Attribut erlaubt es uns, den Anfangstext in der Eingabe anzugeben, der verschwindet, wenn er sich in einem befindet Fokus Status oder gefüllt werden. Früher haben wir es mit JavaScript gemacht, aber jetzt wird es mit diesem neuen Attribut viel einfacher.
Erforderliches Attribut
Das erforderlich Das Attribut legt fest, dass das Feld obligatorisch ist, und sollte daher vor dem Senden des Formulars nicht leer bleiben. Wenn der Benutzer das Feld nicht ausgefüllt hat, wird der folgende Fehler angezeigt.
Ein neuer Selektor wird auch in CSS3 eingeführt, :erforderlich Felder mit erforderlich Attribut. Hier ist ein Beispiel;
Eingabe: erforderlich Rand: 1px durchgehend rot;
E-Mail-Eingabetyp
Der erste Eingabetyp ist Email was eigentlich ist ein neuer Feldtyp auch in HTML5 hinzugefügt. Das Email Typ gibt eine grundlegende E-Mail-Adresse in das Feld ein. Wenn der Benutzer das Feld nicht mit einer E-Mail-Adresse ausfüllt, zeigt der Browser die folgende Benachrichtigung an.
Die Verwendung von E-Mail-Eingabetypen kann auch mobilen Benutzern, wie iPhone- und Android-Benutzern, bei der Anzeige von E-Mails bessere Ergebnisse bieten E-Mail-optimierte Bildschirmtastatur mit einem engagierten “@” Taste, um die E-Mail-Adresse schneller einzugeben.
Die Schattenseiten
Die neuen Formularfunktionen in HTML5 sind leistungsstark und einfach zu implementieren, in einigen Bereichen fehlen sie jedoch noch. Zum Beispiel;
Das Platzhalter Attribut, wird nur in modernen Browsern unterstützt - Firefox 3.7+, Safari 4+, Chrome 4+ und Opera 11+. Wenn Sie es also benötigen, um in nicht unterstützten Browsern zu arbeiten, können Sie diese Polyfills in Verbindung mit Modernizr verwenden.
Das gleiche gilt für die erforderlich Attribut. Die Fehlermeldung kann nicht personalisiert werden, der Fehler bleibt bestehen “Bitte füllen Sie dieses Feld aus” eher, als “Bitte geben Sie Ihren Vornamen ein”, Diese Attributunterstützung ist auch auf die neuesten Browser beschränkt.
Daher ist die Verwendung von JavaScript zur Überprüfung des erforderlichen Felds (bisher) eine bessere Option.
Funktion validateForm () var x = document.forms ["login"] ["Benutzername"]. value; if (x == null || x == "") alert ("Bitte geben Sie den Benutzernamen ein"); falsch zurückgeben; Formulare gestalten
Okay, jetzt schmücken wir unser Anmeldeformular mit CSS. Zuerst geben wir dem Hintergrund ein Holzmuster html Etikett.
html Hintergrund: URL ('wood_pattern.png'); Schriftgröße: 10pt; Dann müssen wir die Standardfüllung und den Rand entfernen ul tag, der das gesamte einschließt Eingänge und schwimmt die li nach links, so werden die Eingaben horizontal nebeneinander angezeigt.
.loginform ul padding: 0; Marge: 0; .loginform li display: inline; Schwimmer: links;
Da schweben wir die li, Die Eltern werden kollabieren, also müssen wir mit dem Clearfix-Hack Dinge rund um die Eltern klären.
Beschriftung Anzeige: Block; Farbe: # 999; .cf: before, .cf: after content: ""; Anzeige: Tisch; .cf: after clear: both; .cf * zoom: 1; : Fokus Gliederung: 0;
In CSS3 haben wir die Negationsauswahl. Wir werden es also als Ziel verwenden Eingänge anders als die einreichen Typ, der in diesem Fall richtet die E-Mail- und Passworteingabe an;
.Eingabe des Anmeldeformulars: nicht ([Typ = Senden]] Padding: 5px; Rand rechts: 10px; Rand: 1px festes rgba (0, 0, 0, 0,3); Grenzradius: 3px; Box-Schatten: 0px 1px 3px 0px rgba (0, 0, 0, 0,1), 0px 1px 0px 0px rgba (250, 250, 250, 0,5);
Zum Schluss geben wir noch eine kleine Stildekoration einreichen Taste wie folgt.
.Loginform-Eingabe [Typ = Senden] Rand: 1px festes rgba (0, 0, 0, 0,3); Hintergrund: # 64c8ef; / * Alte Browser * / Hintergrund: -moz-linearer Gradient (oben, # 64c8ef 0%, # 00a2e2 100%); / * FF3.6 + * / background: -webkit-gradient (linear, links oben, links unten, Farbstopp (0%, # 64c8ef), Farbstopp (100%, # 00a2e2)); / * Chrome, Safari4 + * / Hintergrund: -webkit-linearer Gradient (oben, # 64c8ef 0%, # 00a2e2 100%); / * Chrome10 +, Safari5.1 + * / Hintergrund: -o-linearer Gradient (oben, # 64c8ef 0%, # 00a2e2 100%); / * Opera 11.10+ * / Hintergrund: -ms-linearer Gradient (oben, # 64c8ef 0%, # 00a2e2 100%); / * IE10 + * / background: linearer Gradient (nach unten, # 64c8ef 0%, # 00a2e2 100%); / * W3C * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 64c8ef", endColorstr = "# 00a2e2", GradientType = 0); / * IE6-9 * / color: #fff; Polsterung: 5px 15px; Rand rechts: 0; Rand oben: 15px; Grenzradius: 3px; Textschatten: 1px 1px 0px rgba (0, 0, 0, 0,3);
Jetzt können Sie das Anmeldeformular über die folgenden Links ausprobieren.
- Demo
- Quelle herunterladen
Letzte Worte
In diesem Tutorial haben wir uns einige neue Funktionen in HTML5-Formularen angesehen:Platzhalter, erforderlich und Email Eingabetypen zum Erstellen einer einfachen Anmeldeseite. Wir sind auch durch die Nachteile der Attribute gekommen, so dass wir uns für einen besseren Ansatz entscheiden können.
Im nächsten Beitrag werden wir uns mit weiteren neuen HTML5-Formularfunktionen beschäftigen. Bleiben Sie also dran.
