HTML/Tutorials/Formulare/input

Text-Info

6x20min

einfach

Kenntnisse in
● HTML
● CSS

Das input-Element (input = Eingabe) wird innerhalb von Formularen genutzt, um Daten vom Benutzer abzufragen. Dabei kann das input-Element ganz unterschiedlich aussehen - vom Eingabefeld bis hin zur Checkbox, zum Radio-Button oder sogar einem Farbwähler.

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

Eingabe von Zahlen

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

Beispiel ansehen …

So sehen diese Typen aus

Eingabe von Zeitangaben

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

 

Beispiel ansehen …

So sehen diese Typen aus

Treffen einer Auswahl

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

Beispiel ansehen …

So sehen diese Typen aus

Auslösen von Benutzeraktionen

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

sonstige Input-Elemente

• type = "color" (Farbwähler)
• type = "hidden" (versteckt)
• type = "file" (Datei-Upload)

Beispiel ansehen …

So sehen diese Typen aus

Anwendung

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>

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

• HTML/Tutorials/Formulare
  • Was ist ein Webformular?
    (Benutzeraktionen auslösen mit dem button-Element)

Referenz

Formular-Elemente

• input

Formular-Attribute

• autocomplete
• autofocus
• checked
• disabled
• for
• form
• high
• inputmode
• low
• max
• maxlength
• min
• multiple

• name
• novalidate
• optimum
• pattern
• placeholder
• readonly
• required
• size
• step
• type (button)
• type (input)
• value
• wrap

Weblinks

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