Formulare

Aus SELFHTML-Wiki
(Weitergeleitet von JavaScript/Tutorials/Formulare)
Wechseln zu: Navigation, Suche
Form-icon.svg
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"


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