HTML/Elemente/input

Der Begriff input ist mehrdeutig.
Neben dem HTML-Element input gibt es noch das gleichnamige input (oninput)-Ereignis.

Das input-Element 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 (Übersicht) geschaffen.

Syntax

Start-Tag: notwendig

End-Tag: verboten

WAI‑ARIA‑Rolle

• keine, falls type = date, datetime, datetime-local, week, month, time, file, hidden
• button, falls type = button, image, reset, submit
• checkbox, falls type = checkbox
• combobox, falls type = text, search, tel, url, email mit Vorschlägen
• menuitem, falls type = button, image in einem menu-Element
• menuitemcheckbox, falls type = checkbox in einem menu-Element
• menuitemradio, falls type = radio in einem menu-Element
• radio, falls type = radio
• slider, falls type = range
• spinbutton, falls type = number
• textbox, falls type = email, password, search, tel, text, url ohne Vorschläge
?, falls type = color
• (Details)

Elternelemente

Darf vorkommen in:
Elementen mit flow content

erlaubte Inhalte

keine, leeres Element

Beispiel

<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>
    seagreen<input type="radio" id="weibl" name="geschlecht" value="1">
  <label for="queer">queer</label>
    seagreen<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>

Im Codebeispiel finden sich verschiedene Eingabefelder, die je nach type ganz verschiedene Einsatzzwecke haben.

Beachten Sie: Das <input>-Tag ist ein so genanntes Standalone-Tag. In HTML5 können Sie den schließenden Schrägstrich (/) weglassen.

Attribute

