Klassische Eingabeelement

Das <input>-HTML-Element wird verwendet, um interaktive Steuerelemente für webbasierte Formulare zu erstellen, um Daten vom Benutzer zu akzeptieren. Eine Vielzahl von Arten von Eingabedaten und Steu­e­rungs-Widgets stehen je nach Gerät und Benutzer-Agent zur Verfügung. Das <input>-Element ist eines der leistungsstärksten und komplexesten in HTML aufgrund der schieren Anzahl der Kombinationen von Ein­ga­be­ty­pen und Attributen.

Bei allen <input>-Elementen können u.a. auch die fol­gen­den verwendet werden.

name für den Schlüssel im übermittelten Formular.
id für die eindeutige Identifizierung (z.B. in Kom­bi­na­ti­on mit CSS oder Ja­va­Script).
required, damit das Eingabefeld ausgefüllt werden muss, bevor das Formular abgeschickt wird.
value für den initialen oder aktuellen Wert des Input-Elements.
disabled, damit das Eingabefeld deaktiviert ist, also nicht anklickbar und nicht editierbar ist.
readonly damit das Eingabefeld nur lesbar und nicht änderbar ist.
title für eine beschreibende Information, die oft als Tooltip angezeigt wird, wenn man mit der Maus darüber fährt.

Diese Attribute werden in den folgenden Beispielen nur berücksichtigt, wenn sie relevant sind.

Type	Beschreibung	HTML	Erklärung
Text	Ein einzeiliges Textfeld. Zei­len­um­brü­che werden au­to­ma­tisch aus dem Ein­gabewert entfernt.	<input    type="text"    minlength="4"    maxlength="8"    size="10" >	minlength, maxlength: minimale, maximale Zei­chenlänge size: Breite in Zeichen (Standard­wert ist 20)
Password	Ein einzeiliges Textfeld, dass eine Möglichkeit bie­tet, ein Passwort sicher einzugeben.	<input    type="password"    minlength="4"    maxlength="8"    size="10" >	minlength, maxlength: minimale, maximale Zei­chenlänge size: Breite in Zeichen (Standard­wert ist 20)
File	Erlaubt, eine oder mehrere Da­teien aus dem Ge­rä­te­spei­cher auszuwählen. So­bald aus­ge­wählt, können die Da­tei­en mit­hilfe von For­mu­lar­über­mitt­lung an einen Server hoch­ge­la­den oder mit Java­Script und File API bearbeitet wer­den.	<input    type="file"    accept="image/png, image/jpeg"    multiplep > Das <form>-Element verlangt dabei zwingend das Attribut enctype mit dem Wert "multipart/form-data".	accept: beschränkt den Dateityp auf die an­ge­ge­be­nen Werte multiple: es können meh­rere Dateien ausgewählt wer­den.
Radio	Radios werden in der Re­gel in Gruppen ver­wen­det, in der je­weils nur ein Op­tions­feld aus­ge­wählt sein kann. Jedem Ra­dio in der Gruppe muss der­sel­be Na­me zugewiesen sein. Wenn kein Radio ausgewählt ist, ist die Radiogruppe in den abgeschickten For­mu­lar­da­ten nicht enthalten.	<input    type="radio"    name="switch"    value="ein"    checked > <input    type="radio"    name="switch"    value="aus"    accent-color: red; >	name: gemeinsamer Name der Radiogruppe value: Wert des Radios checked: standardmäßig aus­ge­wähl­tes Radio in der Gruppe.
Checkbox	Eine Checkbox wird stan­dard­mä­ßig als Kästchen dar­ge­stellt. Ein aus­ge­wähl­tes Kon­troll­käst­chen wird an­ge­kreuzt dar­ge­stellt. Wenn ein Kon­troll­kä­stchen beim Absenden des Formulars nicht an­ge­kreuzt ist, wird weder der Name noch der Wert an den Server übermittelt.	<input    type="checkbox"    name="option1"    checked > <input    type="checkbox"    name="option2"    checked    switch > <input    type="checkbox"    name="option2"    checked    style="accent-color: red;" >	name: Name der Checkbox checked: standardmäßig aus­ge­wähl­te Checkbox. switch: ändert das Erscheinungsbild
Hidden	Ein hidden Feld ermöglicht es, Daten im Formular ein­zu­schlie­ßen, die - außer mit­hil­fe von Ent­wick­ler­tools, die den Sei­ten­quell­text verändern können - nicht vom Benutzer ge­se­hen oder geändert wer­den können, aber mit über­mit­telt werden.	<input    type="hidden"    name="token"    value="0815" >	name: Name des Feldes value: Wert des Feldes
Button	Ein Button wird als Schalt­fläche dargestellt, der pro­grammiert werden kann, um be­nut­zer­de­fi­nier­te Funktionen auf der Web­sei­te zu steuern. Das ge­schieht, indem ihnen eine Ereignis-Handler-Funktion zugewiesen wird, ty­pi­scher­wei­se für das click-Ereignis. Bei dem Beispiel wird die Hin­ter­grund­farbe des Buttons bei einem Klick geändert.	<script> function changeColor(tag) {    const c = [       'blue', 'green', 'red', ''    ];    var rand = Math.floor(       Math.random() * c.length    );    tag.style.background = c[rand]; } </script> <input    type="button"    value="Aktion 1"    onclick="changeColor(this)" > Alternative mit Button-Element: <button onclick="changeColor(this)">    Aktion 2 </button>	value: Beschriftung der Schalt­flä­che onclick: Klick-Event
	Aktion 2
