HTML/Formulare/input

Das input-Element wird innerhalb von Formularen genutzt, um Daten vom Benutzer abzufragen (input = Eingabe). Für unterschiedliche Zwecke stehen viele verschiedene Typen zur Verfügung.

Typen

Die Art des Eingabefeldes wird über das type-Attribut festgelegt. Mit HTML5 wurden für viele Anwendungsbereiche neue Typen geschaffen.

Beachten Sie: Der Standardwert für das type-Attribut ist text. Ein fehlendes type-Attribut ist also gleichbedeutend mit type = "text". Auch fallen Browser bei ihnen unbekannten type-Werten auf text zurück.

Eingabe von Text

• type = "text"
• type = "search"
• type = "password"
• type = "tel"
• type = "url"
• type = "email"

Beispiel ansehen …

So sehen diese Typen aus

ansehen …

sonstige Input-Elemente

• type = "hidden"
• type = "file"
• type = "color"

Beispiel ansehen …

So sehen diese Typen aus

ansehen …

Eingabe von Zahlen

• type = "number"
• type = "range"

Beispiel ansehen …

So sehen diese Typen aus

ansehen …

Eingabe von Zeitangaben

• type = "date"
• type = "datetime-local"
• type = "week"
• type = "month"
• type = "time"

Beispiel ansehen …

So sehen diese Typen aus

ansehen …

Treffen einer Auswahl

• type = "radio"
• type = "checkbox"

Beispiel ansehen …

So sehen diese Typen aus

ansehen …

Auslösen von Benutzeraktionen

• type = "button"
• type = "submit"
• type = "image"
• type = "reset"

Attribute

Die Attribute für input-Elemente werden auf eigenen Seiten vorgestellt, einzelne Attribute werden mit den entsprechenden input-Typen genauer vorgestellt. Außerdem erfahren Sie Grundsätzliches zur Übertragung von Formulardaten sowie zur Gestaltung und Validierung von Formularen.

Übersicht über Attribute der input-Elemente

• size
• min, max
• step
• list
• multiple

Formularelemente ausgrauen

• readonly
• disabled

Gestaltung von Formularen

• label-Elemente mit for-Attribut
• Formularelemente mit form-Attribut
• placeholder
• autofocus
• autocomplete
• inputmode

Validierung von Formularen

• minlength, maxlength
• required
• pattern

Übertragung von Formulardaten

• name
• value

input-Element
(Übersicht)

Eingabe von Text →

Beispiele

verschiedene input-Felder ansehen …

<form> <label for="vname">Vorname: <input id="vname" name="vname"> </label> <label for="zname">Zuname: <input id="zname" name="zname"> </label> <label for="männl">männlich</label> <input type="radio" id="männl" name="geschlecht" value="0"> <label for="weibl">weiblich</label> <input type="radio" id="weibl" name="geschlecht" value="1"> <label for="queer">queer</label> <input type="radio" id="queer" name="geschlecht" value="2"> <label for="alter">über 18:</label> <input type="checkbox" id="alter" name="alter"> <input type="submit" value="senden"> </form>

ansehen …

Beachten Sie: Das <input>-Tag ist ein so genanntes Standalone-Tag. Bei xml-konformer Schreibweise (wie z.B. in XHTML) benötigt das input-Tag den schließenden Schrägstrich (/). In HTML5 können Sie den / weglassen.

Sie können die Eingaben von Anwendern vor dem Absenden des Formulars kontrollieren. So können Sie zum Beispiel erzwingen, dass in einem Eingabefeld eine Zahl in einem bestimmten Wertebereich eingegeben wird usw.

Siehe auch

• Benutzeraktionen auslösen mit dem button-Element
• HTML-Referenz: input

Weblinks

• SELFHTML-Blog: input oder button für submit-Elemente?
  • die dazugehörende Forumsdiskussion