Formulare

Für Formulare (Interactive Content) werden mit HTML5 interessante neue Funktionen eingeführt.

button
erzeugt eine Schaltfläche

  • type="button|reset|submit" gibt die Art der Schaltfläche an.
  • formaction, formmethod, name, value siehe beim input-Element
command
Nutzerbefehl
datalist
enthält eine Liste mit Vorschlägen (in Form von option-Elementen) für ein Eingabefeld
(Verbindung der beiden Elemente id-Attribut der datalist = list-Attribut des Eingabefeldes)
fieldset
Formularelement-Gruppe in einem Formular
form
definiert ein Formular, das die Kontrollelemente beeinhaltet

  • action="URI" verlinkt eine Datei, die beim Absenden des Formulars aufgerufen wird
  • autocomplete="on|off" gibt an, ob der Browser Formularfelder automatisch ausfüllen darf
  • method="get|post" gibt die Übertragungsmethode an
input
Eingabeelement (Schaltfläche oder einzeiliges Eingabefeld), genauer spezifiert durch das type-Attribut, das auch die weiteren zulässigen Attribute bestimmt

  • erforderlich: type="Art" gibt die Art der Eingabe an
    • button
    • checkbox für einen Checkbox-Listeneintrag (Kontrollkästchen)
    • color für eine Farbauswahl
    • date für ein Datum
    • datetime für Datum, Uhrzeit und Zeitzone
    • datetime-local für Datum und Uhrzeit
    • email für eine E-Mail-Adresse(nliste)
    • file für ein Datei-Upload-Element
    • hidden für versteckte Eingabe, die beim Versenden des Formulars mitgesendet wird
    • image für eine Bildauswahl
    • month für Monat und Jahr
    • number für einen exakten Zahlenwert
    • password für ein Passwortfeld
    • radio für einen Radiobutton (Optionsfeld, Auswahl einer Option ist möglich)
    • range für einen Zahlenwert, der nicht exakt anzugeben ist
    • reset für einen Reset-Button
    • search für einen Suchbegriff
    • submit für einen Button, der das Formular absendet
    • tel für eine Telefonnummer
    • text für eine beliebige Texteingabe
    • time für eine Uhrzeit
    • url für eine URL
    • week für eine Wochenangabe
  • accept="" gibt die akzeptierten Dateitypen (MIME-Typen) an (bei type="fileupload")
  • autocomplete="on|off" gibt an, ob der Browser Formularfelder automatisch ausfüllen darf
  • autofocus="autofocus"
  • checked="checked" für das Ankreuzen einer Checkbox
  • disabled="disabled"
  • formaction überschreibt das action-Attribut der zugehörigen form
  • formmethod überschreibt das method-Attribut der zugehörigen form
  • list="ID eines datalist-Elements" gibt eine Referenz auf ein datalist-Element mit Vorschlägen an
  • max="Maximum-Wert" und min="Minimum-Wert" Anfang und Ende der Werteskala (in Verbindung mit type="range")
  • maxlength=""
  • multiple="multiple" gibt an, ob mehrere Optionen auswählbar sind.
  • name=""
  • pattern="regulärer Ausdruck"
  • placeholder="Platzhalter" gibt den Text an, der in dem Feld steht, bevor den Wert eingeben wurde
  • readonly="readonly" gibt an, ob das Formularfeld editierbar ist (Lese- oder Schreibzugriff)
  • required="required" gibt an, dass das Ausfüllen des Feldes zum Absenden des Formulars erforderlich ist.
  • spellcheck="false"
  • size="positive Ganzahl" gibt die Anzahl der Zeichen an, die maximal in das Feld eingeben werden können.
  • step="Schrittweite" (in Verbindung mit type="range")
  • value="Wert" gibt den Wert an, der beim Senden des Formulars übermittelt wird
label
Beschriftung eines Formularelementes

  • for="ID eines Formularfeldes" gibt an, auf welches Formularfeld sich die Beschriftung bezieht.
legend
Beschriftung einer Formularfelder-Gruppe (als erstes Kindelement eines fieldset)
meter
Wert innerhalb einer festgelegten Werteskala
optgroup
Auswahlbox-Eintrags-Gruppe; umfasst option-Elemente innerhalb einer select-Box zusammen
option
Auswahlbox-Eintrag in einem datalist, einem optgroup oder einem select

  • label gibt eine Beschriftung des Eintrages an
output
Ergebnis einer Berechnung

  • for="IDs" referenziert die Elemente, die zur Berechnung verwendet wurden
  • form="ID eines form-Elementes" referenziert das zugehörige Formular, wenn output außerhalb eines Formulars steht
  • name="Name"
progress
Fortschrittsbalken
select
Auswahlbox; mit option-Elementen (oder optgroup-Elementen)
textarea
mehrzeiliges Texteingabefeld

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.