HTML/Tutorials/Formulare

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
   • Buttons
     • Formulare absenden
     • Clientseitige Aktionen auslösen
     • Formulare zurücksetzen
2. Beschriftungen
   • Hinweise mit label
   • Beispielwerte mit placeholder
3. browsereigene Validierung
   • Eingabemuster mit pattern
   • Ober- und Untergrenzen
   • Pflichtfelder mit required
4. Gliederung
   • fieldset und legend
   • progress
5. Gestaltung mit CSS (Anwendungsbeispiele)
   • Radio-Buttons verstecken
   • Bonbon-Buttons
   • Ghost-Buttons
   • Flip-Flop-Schalter
6. Suchformulare (Anwendungsbeispiele)
   • Vorschläge mit datalist
     
     
     
     

Was ist ein Webformular? →

Siehe auch

Tutorials

HTML

• input
  • einzeilige Eingabefelder
  • Checkboxen und Radio-Buttons
• textarea
• Auswahllisten
  • select und option
• Ergebnisausgabe
  • meter
  • output

CSS

• Wartungsfreundliches CSS am Beispiel eines Buttons

JavaScript

• Formulare mit JavaScript (Fortsetzung dieses Kurses)
  • Eingaben mit JavaScript auswerten
  • Gestaltung mit JavaSript
  • Eingaben mit JavaScript validieren

PHP

• Formulardaten serverseitig auswerten
• Kontaktformular mit Swift Mailer

Referenz

Formular-Elemente

• button
• datalist
• input
• form
• fieldset
• keygen
• legend
• label
• meter
• optgroup
• option
• output
• progress
• select
• textarea

Formular-Attribute

• accept
• accept-charset
• action
• autocomplete
• autofocus
• checked
• cols
• dirname
• disabled
• enctype
• for
• form
• formaction
• formenctype
• formmethod
• high
• keytype
• list
• low

• max
• maxlength
• method
• min
• multiple
• name
• novalidate
• optimum
• pattern
• placeholder
• readonly
• required
• rows
• selected
• size
• step
• type (button)
• type (input)
• value
• wrap

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