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
  • browsereigene Validierung
  • Gliederung mit fieldset und legend
  • Fortschrittsanzeige mit progress
   
• 

  Auswahllisten
  • Radio-Buttons
  • Checkboxen
  • select und option
   
• Gestaltung mit CSS
  • Bonbon-Buttons
  • Ghost-Buttons
   
• Ausgrauen: readonly vs disabled
  • disabled
  • readonly
   
• textarea
  • mehrzeilige Eingabefelder
   
• Eingabe von Text
  autocomplete und spellcheck
  - aber nicht bei Logins!
   
• Eingabe von Zahlen
  • type="number"
  • Schieberegler mit type="range"
   
• Eingabe von Zeitangaben
  • type="date" und mehr …
   

Für Fortgeschrittene

• Eingaben mit JavaScript auswerten‏‎
  • value-Eigenschaft
  • Element ansprechen
  • Slider mit Ergebnisausgabe
   
• Verkettete Auswahllisten

  AjaX

   
• WYSIWYG-Editor
  • textarea gestalten
  • Text selektieren
  • Text an Cursorposition einfügen
   
• Eingaben mit JavaScript validieren‏‎
  • Constraint Validation API
   
• Suchen und Filtern
   
• 

  File Upload

  type = "file"

   

• Was ist ein Webformular?

Siehe auch

• Auslösen von Benutzeraktionen
  • type = "button"
  • type = "submit"
  • type = "image"
  • type = "reset"
   
• Farbwähler

  type = "color"

   
• Versteckte Elemente

  type = "hidden"

   
• 

  PHP/Tutorials/Formulare

  Formulardaten serverseitig auswerten

   
• 

  Symfony-Mailer

  Kontaktformular mit Symfony Mailer

   
• 

  PHP/File Upload

  sehr ausführlicher Artikel mit dem Schwerpunkt Sicherheit

   
• Reloadsperre (PHP)

  Wie verhindert man das erneute Laden des Formulars?

   

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