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.

Formulare mit HTML und CSS

Inhaltliche Prüfungen mit HTML5

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Bei bestimmten Feldern wie email oder url wird automatisch überprüft, ob der eingegebene Inhalt dem Schema entspricht. Eigene Muster können Sie über pattern definieren.

Transkript

HTML 5 bietet eine Reihe von nützlichen Attributen bei Formularen. Sie können direkt den Cursor in ein Feld setzen, einen Platzhalter definieren, steuern, ob die Auto-Vervollständigung aktiviert sein soll und mehr. Beginnen wir mit dem Cursor, der direkt in einem Feld sein soll. Wenn ich dieses Formular aufrufe, dann sieht man, da ist nicht direkt ein Cursor, sondern ich muss erst irgendwo reinklicken. Wenn Sie wollen, dass der Cursor bereits in dem entsprechenden Feld ist, dann können Sie da autofocus angeben. Ich rufe das Dokument erneut auf. Sie sehen, da blinkt der Cursor. Den kann ich natürlich auf ein beliebiges Feld setzen. Man muss sich natürlich überlegen, wo das sinnvoll ist. Das ist dann sinnvoll, wenn klar ist, dass der Benutzer an der Stelle weitermacht. Autofocus ist diese verkürzte Schreibweise. Sie können auch autofocus="autofocus" schreiben, so wie man das in XHTML machen musste. Außerdem sehr praktisch ist das Placeholder-Attribut. Damit können Sie einen Platzhalter-Text definieren. Zum Beispiel Ihre Mail-Adresse. Was Sie hinter Placeholder schreiben, ist dann der Text, der in dem Feld erscheint. Das ist dieser Text. Und wenn ich reinklicke, kann ich direkt da drüber schreiben. Der verschwindet sofort wieder. Das ist das praktische an einem Platzhalter-Text. Anders funktioniert zum Beispiel value. Das mache ich mal oben. Im Gegensatz dazu ist es bei value so, wenn ich das aktualisiere, dass das wirklich reingeschrieben ist und der Benutzer muss es rauslöschen. Da kann er direkt drüberschreiben. Value würde im Zweifelsfall, wenn der Benutzer nichts anderes reinschreibt, auch übertragen werden. Der Platzhalter-Text nicht. Ebenfalls ganz praktisch ist die Eigenschaft autocomplete. Darüber können Sie steuern, ob die automatische Vorschlagsliste aktiviert sein soll oder nicht. Ich mache einmal autocomplete="on" bei einem Feld und bei dem nächsten ein autocomplete="off". Dann können wir uns den Unterschied ansehen. Wenn ich da zu tippen beginne, Dann können wir uns den Unterschied ansehen. die mit demselben Buchstaben beginnen und die ich schon eingegeben habe. Das ist dieses autocomplete="on". Im zweiten Fall hingegen, wenn ich anfange zu tippen, passiert das nicht. Zudem können Sie steuern, ob, wenn das prinzipiell aktiviert ist, die Rechtschreibüberprüfung in einem Feld stattfinden soll oder nicht. Das zeige ich einmal anhand eines Textarea-Feldes, wo man mehr reinschreiben kann. Da habe ich spellcheck auf true gesetzt. Ich möchte das mal in Chrome zeigen, wo das aktiviert ist. Wenn ich beginne zu schreiben und da verschreibe ich mich ganz deutlich, dann sehen Sie, die Rechtschreibkorrektur ist aktiviert. Wenn ich das hingegen auf false schalte und erneut aufrufe, jetzt verschreibe ich mich weiter und es findet keine Rechtschreibkorrektur statt, weil spellcheck="false". Wir haben uns in diesem Film verschiedene nützliche Attribute aus HTML5 angesehen. Autofocus setzt den Fokus direkt in ein bestimmtes Feld. Mit placeholder können Sie Platzhalter-Texte definieren. Über autocomplete lässt sich steuern, ob die Autovervollständigung aktiviert sein soll oder nicht und schließlich gibt es spellcheck für die Rechtschreibkorrektur.

Formulare mit HTML und CSS

Lernen Sie Formulare mit HTML zu erstellen und wie die Formatierung von Formularen und die responsive Anordnung der Felder vonstatten geht.

1 Std. 16 min (19 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!