Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

HTML5 für Webdesigner

Neue Attribute: placeholder, required und autofocus

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
In HTML5 gibt es neue Attribute für Input-Felder: Formularfelder vorbelegen, Pflichtfelder definieren und den Cursor automatisch in einem Feld platzieren. Das alles geht jetzt auch ohne JavaScript.

Transkript

In HTML5 gibt es einige Neuerungen für Formulare, die recht nützlich sind. Und in diesem Film möchte ich beginnen mit einigen neuen Attributen für Eingabefelder, für ganz normale einzeilige Eingabefelder. Dazu habe ich hier ein Kontaktformular vorbereitet, mit je einem Feld für Name, EMail, Telefon, Homepage; weiter eine Text-Area für Nachricht und einen Submit-Button - nichts Besonderes dran. Im Editor: Das HTML, ein Formelement mit einer ID zum Gestalten, Actions - nicht viel los hier. Dann noch ein paar Diffs mit jeweils einem Label und einem Input drin - wir nehmen hier kein Section, weil das inhaltlich nicht so viel damit zu tun hat, dafür ist Diff gedacht - und wo jeweils drin steht, was los ist. Name, Besucher-Name, EMail, Telefon, Homepage, Nachricht und "Abschicken". Gestaltet wird das Ganze mit ganz normalem CSS hier - auch keine Zauberei dabei. Breite, Inline-Block - deswegen stehen die nebeneinander, kein Float, sondern Inline-Block hier. Und "Width" ist mit Rem, mit dem RootEM definiert, weil man das so etwas besser kalkulieren kann. Im Browser fällt jetzt als erstes auf: Beim Feld "Name "steht nicht, wie ich das ausfüllen muss. Also, was ich gerne hätte: erst Nachname, erst Vorname? Also könnte man hier eine kleine Vorbelegung oder einen extra Absatz einbauen zur Erläuterung. Und dazu gibt es das Attribut "Placeholder". Im Feld "Name": Placeholder = und jetzt in den Anführungsstrichen das, was ich gerne hätte, nämlich: Vorname, Leerstelle, Nachname. Das wird so abgespeichert. Jetzt rüber in den Browser, neu laden. Und da sehen Sie: Hier ist schon eine Vorbelegung drin. Wenn ich jetzt den Cursor rein setze, bleibt sie, aber sobald ich den ersten Buchstaben drücke, verschwindet die Vorbelegung, und es steht die Eingabe des Benutzers da. "Abschicken" kann ich das Ganze jetzt problemlos, auch wenn ich gerne alle diese Felder als Pflichtfelder deklariert hätte. Ich schicke es einfach mal los und schon steht da wieder die Vorbelegung. Es wird  überhaupt nichts überprüft. Normalerweise macht man das natürlich auch serverseitig, aber clientseitig würde man dazu bis jetzt JavaScript benutzen. Die Betonung liegt dabei auf "bis jetzt", denn in HTML5 gibt es ein neues Attribut, das heißt "Required". Und dieses Feld bewirkt... Es heißt "erforderlich" auf Deutsch - man kann sich das schon fast denken, da wir gerade über "Pflicht"felder gesprochen haben. Wenn ich das jetzt abschicke, dann merkt der Browser: Aha, das Feld "Name" ist "required" und gibt einen entsprechenden Hinweis. Da steht nichts drin, also sagt er: "Bitte füllen Sie dieses Feld aus." Diese Nachricht ist in jedem Browser ein kleines bisschen anders. Aber die Benutzer kennen das so, wie sie es in dem Browser sehen, den sie meistens benutzen. Designer sollten sich gerade bei Formularen mit dem Gestalten so weit wie möglich zurückhalten. Ich gehe weiter und fülle dieses Pflichtfeld hier überall aus. "Telefon" wollen wir haben und "Homepage", "Nachricht"? Muss er nicht unbedingt schicken - und rüber in den Browser. D.h., wenn ich hier jetzt meinen Namen reinschreibe und das abschicke, dann müsste der Browser beim Feld "EMail" sich beschweren und sagen: "Bitte füllen Sie das aus." Der Firefox markiert hier auch gleich die anderen Pflichtfelder, damit man das schon sehen kann. Das machen nicht alle Browser; das hat sich noch nicht so weit standardisiert, aber es ist schon sehr viel bequemer geworden. Und das letzte Attribut, das ich Ihnen aus dem Triumvirat kurz vorstellen möchte, heißt "Autofokus", und das bewirkt, dass der Cursor direkt in dieses Formularfeld gesetzt wird. "Autofokus": direkt nach dem Laden der Seite kommt der Cursor jetzt in das erste Feld. Da ist er schon drin, und das kann dann sofort ausgefüllt werden. Man sollte sehr vorsichtig sein mit Autofokus, denn viele Anwender sind davon genervt. Ich nehme den auch mal wieder raus. Es gibt so Angewohnheiten: Wenn Sie mit der Leertaste im Browser gleich mal eine halbe Seite runtergehen, dann haben Sie hier eine Leerstelle gesetzt. Gerade auf mobilen Geräten ist das mit Autofokus so eine Sache, weil die das Formular gar nicht mehr im Überblick sehen, sondern sofort reinzoomen, und dann ist dieses Feld aktiv und die Tastatur ist da, und man wusste noch gar nicht, was überhaupt los war. Also. Autofokus mit Vorsicht genießen! Im Überblick noch einmal die neuen Attribute - Placeholder: Vorbelegung von Formularfeldern. Required: Pflichtfelder definieren. Autofokus: Cursor nach dem Laden in dieses Feld setzen - wie gesehen, mit Vorsicht genießen! So werden sie eingesetzt: Sie sehen, Placeholder kriegt immer den Vorbelegungswert, und die anderen beiden sind Boolean Attribute, Boolsche Attribute, die haben keine Werte, die werden gesetzt oder auch nicht.

HTML5 für Webdesigner

Lernen Sie, wie Sie in HTML5 Layoutbereiche strukturieren, die richtigen Elemente für Inhalte benutzen, Formulareingaben optimieren und Multimedia ohne Plug-in einbauen.

3 Std. 14 min (39 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!