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
Benutzerfreundliche Gestaltung
- Beschriftungen
- browsereigene Validierung
- Gliederung mit fieldset und legend
- mehrschrittige Formulare
Auswahllisten
- Radio-Buttons
- Checkboxen
- select und option
Buttons mit CSS gestalten

Sauberes CSS ohne Chaos:
Gestaltung mit Variablen und SPOT
Ausgrauen: readonly vs disabled
- disabled
- readonly
Eingabe von Text
- mehrzeilige Eingabefelder
- autocomplete und spellcheck
  - aber nicht bei Logins!
Eingabe von Zahlen
- type="number"
- Schieberegler mit type="range"
Eingabe von Zeitangaben
- type="date" und mehr …
Farbwähler

type = "color"

Für Fortgeschrittene

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

Inhalte durchsuchen und das Ergebnis gefiltert ausgeben
Verkettete Auswahllisten

Verbindung mehrerer Auswahllisten mit objektorientiertem JavaScript
Eingaben clientseitig mit JavaScript validieren‏‎
- Constraint Validation API
WYSIWYG-Editor
- textarea gestalten
- Text selektieren
- Text an Cursorposition einfügen
File Upload

type = "file"

Siehe auch

Formulare serverseitig auswerten
- Erwartung an Daten formulieren
- GET und POST
Formulardaten als PDF ausgeben

Formular ausfüllen und als Bestätigung ausdrucken
PHP/File Upload

sehr ausführlicher Artikel mit dem Schwerpunkt Sicherheit
Symfony-Mailer

Kontaktformular mit Symfony Mailer
Reloadsperre (PHP)

Wie verhindert man das erneute Laden des Formulars?
Auslösen von Benutzeraktionen
- type = "button"
- type = "submit"
- type = "image"
- type = "reset"
Versteckte Elemente

type = "hidden"