Reset	Ein Reset wird als Schalt­fläche dargestellt, mit einem Stan­dard-click-Er­eig­nis­handler, der alle Ein­ga­ben im Formular auf ih­re Ausgangswerte zu­rück­setzt	<input      type="reset"      value="Zurücksetzen" >	value: Beschriftung der Schalt­flä­che
Submit	Ein Submit wird als Schalt­fläche dargestellt. Wenn das Klick-Ereignis auftritt (nor­ma­ler­wei­se, weil der Benutzer auf die Schalt­fläche geklickt hat), wird versucht, das For­mu­lar an den Server zu sen­den.	<input    type="submit"    value="Absenden" >	value: Beschriftung der Schalt­flä­che

Weitere Elemente, die beim Erstellen von Formularen verwendet werden können:

Typ	Beschreibung	HTML	Erklärung
Select	Select wird verwendet, um ei­ne Dropdown-Liste zu er­stel­len. Option innerhalb des Se­lects definiert eine verfügbare Option in der Liste. Mit Optgroup lassen sich die Optionen mit ei­nem Label grup­pie­ren.	<select    <option val=""></option>    <option       val="1"       selected>Opt 1</option>    <option val="2">Opt 2</option> </select> <select    multiple    size="2">    <option val=""></option>    <option val="1">Opt 1</option>    <option val="2">Opt 2</option> </select> <select>    <optgroup       label="Programmierung">       <option val="php">          PHP       </option>       <option val="javascript">          JavaScript       </option>    </optgroup>    <optgroup       label="Datenbank">       <option val="mariadb">          MariaDB       </option>       <option val="sqlite">          SQLite       </option>    </optgroup> </select>	val: Wert der Option selected: selektierte Option multiple: Mehrfachauswahl möglich size: Anzahl der sichtbaren Optionen (Standard­wert ist 1)
	Opt 1Opt 2     Opt 1Opt 2     PHPJavaScriptMariaDBSQLite
Textarea	Textarea stellt ein mehr­zei­li­ges Text­be­ar­bei­tungs­steu­er­ele­ment zum ein­ge­ben eines längeren Textes mit einer Möglichkeit der Größenveränderung des Eingabefeldes dar. Letz­te­res kann per Style mit { resize: none; } ausgeschaltet werden.	<textarea></textarea> <textarea    style="resize: none;"    minlength="10"    minlength="60"    rows="5"    cols="30">Lorem ipsum </textarea>	style: Style minlength: Mindestanzahl Zeichen maxlength: Höchstanzahl Zeichen rows: Anzahl Zeilen Standard­wert ist 2) cols: Anzahl Spalten (Standard­wert ist 20)
	Lorem ipsum