menu
Logo zum aktuellen Thema
Informatik > html > Formulare

Formulare

Formulare sind wichtige Elemente in HTML. Dank HTML5 sind viele Elemente und Funktionalitäten dazugekommen.
Ihre Verwendung ist nicht ganz trivial. Bei ungenügenden Prüfungen werden fehlerhafte Daten übertragen oder sind sie Einfallstor für Spam.

Formularelemente unterstützten zum Teil die Events input und change.
Wenn in folgenden Ausführungen ein Wert als Standard genannt ist, so bedeutet es, dass man diesen Wert nicht explizit angeben muss um ihn zu bekommen also kann das ganze Attribut weglassen.

Formulare

Inhalsverzeichnis

Formulardefinition

Mit dem form-Tag wird das Formular eingeleitet. Alle innerhalb befindlichen Elmente werden an den angegebenen Server gesendet. Form unterstützt globale Attribute und event-Attribute.

Attribute Werte Beschreibung
accept-charset Zeichensatz wie: UTF-8, ISO-8859-1 - Ich empfehle immer UTF-8. Angabe über die Zeichencodierung.
action URL Gibt das Ziel des Formulars an, an das die Daten gesendet werden. Gleichzeitig wird beim Absenden des Formulars zu dieser Seite gewechselt.
autocomplete on, off Schaltet autocomplete ein bzw. aus.
enctype application/x-www-form-urlencoded, multipart/form-data, text/plain Definiert wie die Daten kodiert werden, wenn sie zum Server geschickt werden. Dies gilt nur für methode=post.
method get, post Gibt die Request-Methode an. Standard: get
name String Legt den Namen fest, der für label verwendet wird.
novalidate Hat keinen Wert. Es reicht einfach novalidate anzugeben. Gibt, dass das Formular nicht validiert werden soll, wenn es abgeschickt wird.
target _blank, _self, _parent, _top Gibt das Zielfenster an, wie bei dem a-Tag.
<form target="/loing.php" method="post" autocomplete="off" target="_self">
...
</form>

einzeilige Eingabefelder

Einzeilige Eingabefelder werden mittels dem input oder button-Tag und einigen anderen erzeugt. Dabei wird das Attribut type entsprechend für input geändert. Mit HTML5 sind viele neue Möglichkeiten hinzugekommen. Input unterstütz globale Attribute und Events. Da nicht alle Attribute für alle möglichen Werte von type zur Verfügung stehen, habe ich das entsprechend sortiert.

Attribute für alle einzeiligen Eingabefelder.
Attribute Werte Beschreibung
name Zeichenkette Ein passender Name für den Inhalt des Feldes.
type button, checkbox, color, date, datetime, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url Legt den Typ des Eingabefeldes fest.
value abhängig vom Typ Enthält den Wert Inhalt des Feldes.

Textfelder

Es gibt verschiedene Formen der Textfelder. Diese sind speziel für URLs, Telefonnummern, E-Mailadressen, Zeit, Suchfelder sowie ein formatfreies einzeiliges Textfeld. Sie haben im wesentlichen die gleichen Eigenschaften und unterscheiden sich nur durch die gültigen Eingaben. Für das Textfeld muss type den entsprechenden Wert haben. Es werden die Events change und input unterstützt.

Inhaltsbezogene Attribute
Attribute Werte Beschreibung
autocomplete on, off Erlaubt die Autocomplete-Funktion des Browsers bzw. verbietet sie.
list id einer datalist Liefert von einer datalist die vordefinierten Optionen eines input-Elementes.
maxlength Zahl Maximale Anzahl an Zeichen.
minlength Zahl Minimale Anzahl an Zeichen.
multiple Dieses Attribut hat keinen Wert. Es reicht einfach required anzugeben. Ermöglicht mehrere Werte für ein Feld. Dieses Attribut gilt nur für type="email"
pattern regulärer Ausdruck Validierung der Daten.
placeholder Text, keine Zeilenumbürche. Ein kleiner Hinweis über die einzugebenen Daten.
readonly Wenn aktiv: readonly="readonly" Sperrt das Feld für Eingaben.
required Dieses Attribut hat keinen Wert. Es reicht einfach required anzugeben. Gibt an, dass die Eingabe erforderlich ist ohne dabei den Inhalt zu validieren.
size Zahl Gibt die Länge des Eingabefelder in Anzahl von Zeichen an.

