HTML <input> Tag
Der <input>-Tag wird in HTML-Formularen verwendet, um das Feld zu definieren, in das der Benutzer Daten eingeben kann. Beschreibung, Attribute und Beispiele.
Das <input>-Tag wird innerhalb des <form>-Elements verwendet und definiert Felder für Benutzereingaben. Der Typ des Feldes — ein Textfeld, Kontrollkästchen, Optionsfeld, Passwortfeld, Dateiauswahl und vieles mehr — wird durch den Wert des type-Attributs bestimmt. Das Element ist leer: Es hat keinen Textinhalt und enthält nur Attribute.
<input> gehört zur Gruppe der Formularelemente und ist eines der am häufigsten verwendeten Tags auf interaktiven Seiten. Fast jedes Anmeldefeld, jede Suchleiste und jedes Registrierungsformular wird aus einem oder mehreren <input>-Elementen aufgebaut.
Um ein Feld zu beschriften, damit Benutzer (und Hilfstechnologien) wissen, wofür es gedacht ist, kombiniert man es mit einem <label>-Tag. Um eine Eingabe in eine Aktion umzuwandeln — das Formular abzusenden oder zurückzusetzen — verwendet man ein Submit/Reset-Input oder das <button>-Element.
Diese Seite behandelt die Syntax, jeden type-Wert mit ausführbaren Beispielen, wie name/value-Paare übermittelt werden, die Label-Zuordnung und die integrierte HTML-Validierung.
Syntax
Das <input>-Tag ist leer, das bedeutet, dass das schließende Tag nicht erforderlich ist. In XHTML muss das (<input>)-Tag jedoch geschlossen werden (<input/>).
Beispiel des HTML <input>-Tags:
Beispiel des HTML <input>-Tags
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/form/submit" method="get">
<input type="email" name="user_email" placeholder="Enter your email" />
<input type="submit" value="Submit" />
</form>
</body>
</html>Beispiel des HTML <input>-Tags mit dem HTML <label>-Tag:
Beispiel des HTML <input>-Tags mit dem HTML <label>-Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.form-group { margin-bottom: 10px; }
</style>
</head>
<body>
<form action="/form/submit" method="get">
<div class="form-group">
<label for="first_name">Your Name:</label>
<input type="text" id="first_name" name="first_name" />
</div>
<div class="form-group">
<label for="last_name">Your Surname:</label>
<input type="text" id="last_name" name="last_name" />
</div>
<div class="form-group">
<label for="user_email">Enter Your E-Mail:</label>
<input type="email" id="user_email" name="user_email" />
</div>
<input type="submit" value="Submit" />
</form>
</body>
</html>Einem Label ein Input-Element zuordnen
Ein nacktes Eingabefeld gibt Benutzern keinen Hinweis darauf, was sie eingeben sollen. Das <label>-Tag behebt das und tut mehr als nur Text anzuzeigen:
- Screenreader lesen das Label vor, wenn das Eingabefeld den Fokus erhält, sodass Benutzer von Hilfstechnologien wissen, was das Feld erwartet.
- Der Klickbereich wird größer. Ein Klick auf den Label-Text fokussiert das Eingabefeld (und schaltet ein Kontrollkästchen oder Optionsfeld um). Das ist ein großer Usability-Gewinn bei kleinen Kontrollkästchen.
Es gibt zwei Möglichkeiten, ein Label einem Input-Element zuzuordnen:
1. Explizit — for entspricht id. Das for-Attribut des Labels muss dem id-Attribut des Inputs entsprechen:
<label for="username">Username:</label>
<input type="text" id="username" name="username" />2. Implizit — das Input-Element innerhalb des Labels einschließen. Kein id/for erforderlich:
<label>
Username:
<input type="text" name="username" />
</label>Die explizite Form ist vorzuziehen, wenn das CSS-Layout Label und Feld trennt. Auf jeden Fall sollte jedes Input-Element ein Label erhalten — das placeholder-Attribut ist kein Ersatz dafür, da der Hinweis verschwindet, sobald der Benutzer zu tippen beginnt.
Attribute
Das wichtigste Attribut, das den Typ des Eingabefeldes bestimmt, ist type. Wenn das Attribut fehlt, ist der Standardwert "text".
| Attribut | Wert | Beschreibung |
|---|---|---|
| accept | audio/* video/* image/* MIME_type | Gibt die Dateitypen an, die über das Datei-Upload-Feld gesendet werden können. (Wird mit type="file" verwendet). |
| align | left right top middle bottom | Definiert den Ausrichtungstyp des Bildes. (Wird nur mit Bildern verwendet). In HTML5 nicht mehr unterstützt. |
| alt | text | Definiert den alternativen Text für das Bild. (Wird nur mit Bildern verwendet). |
| autocomplete | on off | Aktiviert/deaktiviert die automatische Vervollständigung. Neues Attribut in HTML5. |
| autofocus | autofocus | Gibt an, dass das Formularfeld nach dem Laden der Seite den Fokus erhalten soll. Neues Attribut in HTML5. |
| checked | checked | Gibt an, dass das Element beim Laden der Seite vorausgewählt sein soll. (Nur für <input type = "checkbox"> und <input type = "radio">). |
| disabled | disabled | Gibt an, dass das Element für die Benutzerinteraktion nicht verfügbar sein soll. |
| form | form_id | Gibt das Formular (spezifiziert durch das <form>-Element) des Steuerelements an. Der Wert ist die Formular-ID (id) im selben Dokument. Neues Attribut in HTML5. |
| formaction | URL | Gibt die Adresse an, an die die Formulardaten beim Klicken auf die Schaltfläche gesendet werden. (Nur für <input type = "image"> und <input type = "submit">). |
| formenctype | application/x-www-form-urlencoded multipart/form-data text/plain | Bestimmt, wie die Formulardaten vor dem Senden an den Server kodiert werden. (Nur mit <input type="image"> und <input type="submit">). Werte: application/x-www-form-urlencoded (Standard, kodiert alle Zeichen), multipart/form-data (keine Kodierung, für Datei-Uploads verwendet), text/plain (Leerzeichen werden zu +, andere Zeichen nicht kodiert). |
| formmethod | get post | Gibt die HTTP-Anfragemethode an, die beim Senden der Formulardaten verwendet wird. (Nur für <input type = "image"> und <input type = "submit">). get sendet Formulardaten in der Adressleiste. post sendet Daten zur Verarbeitung an den Server. |
| formnovalidate | formnovalidate | Gibt an, dass die Daten nicht auf Korrektheit überprüft werden müssen. (Nur für <input type = "submit">). |
| formtarget | _blank _self _parent _top | Gibt an, wo die Antwort nach dem Absenden des Formulars angezeigt werden soll. (Nur für <input type = "image"> und <input type = "submit">). |
| height | pixels | Definiert die Höhe des Elements (nur für <input type = "image">). |
| inputmode | none text decimal numeric tel search email url | Gibt an, welches virtuelle Tastaturlayout auf Touch-Geräten angezeigt werden soll (zum Beispiel zeigt numeric eine reine Zifferntastatur). |
| list | datalist_id | Definiert eine Liste von Optionen, aus der der Benutzer wählen kann. Der Wert des Attributs ist die ID des <datalist>-Elements. |
| max | number date | Legt den Höchstwert für die Eingabe einer Zahl oder eines Datums fest. |
| maxlength | number | Definiert die maximale Anzahl von Zeichen, die der Benutzer eingeben kann. |
| min | number date | Legt den Mindestwert für die Eingabe einer Zahl oder eines Datums fest. |
| multiple | multiple | Gibt an, dass der Benutzer mehr als einen Wert in das Element eingeben kann (nur für <input type = "file"> und <input type = "email">). |
| name | text | Definiert den Namen des Elements. (Wird zur Formularidentifikation verwendet). |
| pattern | regular expression | Gibt einen regulären Ausdruck an, gemäß dem Daten im Formularfeld eingegeben und überprüft werden müssen. (Nur für Steuerelemente text, search, tel, url, email und password). |
| placeholder | text | Definiert einen kurzen Hinweis, der den erwarteten Wert für das Eingabefeld beschreibt. Der Benutzer sieht einen Hinweis im Eingabefeld. Er verschwindet, wenn der Benutzer mit der Dateneingabe beginnt oder wenn das Feld den Fokus erhält. |
| readonly | readonly | Definiert, dass das Eingabefeld nur zum Lesen aktiviert ist. Der Benutzer kann keine Änderungen vornehmen. |
| required | required | Gibt an, dass das Eingabefeld ausgefüllt werden muss, bevor das Formular abgeschickt wird. |
| size | number | Definiert die sichtbare Breite des Textfeldes in Zeichen. (Nur für text, search, tel, url, email und password). Standard sind 20 Zeichen. |
| src | URL | Gibt den Pfad zum Bild an, das als "Senden"-Schaltfläche verwendet wird. (Nur für <input type = "image">). |
| step | number | Legt den Inkrementschritt (Inkrementwert) für numerische Felder fest. Wird mit den Attributen min und max verwendet, die den minimalen und maximalen Wert definieren. |
| type | button checkbox color date datetime (deprecated) datetime-local email file hidden image month number password radio range reset search submit tel text time url week | Definiert den Typ des Eingabefeldes. |
| value | text | Definiert den Wert des Elements. |
| width | width | Definiert die Breite des Elements (nur für <input type = "image">). |
Das <input>-Tag unterstützt auch die globalen Attribute und die Ereignisattribute.
Werte des type-Attributs
| Wert | Beschreibung |
|---|---|
| button | Definiert eine aktive Schaltfläche. |
| checkbox | Kontrollkästchen (der Benutzer kann mehr als eine Option auswählen). |
| color | Gibt eine Farbpalette an (der Benutzer kann Farbwerte in hexadezimaler Form auswählen). |
| date | Definiert das Eingabefeld für ein Kalenderdatum. |
| datetime (deprecated) | Definiert das Eingabefeld für Datum und Uhrzeit. (In HTML5 veraltet, verwende stattdessen datetime-local.) |
| datetime-local | Definiert das Eingabefeld für Datum und Uhrzeit ohne Zeitzone. |
| Definiert das Eingabefeld für eine E-Mail-Adresse. | |
| file | Setzt das Steuerelement mit einer Durchsuchen-Schaltfläche, durch Klicken können Dateien ausgewählt und geladen werden. |
| hidden | Definiert ein verstecktes Eingabefeld. Es ist für den Benutzer nicht sichtbar. |
| image | Gibt an, dass ein Bild anstelle einer Schaltfläche verwendet wird, um Daten an den Server zu senden. Der Pfad zum Bild wird durch das src-Attribut angegeben. Das alt-Attribut kann auch verwendet werden, um alternativen Text anzugeben, die Attribute height und width für die Höhe und Breite des Bildes. |
| month | Definiert das Feld zur Auswahl eines Monats, danach werden die Daten als Jahr-Monat angezeigt (zum Beispiel: 2018-07). |
| number | Definiert das Eingabefeld für Zahlen. |
| password | Definiert ein Feld zur Eingabe eines Passworts (die eingegebenen Zeichen werden als Sternchen, Punkte oder andere Zeichen angezeigt). |
| radio | Erstellt ein Optionsfeld (bei Auswahl eines Optionsfeldes werden alle anderen deaktiviert). |
| range | Erstellt einen Schieberegler zur Auswahl von Zahlen im angegebenen Bereich. Der Standardbereich ist 0 bis 100. Der Zahlenbereich wird durch die Attribute min und max angegeben. |
| reset | Definiert eine Schaltfläche zum Zurücksetzen von Informationen. |
| search | Erstellt ein Textfeld für die Suche. |
| submit | Erstellt eine Schaltfläche zum Absenden der Formulardaten ("Submit"-Schaltfläche). |
| text | Erstellt ein einzeiliges Textfeld. |
| time | Gibt ein numerisches Feld zur Eingabe der Uhrzeit im 24-Stunden-Format an (zum Beispiel: 13:45). |
| url | Erstellt ein Eingabefeld für URLs. |
| week | Erstellt ein Feld zur Auswahl der Woche, danach werden die Daten als Jahr-Woche angezeigt (zum Beispiel: 2018-W25). |
Beispiele der häufigen Input-Typen
Der type-Wert ändert, wie ein Eingabefeld aussieht und wie es sich verhält. Hier sind die, die man am häufigsten verwenden wird.
Kontrollkästchen und Gruppierung mit name
Ein Kontrollkästchen ermöglicht dem Benutzer, eine Option ein- oder auszuschalten. Mit checked kann es vorausgewählt werden. Wenn mehrere Kontrollkästchen denselben name teilen, bilden sie eine Gruppe, und jedes aktivierte Kästchen wird separat als name=value übermittelt:
<form>
<label><input type="checkbox" name="topping" value="cheese" checked /> Cheese</label>
<label><input type="checkbox" name="topping" value="bacon" /> Bacon</label>
<label><input type="checkbox" name="topping" value="onion" /> Onion</label>
</form>Das Abschicken mit aktiviertem Cheese und Onion sendet topping=cheese&topping=onion.
Optionsfelder (gemeinsamer name)
Optionsfelder, die denselben name teilen, schließen sich gegenseitig aus — die Auswahl eines Feldes hebt die anderen auf. Immer einen value für jedes Feld setzen, damit der Server weiß, welche Option ausgewählt wurde:
<form>
<p>Choose a size:</p>
<label><input type="radio" name="size" value="s" /> Small</label>
<label><input type="radio" name="size" value="m" checked /> Medium</label>
<label><input type="radio" name="size" value="l" /> Large</label>
</form>Datei-Upload
type="file" fügt eine Durchsuchen-Schaltfläche hinzu. Mit accept kann die Dateiauswahl gefiltert und mit multiple können mehrere Dateien gleichzeitig ausgewählt werden:
<form>
<label for="avatar">Profile picture:</label>
<input type="file" id="avatar" name="avatar" accept="image/*" />
</form>Zahl mit min, max und step
type="number" zeigt ein numerisches Feld mit Pfeiltasten an. min/max begrenzt den Bereich und step legt das Inkrement fest (für Währungen step="0.01" verwenden, step="any" um beliebige Dezimalzahlen zuzulassen):
<form>
<label for="qty">Quantity (1–10):</label>
<input type="number" id="qty" name="qty" min="1" max="10" step="1" value="1" />
</form>Bereichsschieberegler
type="range" ist ein Schieberegler für einen ungefähren Wert, den der Benutzer nicht genau sehen muss. Er verwendet dieselben Attribute min, max und step:
<form>
<label for="volume">Volume:</label>
<input type="range" id="volume" name="volume" min="0" max="100" step="5" value="50" />
</form>Passwort
type="password" maskiert die eingegebenen Zeichen. Der Wert wird dennoch im Klartext gesendet, daher sollte das Formular über HTTPS abgeschickt werden:
<form>
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd" minlength="8" required />
</form>Wie name und value übermittelt werden
Wenn ein Formular abgeschickt wird, erstellt der Browser einen Query-String aus name=value-Paaren seiner Steuerelemente. Die Rolle von value hängt vom Input-Typ ab:
- Textähnliche Felder (
text,email,url,password,number,search,tel):valueist der Standardtext im Feld; was der Benutzer tippt, ersetzt ihn und wird übermittelt. - Optionsfelder und Kontrollkästchen:
valuesind die Daten, die nur dann gesendet werden, wenn das Steuerelement aktiviert ist. Ein nicht aktiviertes Kästchen übermittelt gar nichts. Deshalb benötigt jede Option ihren eigenenvalue. - Submit und Button:
valueist die Beschriftung auf der Schaltfläche. Eine benannte Submit-Schaltfläche sendet auch ihrname=value-Paar, was dem Server ermöglicht festzustellen, welche Schaltfläche gedrückt wurde.
Ein Eingabefeld ohne name wird niemals übermittelt — es kann trotzdem für clientseitiges Scripting nützlich sein, aber der Server sieht es nie.
Formularvalidierung
Browser können Eingaben validieren, bevor das Formular gesendet wird, ohne JavaScript. Wenn ein Feld fehlschlägt, blockiert der Browser das Absenden und zeigt eine Meldung an. Die wichtigsten Werkzeuge sind:
required— das Feld darf nicht leer sein.type="email"/type="url"— der Wert muss eine syntaktisch gültige E-Mail-Adresse oder URL sein.pattern— ein regulärer Ausdruck, dem der Wert entsprechen muss (funktioniert bei text, search, tel, url, email, password).min/max/step— numerische und datumsbezogene Bereichsgrenzen.minlength/maxlength— Zeichenlängenbegrenzungen.
Dieses Beispiel kombiniert sie. Versuche es leer abzuschicken, dann mit falschen Daten:
<!DOCTYPE html>
<html>
<head>
<title>Form validation</title>
<style>
.form-group { margin-bottom: 10px; }
label { display: block; }
</style>
</head>
<body>
<form action="/form/submit" method="post">
<div class="form-group">
<label for="email">Email (required):</label>
<input type="email" id="email" name="email" required />
</div>
<div class="form-group">
<label for="site">Website (must start with https://):</label>
<input type="url" id="site" name="site" pattern="https://.*" placeholder="https://example.com" />
</div>
<div class="form-group">
<label for="zip">ZIP code (5 digits):</label>
<input type="text" id="zip" name="zip" pattern="[0-9]{5}" maxlength="5" required />
</div>
<div class="form-group">
<label for="age">Age (18–99):</label>
<input type="number" id="age" name="age" min="18" max="99" step="1" required />
</div>
<input type="submit" value="Submit" />
</form>
</body>
</html>Um diese integrierte Prüfung für eine bestimmte Submit-Schaltfläche zu überspringen, füge formnovalidate hinzu. Um ein Feld mit CSS anzusprechen, passen die Pseudoklassen :valid, :invalid und :required auf den Validierungsstatus. Weitere Informationen zur Einrichtung von Formularen und deren Übermittlung findest du beim <form>-Tag.