Name	Inhalt	Standardwert	Bedeutung
Universalattribute
id	ID		identifiziert ein einziges Element innerhalb eines Dokuments
class	CDATA		ordnet ein Element einer oder mehreren Klassen zu.
accesskey	ID		Tastaturkürzel
contenteditable	CDATA		editierbarer Inhalt
contextmenu			definiert Kontextmenü
dir	ltr, rtl		definiert die Schreibrichtung innerhalb des Dokuments
draggable	ID		kann mit Drag & Drop gezogen werden
dropzone	CDATA		Aktion bei Ablegen
hidden			versteckter Inhalt
lang	NAME		legt eine den IANA-Sprachdefinitionen folgende Sprache des Elementinhalts fest [RFC1766]
spellcheck	ID		Rechtschreibprüfung Sollte auch für input type="password" deaktiviert werden.
style	CDATA		notiert direkt in einem Element- style sheet data
tabindex	NAME		zeigt an, ob dieses Element fokusiert werden kann, ob es mithilfe der Tastaturnavigation angesteuert werden kann und in welcher Reihenfolge navigiert wird.
title	CDATA		betitelt oder beschreibt ein Element.
type	Schlüsselwort (siehe Detailseite)	text	Legt fest, welche Art von Eingabeelement verwendet werden soll.
accept	CDATA		Für type="file" listet das Attribut durch Komma getrennt die Dateitypen auf, die der Browser vom Anwender akzeptieren soll. Welche Dateitypen möglich sind, finden Sie auf der Detailseite zum Attribut.
autocomplete	off, on		bestimmt, ob der, im Element eingegebene Wert, automatisch durch den Browser vervollständigt werden kann. Dieses Attribut wird ignoriert, wenn der Typedes Elementes hidden, password, checkbox, radio, file oder eine Schaltfläche ist.
alt	CDATA		alternativer Text, der angezeigt wird, wenn das Element vom Typ Image ist und das Bild nicht geladen werden kann.
autofocus	Boolesches Attribut		Focus wird beim Laden auf dieses Element gelegt.
checked	Boolesches Attribut		bestimmt, dass Radio-Schaltflächen und Checkboxen vorausgewählt sind
disabled	Boolesches Attribut		legt fest, dass das Element ausgegraut, d.h. nicht benutzbar ist
form	CDATA		Identifizierungsname des form-Elements mit dem es in Verbindung steht.
formaction	CDATA		URI der Datei (Script), die die Verarbeitung der Eingaben übernimmt.
formenctype	application/x-www-form-urlencoded, multipart/form-data, text/plain	application/x-www-form-urlencoded	legt den Inhalts-Typ fest.
formmethod	GET, POST		bestimmt, mit welcher Anfragemethode der Browser die Daten des Elements übermittelt.
formnovalidate	Boolesches Attribut		legt fest, dass das Formular vor dem Senden nicht überprüft wird, wenn das Element vom Type button oder image ist.
formtarget	_self, _blank, _parent, _top	_self	bestimmt das Zielfenster, in dem die ausgewerteten Daten angezeigt werden, wenn das Eingabeelement vom Type button oder image ist.
height	CDATA		bestimmt die Höhe des Elements, wenn das Element vom Typ image ist.
inputmode	verbatim, latin, latin-name, latin-prose, full-width-latin, kana, katakana, numeric, tel, email, url		Ein Hinweis an den Browser, welche Tastatur angezeigt werden soll, wenn das Element vom Typ text, password, email oder url ist.
list	CDATA		Identifizierungsname des datalist-Elements mit dem es in Verbindung steht.
max	NUMBER		maximaler (numerischer oder Datum/Uhrzeit) Wert für dieses Element, das nicht weniger als der Minimalwert (min-Attribut) sein darf.
maxlength	NUMBER		Die maximale Anzahl von Zeichen für ein Textfeld, wenn diese vom Typ text, email, search, password, tel, oder url ist.
min	NUMBER		Der minimale (numerische oder Datum/Uhrzeit) Wert für dieses Element, das nicht größer als der Maximalwert (max-Attribut) sein darf.
minlength	NUMBER		Die minimale Anzahl von Zeichen für ein Textfeld, wenn diese vom Typ text, email, search, password, tel, oder url ist.
multiple	Boolesches Attribut		Bestimmt, dass der Benutzer mehr als einen Wert auswählen kann, wenn der Typ des Elements email oder file ist.
name	CDATA		Name des Elementes, welcher mit den Formulardaten übermittelt wird.
pattern	CDATA		Suchmuster mit Hilfe von Regulären Ausdrücken.
placeholder	CDATA		Platzhalter die die Art der Eingabe vorschlagen.
readonly	Boolesches Attribut		bestimmt, dass der Wert des Elements nicht verändert werden kann. Ist das Element vom Type hidden, range, color, checkbox, radio, file oder button, wird dieses Attribut ignoriert.
required	Boolesches Attribut		bestimmt, dass eine Eingabe in das Element erfolgen muss, bevor es abgesendet werden kann. Das Attribut kann nicht genutzt werden, wenn das Eingabeelement vom Type hidden, image, oder button ist.
size	CDATA		bestimmt die Größe des Elementes in Pixeln, es sei denn der Typ des Elementes ist text oder password. In diesem Fall wäre es die Anzahl an Zeichen.
src	CDATA		Wenn das Eingabeelement vom Typ image ist, gibt dies den URI Verzeichnisspfad des Bildes an, welches auf der Schaltfläche angezeigt wird. Anderfalls wird dieses Attribut ignoriert.
step	CDATA		legt Schritte für die min und max Attribute fest
value	CDATA		bestimmt den Initialisierungswert des Elements. Dieser Wert wird ignoriert, wenn das Element vom Typ radio oder checkbox ist.
width	CDATA		Wenn das Element vom Type Bild ist, definiert dieses Attribut die Breite des Bildes das auf der Schaltfläche angezeigt wird.

Attribut: Pflichtattribut
Attribut: optionales Attribut

Siehe auch

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

• Eingabe von Text
  • type =text
  • type =search
  • type ="password"
  • type ="tel"
  • type ="url"
  • type = "email"
   
• Eingabe von Zahlen
  • type="number"
  • type="range"
  • inputmode
   
• Eingabe von Zeitangaben
  • type="date"
  • type = "datetime-local"
  • type = "week"
  • type = "month"
  • type = "time"
   
• Auswahllisten
  • type = "radio"
  • type = "checkbox"
   
• Formulare/Auslösen von Benutzeraktionen
  • type = "button"
  • type = "submit"
  • type = "image"
  • type = "reset"
   
• Farbwähler

  type = "color"

   
• Versteckte Elemente

  type = "hidden"

   
• File Upload

  type = "file"

   

Weblinks

• Spezifikation (W3C): The input-Element
• SELFHTML-Blog: input oder button für submit-Elemente?
  • die dazugehörende Forumsdiskussion