Formulare

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

Diese Reihe zeigt, wie du Formulare in HTML auszeichnen und mit CSS benutzerfreundlicher und zugänglicher gestalten kannst.

• 

  Was ist ein Webformular?
  • Datenübertragung
  • Buttons
    • Formulare absenden
    • Clientseitige Aktionen auslösen
    • Formulare zurücksetzen
   
• 

  Benutzereingaben zugänglich gestalten

  
  
  

  • Beschriftungen mit label
  • Gliederung mit fieldset und legend
  • Fortschrittsanzeige mit progress
   
• Auswahllisten
  • Radio-Buttons
  • Checkboxen
  • select und option
   
• browsereigene Validierung
  • Eingabemuster mit pattern
  • Ober- und Untergrenzen
  • Pflichtfelder mit required
   
• Gestaltung mit CSS
  • Bonbon-Buttons
  • Ghost-Buttons
   
• Ergebnisausgabe
  • output
  • meter
   

Für Fortgeschrittene

• Eingaben mit JavaScript auswerten‏‎
  • value-Eigenschaft
  • Element ansprechen
  • Slider mit Ergebnisausgabe
   
• Suchen und Filtern
   
• File Upload

  type = "file"

   
• Eingaben mit JavaScript validieren‏‎
  • Constraint Validation API
   
• Verkettete Auswahllisten

  AjaX

   
• WYSIWYG-Editor
  • textarea gestalten
  • Text selektieren
  • Text an Cursorposition einfügen
   

Siehe auch

Tutorials

• Suchformulare (Anwendungsbeispiele)
  • Vorschläge mit datalist
• textarea

PHP

• Formulardaten serverseitig auswerten
• Kontaktformular mit Symfony Mailer

Referenz

Formular-Elemente

• button
• datalist
• input
• form
• fieldset
• label
• legend
• 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

• Was ist ein Webformular?