Text:
URL:
E-Mail:
Telefonnummer:
Suchfeld:

<b>Text: </b><input type="text" name="url" value="" placeholder="Bitte Text eingeben"/><br/>
<b>URL: </b><input type="url" name="url" value="" /><br/>
<b>E-Mail: </b><input type="tel" name="tel" value="" /><br/>
<b>Telefonnummer: </b><input type="email" name="email" value="" /><br/>
<b>Suchfeld: </b><input type="search" name="suche" value="" /><br/>

Zahlen

Zahlen können mittels number angegeben werden. Hierbei können maximale, minimale und eine Schrittweise Erhöhung angegeben werden.

Inhaltsbezogene Attribute
Attribute Werte Beschreibung
autocomplete on, off Erlaubt die Autocomplete-Funktion des Browsers bzw. verbietet sie.
list id einer datalist Liefert von einer datalist die vordefinierten Optionen eines input-Elementes.
max Zahl größte Zahl
min Zahl kleinste Zahl
placeholder Text, keine Zeilenumbürche. Ein kleiner Hinweis über die einzugebenen Daten.
readonly Wenn aktiv: readonly="readonly" Sperrt das Feld für Eingaben.
required Dieses Attribut hat keinen Wert. Es reicht einfach required anzugeben. Gibt an, dass die Eingabe erforderlich ist ohne dabei den Inhalt zu validieren.
step Zahl Gibt die Differenz zwischen den aufeinanderfolgenden Werten an.

Zahl eingeben:

Zahl eingeben: <input type="number" name="zahl" value="" max="15" step="3" placeholder="ein mehrfaches von 3"/>

verstecktes Feld

Versteckte Felder sind nicht sichtbar. Man verwendet sie um technische Informationen zu übertragen. Es unterstützt keine Events und keine inhaltsbezogenen Attribute.

<input type="hidden" name="eintext" value="youdontseeit" />

Passwortfeld

Mit dem Passwortfeld werden Eingaben automatisch mit Sternchen oder Kreisen dargestellt.

Inhaltsbezogene Attribute
Attribute Werte Beschreibung
autocomplete on, off Erlaubt die Autocomplete-Funktion des Browsers bzw. verbietet sie.
maxlength Zahl Maximale Anzahl an Zeichen.
minlength Zahl Minimale Anzahl an Zeichen.
pattern regulärer Ausdruck Validierung der Daten.
placeholder Text, keine Zeilenumbürche. Ein kleiner Hinweis über die einzugebenen Daten.
readonly Wenn aktiv: readonly="readonly" Sperrt das Feld für Eingaben.
required Dieses Attribut hat keinen Wert. Es reicht einfach required anzugeben. Gibt an, dass die Eingabe erforderlich ist ohne dabei den Inhalt zu validieren.
size Zahl Gibt die Länge des Eingabefelder in Anzahl von Zeichen an.

<input type="password" name="password" />

Datum und Zeit

Mit date, datetime, datetime-local, month, time und week können zur Erfassung von Zeit und Datumsangaben ohne JavaScript eingebunden werden. Leider werden die Datums- und das Zeifelder nicht von allen Browsern unterstützt.

Es kann sein, dass die folgenden Beispiele in deinem Browser nicht fuktionieren.

Zeit:
Datum:
Datum und Zeit:
Datum und Zeit lokal:
Woche:
Monat:

<b>Zeit: </b><input type="time" name="time" value="" /><br/>
<b>Datum: </b><input type="date" name="date" value="" min="1979-12-31" max="2049-12-31"/><br/>
<b>Datum und Zeit: </b><input type="datetime" name="time" value="" /><br/>
<b>Datum und Zeit lokal: </b><input type="datetime-local" name="time" value="" /><br/>
<b>Woche: </b><input type="week" name="week" value="" /><br/>
<b>Monat: </b><input type="month" name="month" value="" />
Inhaltsbezogene Attribute
Attribute Werte Beschreibung
autocomplete on, off Erlaubt die Autocomplete-Funktion des Browsers bzw. verbietet sie.
list id einer datalist Liefert von einer datalist die vordefinierten Optionen eines input-Elementes.
max Datum und/oder Zahl Höchstes Datum.
min Datum und/oder Zahl Minimales Datum.
readonly Wenn aktiv: readonly="readonly" Sperrt das Feld für Eingaben.
required Dieses Attribut hat keinen Wert. Es reicht einfach required anzugeben. Gibt an, dass die Eingabe erforderlich ist ohne dabei den Inhalt zu validieren.
step Wenn min angegeben ist und der Wert eine Zahl ist oder in eine Zahl umgewandelt werden kann ist das der entsprechende Wert. Genauso verhält es sich, wenn , falls kein min vorhanden ist, eine Wert in value eingetragen ist. Gibt Schritte für mögliche Werte vor.

Farbwahl

Mit color gibt es die Möglichkeit bequem und wie in einem Bildbearbeitungsprogram eine Farbe zu wählen.

Inhaltsbezogene Attribute
Attribute Werte Beschreibung
autocomplete on, off Erlaubt die Autocomplete-Funktion des Browsers bzw. verbietet sie.
list id einer datalist Liefert von einer datalist die vordefinierten Optionen eines input-Elementes.

<input type="color" name="farbwahl" value=""/>

Listen

Man kann durch den Tag datalist für einige einzeile Eingabefelder eine vorgefertigte Liste von Optionen anbieten. Trotzdem hat man gegenüber dem select-Tag immer noch die Freiheit den ausgewählten Wert anzupassen. Um die Werte zu sehen, muss man im aktiven Eingabfeld nochmals klicken.

<input list="browsers" name="browser" />
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
</datalist>
...

Checkbox

Wird eine Checkbox ausgewählt, wird der angegebene Wert übermittelt.

Inhaltsbezogene Attribute
Attribute Werte Beschreibung
checked Dieses Attribut hat keinen Wert. Es reicht einfach required anzugeben. Gibt an, dass das Feld das Feld ausgewählt wurde.
readonly Wenn aktiv: readonly="readonly" Sperrt das Feld für Eingaben.

Ich habe ein Motorrad.
Ich habe ein Auto.

<input type="checkbox" name="vehicle1" value="Bike"/> Ich habe ein Motorrad.<br/>
<input type="checkbox" name="vehicle2" value="Car"/> Ich habe ein Auto.

Radiobutton

Mit Radiobuttons können Entscheidungen gespeichert werden. Radiobuttons mit dem gleichen Wert für name gehören zusammen. Man kann nur einen aus dieser Gruppe auswählen.

Inhaltsbezogene Attribute
Attribute Werte Beschreibung
checked Dieses Attribut hat keinen Wert. Es reicht einfach required anzugeben. Gibt an, dass das Feld das Feld ausgewählt wurde.
readonly Wenn aktiv: readonly="readonly" Sperrt das Feld für Eingaben.

männlich
weiblich

<input type="radio" name="sex" value="male" checked> männlich <br/>
<input type="radio" name="sex" value="female"> weiblich

Datei hochladen

Um Dateien hochladen zu können, wird file verwendet. Die Maximal hochladbare Dateigröße ist letzten Endes durch den betreffenden Webserver vorgegeben.

