HTML/Tutorials/Formulare

Informationen zu diesem Text

Lesedauer

6x30min

Schwierigkeitsgrad

einfach

Vorausgesetztes Wissen

Kenntnisse in
● HTML-Formulare
● CSS

Webformulare ermöglichen es Benutzern zwischen Optionen zu wählen oder Daten wie Adressen, Termine und Texte einzugeben und diese zur Weiterverarbeitung abzusenden.

In diesem Kurs erfahren Sie, wie Sie Formulare in HTML auszeichnen und mit CSS benutzerfreundlicher und zugänglicher gestalten können.

1. Was ist ein Webformular?
   • Datenübertragung
   • Funktionsweise von Buttons
2. Semantischer Code
3. Beschriftungen
   • Hinweise mit label
   • Beispielwerte mit placeholder
4. browsereigene Validierung mit HTML5
   • Eingabemuster mit pattern
   • Pflichtfelder
5. Buttons und Schalter (Anwendungsbeispiele)
   • Radio-Buttons verstecken
   • Flip-Flop-Schalter
6. Suchformulare (Anwendungsbeispiele)
   • Vorschläge mit datalist

Beachten Sie: Webseiten sind für Menschen gemacht. In Formularen spielt die Nutzerführung eine besonders große Rolle. Oft genug geben Benutzer entnervt auf, was nicht nur den Benutzer, sondern auch den Seitenersteller frustriert, da z.B. ein Online-Shop von zufriedenen Kunden lebt.

• Erheben Sie nur die Daten, die Sie unbedingt benötigen!
• Geben Sie Hilfen beim Ausfüllen des Formulars und bei der Korrektur falsch ausgefüllter Felder.
• Fassen Sie Gruppen zusammengehörender Felder zusammen.

Siehe auch: Barrierefreiheit/Benutzereingaben zugänglich gestalten

Hinweis

Wenn Sie persönliche Daten erheben, müssen Sie darauf in Ihrer Datenschutzerklärung hinweisen.

Was ist ein Webformular? →

Siehe auch

• HTML
  • Formulare
• CSS
  • Wartungsfreundliches CSS am Beispiel eines Buttons
• JavaScript
  • Formulare mit JavaScript (Fortsetzung dieses Kurses)
    • Formulareingaben mit JavaScript auswerten
    • Gestaltung mit JavaSript
    • Formulareingaben mit JavaScript validieren
• PHP
  • Formulardaten serverseitig auswerten
  • Kontaktformular mit Swift Mailer
• Barrierefreiheit

• Referenz: button
• Referenz: form
• Referenz: fieldset
• Referenz: input
• Referenz: label
• Referenz: legend

Weblinks

deutsch

• webmaster-crashkurs: Formulare über CSS gestalten (deutschsprachiges Tutorial mit vielen ausführlichen Erklärungen)
• media-event: CSS für Formulare
• little-boxes: Formular per CSS gestalten

englisch

• html5rocks: HTML5 forms
• css-tricks: label placement on forms