Inhaltsbezogene Attribute
Attribute Werte Beschreibung
accept kommaseparierte Liste, ohne Leerzeichen, mit folgenden Werten:
  • Dateiendungen - z.B.:.pdf,.doc,.jpg
  • Mimetypes: - z.B. abgekürzt: audio/*,video/*,image/*
    oder lang: application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document
Hier kann festgelegt werden, welche Arten von Dateien hochgeladen werden dürfen.
multiple Dieses Attribut hat keinen Wert. Es reicht einfach required anzugeben. Ermöglicht mehrere Werte für ein Feld. Dieses Attribut gilt nur für type="email"
required Dieses Attribut hat keinen Wert. Es reicht einfach required anzugeben. Gibt an, dass die Eingabe erforderlich ist ohne dabei den Inhalt zu validieren.

<input type="file" accept=".pdf, .odt"/>

Range

Type range für das input-Tag erzeugt erzeugen eines Schieberegler.

Inhaltsbezogene Attribute
Attribute Werte Beschreibung
autocomplete on, off Erlaubt die Autocomplete-Funktion des Browsers bzw. verbietet sie.
list id einer datalist Liefert von einer datalist die vordefinierten Optionen eines input-Elementes.
max Zahl höchster Wert.
min Zahl kleinster Wert.
step Zahl Gibt die Differenz zwischen den aufeinanderfolgenden Werten an.

<input type="range" value="" step="3" min="0" max="12"/>

Buttons

Der bessere Button

Man kann in HTML Buttons mittels dem Tag button oder dem input-Tag mit entsprechendem type erzeugen. Ich empfehle jedoch die Verwendung des Tags button.
Der Button hat einige unschätzbare Vorteile. Einer ist, dass die Bezeichnung im Elementinhalt steckt und nicht im value.

Bei der Auswertung muss jede (neue) Sprache berücksichtigt werden.
<input type="submit" value="prüfen">
<input type="submit" value="check">
<input type="submit" value="vérifier">

Für alle Sprachversionen des Formulars der gleiche Wert.
<button name="action" value="1">prüfen</button>
<button name="action" value="1">check</button>
<button name="action" value="1">vérifier</button>

Ein weiterer Vorteil ist, dass Button generierten Inhalt und Kinderlemente haben kann. Er kann auch leichter mittels CSS gestaltet werden. Außerdem ist der default-type submit, was den Code verkürzt.

Inhaltsbezogene Attribute
Attribute Werte Beschreibung
autofocus Dieses Attribut hat keinen Wert. Es reicht einfach autofocus anzugeben. Bewirkt, dass das Feld aktiv ist, sobal die Seite geladen wurde.
disabled Dieses Attribut hat keinen Wert. Es reicht einfach disabled anzugeben. Damit wird das Feld deaktiviert. Der Text ist nicht markierbar.
formaction URL Gibt das Ziel des Formulars an, an das die Daten gesendet werden. Wenn Wert nicht angegeben, gilt action des form-Tags.
formenctype application/x-www-form-urlencoded, multipart/form-data, text/plain Definiert wie die Daten kodiert werden, wenn sie zum Server geschickt werden. Dies gilt nur für methode=post.
formmethod get, post Gibt die Request-Methode an. Im Gegensatz zum Attribut method für fom gibt es hier keinen Standardwert.
formnovalidate Dieses Attribut hat keinen Wert. Es reicht einfach formnovalidate anzugeben. Gibt an, dass das Feld nicht validiert weden soll.
formtarget _blank, _self, _parent, _top, Framename Gibt das Zielfenster an, wie bei dem a-Tag.
type submit, reset, button submit: Formular abschicken, ist Standard und muss nicht angegeben werden. reset: Formular leeren. button: keine Funktion.

Absenden, Reset und Type Button

Mittels type=submit werden alle Formuardaten innerhalb des form-Tags an das angegebene Ziel gesendet. Mit dem Attribut value wird die Beschriftung des Buttons gesetzt. Für button als Wert für type wird ein einfacher Button generiert, der an sich keine Funktion hat. Durch type reset kann das aktuelle Formular geleert werden. Diese Buttons haben keine weiteren Attribute.

<input type="submit" value="Submit">

Formular leeren.

Image

Durch Image kann ein Button mit einen Bild zur Gestaltung von Benutzeraktionen erzeugt werden.

Inhaltsbezogene Attribute
Attribute Werte Beschreibung
alt Text Kurze Beschreibung des Bildes.
formaction URL Gibt das Ziel des Formulars an, an das die Daten gesendet werden. Wenn Wert nicht angegeben, gilt action des form-Tags.
formenctype application/x-www-form-urlencoded, multipart/form-data, text/plain Definiert wie die Daten kodiert werden, wenn sie zum Server geschickt werden. Dies gilt nur für methode=post.
formmethod get, post Gibt die Request-Methode an. Im Gegensatz zum Attribut method für fom gibt es hier keinen Standardwert.
formnovalidate Dieses Attribut hat keinen Wert. Es reicht einfach formnovalidate anzugeben. Gibt an, dass das Feld nicht validiert weden soll.
formtarget _blank, _self, _parent, _top, Framename Gibt das Zielfenster an, wie bei dem a-Tag.
height Zahl Angabe der Höhe in Pixel.
src URL Gibt die Position des angegebenen Bildes an.
width Zahl Angabe der Breite in Pixel.

Textarea

Für größere Texteingaben gibt es die Textarea. So eine "freie" Eingabe birgt natürlich die Gefahr von Falscheingaben. Daher sollten diese Felder wenn möglich durch andere Felder ersetzt werden.

Inhaltsbezogene Attribute
Attribute Werte Beschreibung
autocomplete on, off Erlaubt die Autocomplete-Funktion des Browsers bzw. verbietet sie.
autofocus Dieses Attribut hat keinen Wert. Es reicht einfach autofocus anzugeben. Bewirkt, dass das Feld aktiv ist, sobal die Seite geladen wurde.
cols Zahl Maximale Anzahl von Zeichen pro Zeile.
disabled Dieses Attribut hat keinen Wert. Es reicht einfach disabled anzugeben. Damit wird das Feld deaktiviert. Der Text ist nicht markierbar.
form ID eines oder mehrerer Formulare Gibt die Zugehörigkeit eines oder mehrerer Formulare an.
maxlength Zahl Maximale Anzahl von Zeichen.
minlength Zahl Minimale Anazahl von Zeichen.
placeholder Text, keine Zeilenumbürche. Ein kleiner Hinweis über die einzugebenen Daten.
readonly Wenn aktiv: readonly="readonly" Sperrt das Feld für Eingaben.
required Dieses Attribut hat keinen Wert. Es reicht einfach required anzugeben. Gibt an, dass die Eingabe erforderlich ist ohne dabei den Inhalt zu validieren.
rows Zahl Anzahl an Zeilen die angezeigt werden soll.
wrap hard, soft Gibt an ob der eingegebene Text mit Zeilenumbrüchen umschlossen werden soll, wenn das Formular abgeschickt wird. Standard is soft.
soft: keine Zeilenumbrüche
hard: vom Browser einfügte Zeilenumbrüche umschließen den Text.

<textarea name="comment" rows="4" cols="50" maxlength="255" placeholder="Kommentar">
Hier könnte ein Kommentar stehen.
</textarea>

Maße

Inhaltsbezogene Attribute
Attribute Werte Beschreibung
max Zahl höchster Wert.
min Zahl kleinster Wert.
low Zahl unterer Bereich Anzeige
high Zahl oberer Bereich Anzeige
optimum Zahl kleinster Wert.

Messwert in Zentimeter: 12cm

Bierfüllstand: 20ml

Zentimeter: <meter min="0" max="20" value="12" title="centimeters">12cm</meter>
<meter min="0" max="500" low="100" high="400" value="20" title="bottle_beer">20ml</meter>

Selectbox

Ein Klassiker unter den Formularelementen ist die Selectbox. Hier kann eine Wahl zwischen einer Vielzahl vorgegebenen Elmente platzsprarend getroffen werden. Die Selectbox besteht aus 2-3 Arten von Tags. Das select-Tag definiert die Selectbox und umschließt die option-Tags, die die Werte repräsentieren. Allerdings können die Werte mittels dem optgroup

-Tag gruppiert werden umd die Übersichtlichkeit zu erhöhen.

Einfache Liste:

<select name="lieblingsfarbe">
<option value="rot">rot</option>
<option value="gelb">gelb</option>
<option value="blau" selected>blau</option>
<option value="rosa">rosa</option>
</select>

Liste mit Gruppierungen:

Inhaltsbezogene Attribute für - select
Attribute Werte Beschreibung
autofocus Dieses Attribut hat keinen Wert. Es reicht einfach autofocus anzugeben. Bewirkt, dass das Feld aktiv ist, sobal die Seite geladen wurde.
disabled Dieses Attribut hat keinen Wert. Es reicht einfach disabled anzugeben. Damit wird das Feld deaktiviert. Der Text ist nicht markierbar.
form ID eines oder mehrerer Formulare Gibt die Zugehörigkeit eines oder mehrerer Formulare an.
multible Dieses Attribut hat keinen Wert. Es reicht einfach required anzugeben. Erlaubt mehrere Einträge auszuwählen. Dadurch werden alle Werte angezeigt.

Inhaltsbezogene Attribute für - option
Attribute Werte Beschreibung
disabled Dieses Attribut hat keinen Wert. Es reicht einfach disabled anzugeben. Damit wird das Feld deaktiviert. Der Text ist nicht markierbar.
label Text Ermöglicht eine kürzere Version für eine Option.
selected Dieses Attribut hat keinen Wert. Es reicht einfach disabled anzugeben. Hiermit wird eine Vorauswahl geotroffen. Wenn nicht gesetzt, ist das erste Element ausgewählt.
value abhängig vom Typ Enthält den Wert Inhalt des Feldes.

Inhaltsbezogene Attribute für - optgroup
Attribute Werte Beschreibung
disabled Dieses Attribut hat keinen Wert. Es reicht einfach disabled anzugeben. Damit wird das Feld deaktiviert. Der Text ist nicht markierbar.
label Text Ermöglicht eine Beschriftung für eine Optgroup.

richtig beschriften

Teil eines barrierefreien Formulars ist eine richtige Beschriftung der Eingabefelder. Hierfür gibt es die Tags label und legend.

Beschriftung

Durch label wird eine barrierefreie und gut gestaltbare Beschriftung erzeugt.

Inhaltsbezogene Attribute
Attribute Werte Beschreibung
for ID eines Elements. Gibt an, für welches Eingabefeld die Beschriftung gilt.
form ID eines oder mehrerer Formulare Gibt die Zugehörigkeit eines oder mehrerer Formulare an.



<label for="name">Name:</label> <input type="text" size="30">
<label for="email">E-Mail:</label> <input type="text" size="30">
<label for="geburtstag">Geburtstag:</label> <input type="text" size="10">

Legende

Legend dient als Beschriftung für Abschnitte. Die Attribute für die Schriftposition sind in HTML5 weggefallen. Hierfür kann man CSS verwenden.

Abschnitte

Ein umfangreiches Formular kann durch Abschnitte übersichtlich gestaltet werden. Hierfür gibt es das Tag fieldset.

Kontaktdaten: Name:
E-Mail:
Geburtstag:
Quiz: Lösungswort:

<fieldset> <legend>Kontaktdaten:</legend> Name: <input type="text" size="30"> E-Mail: <input type="text" size="30"> Geburtstag: <input type="text" size="10"> </fieldset>
<fieldset>
<legend>Quiz:</legend> Lösungswort: <input type="text" size="30"> </fieldset>

fehlerhafte Formulareingaben gestalten

Wenn man für seine Formulrelemente eine Validierung benötigt ist eine Gestaltung der Fehlermeldung sehr hilfreich. In CSS gibt es diesbezüglich Selektoren.

Eingabe erforderlich.

Mittels des ...........................

input:required { border: 2px solid black; }

Eingabe inkorrekt.

Mittels des ...........................

input:invalid { border: 2px solid #ff0000; }

Quellen

  • letzte Änderung: 2015-11-26 17:55:05
  • Autor: Torsten Witt
Facebook