HTML -Eingabeattribute
In diesem Kapitel werden die verschiedenen Attribute für das HTML-Element <input> beschrieben.
Das value Attribut
Das Eingabeattribut value gibt einen Anfangswert für ein Eingabefeld an:
Beispiel
Eingabefelder mit Anfangswerten (Standardwerten):
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
Try it Yourself »
Das readonly Attribut
Das Eingabeattribut readonly gibt an, dass ein Eingabefeld schreibgeschützt ist.
Ein schreibgeschütztes Eingabefeld kann nicht geändert werden (ein Benutzer kann jedoch mit der Tabulatortaste darauf zugreifen, es markieren und den Text daraus kopieren).
Der Wert eines schreibgeschützten Eingabefeldes wird beim Absenden des Formulars gesendet!
Beispiel
Ein schreibgeschütztes Eingabefeld:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John" readonly><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
Try it Yourself »
Das disabled Attribut
Das Eingabeattribut disabled gibt an, dass ein Eingabefeld deaktiviert werden soll.
Ein deaktiviertes Eingabefeld ist unbrauchbar und nicht anklickbar.
Der Wert eines deaktivierten Eingabefeldes wird beim Absenden des Formulars nicht gesendet!
Beispiel
Ein deaktiviertes Eingabefeld:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John" disabled><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
Try it Yourself »
Das size Attribut
Das Eingabeattribut size gibt die sichtbare Breite eines Eingabefelds in Zeichen an.
Der Standardwert für size ist 20.
Hinweis: Das Attribut size funktioniert mit den folgenden Eingabetypen: text, search, tel, url, email und password.
Beispiel
Legen Sie eine Breite für ein Eingabefeld fest:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" size="50"><br>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" size="4">
</form>
Try it Yourself »
Das maxlength Attribut
Das Eingabeattribut maxlength gibt die maximal zulässige Anzahl von Zeichen in einem Eingabefeld an.
Hinweis: Wenn eine maxlength festgelegt ist, akzeptiert das Eingabefeld nicht mehr als die angegebene Anzahl von Zeichen. Dieses Attribut liefert jedoch keine Rückmeldung. Wenn Sie den Benutzer also benachrichtigen möchten, müssen Sie JavaScript-Code schreiben.
Beispiel
Legen Sie eine maximale Länge für ein Eingabefeld fest:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" size="50"><br>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" maxlength="4" size="4">
</form>
Try it Yourself »
Die min- und max-Attribute
Die Eingabeattribute min und max geben die Mindest- und Höchstwerte für ein Eingabefeld an.
Die Attribute min und max funktionieren mit den folgenden Eingabetypen: number, range, date, datetime-local, month, time und week.
Tipp: Verwenden Sie die Attribute „max“ und „min“ zusammen, um einen Bereich zulässiger Werte zu erstellen.
Beispiel
Legen Sie ein Höchstdatum, ein Mindestdatum und einen Bereich zulässiger Werte fest:
<form>
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
<label for="datemin">Enter a date after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
</form>
Try it Yourself »
Das multiple Attribut
Das Eingabeattribut multiple gibt an, dass der Benutzer mehr als einen Wert in ein Eingabefeld eingeben darf.
Das Attribut multiple funktioniert mit den folgenden Eingabetypen: email und file.
Beispiel
Ein Datei-Upload-Feld, das mehrere Werte akzeptiert:
<form>
<label for="files">Select files:</label>
<input type="file" id="files" name="files" multiple>
</form>
Try it Yourself »
Das pattern Attribut
Das Eingabeattribut pattern gibt einen regulären Ausdruck an, anhand dessen der Wert des Eingabefelds beim Absenden des Formulars überprüft wird.
Das Attribut pattern funktioniert mit den folgenden Eingabetypen: text, date, search, url, tel, email und password.
Tipp: Verwenden Sie das globale Attribut title, um das Muster zu beschreiben und dem Benutzer zu helfen.
Tipp: Erfahren Sie mehr über reguläre Ausdrücke in unserem JavaScript-Tutorial.
Beispiel
Ein Eingabefeld, das nur drei Buchstaben enthalten kann (keine Zahlen oder Sonderzeichen):
<form>
<label for="country_code">Country code:</label>
<input type="text" id="country_code" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code">
</form>
Try it Yourself »
Das placeholder Attribut
Das Eingabeattribut placeholder gibt einen kurzen Hinweis an, der den erwarteten Wert eines Eingabefelds beschreibt (ein Beispielwert oder eine kurze Beschreibung des erwarteten Formats).
Der kurze Hinweis wird im Eingabefeld angezeigt, bevor der Benutzer einen Wert eingibt.
Das Attribut placeholder funktioniert mit den folgenden Eingabetypen: text, search, url, tel, email und password.
Beispiel
Ein Eingabefeld mit einem Platzhaltertext:
<form>
<label for="phone">Enter a phone number:</label>
<input type="tel" id="phone" name="phone"
placeholder="123-45-678"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
Try it Yourself »
Das required Attribut
Das Eingabeattribut required gibt an, dass vor dem Absenden des Formulars ein Eingabefeld ausgefüllt werden muss.
Das required-Attribut funktioniert mit den folgenden Eingabetypen: text, search, url, tel, email, password, date pickers, number, checkbox, radio und file.
Beispiel
Ein erforderliches Eingabefeld:
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</form>
Try it Yourself »
Das step Attribut
Das Eingabeattribut step gibt die zulässigen Zahlenintervalle für ein Eingabefeld an.
Beispiel: Wenn step="3", könnten zulässige Zahlen -3, 0, 3, 6 usw. sein.
Tipp: Dieses Attribut kann zusammen mit den Max- und Min-Attributen verwendet werden, um einen Bereich zulässiger Werte zu erstellen.
Das Attribut step funktioniert mit den folgenden Eingabetypen: number, range, date, datetime-local, month, time und week.
Beispiel
Ein Eingabefeld mit einem angegebenen zulässigen Zahlenintervall:
<form>
<label for="points">Points:</label>
<input type="number" id="points" name="points" step="3">
</form>
Try it Yourself »
Hinweis: Eingabebeschränkungen sind nicht narrensicher und JavaScript bietet viele Möglichkeiten, illegale Eingaben hinzuzufügen. Um die Eingabe sicher einzuschränken, muss diese auch vom Empfänger (dem Server) überprüft werden!
Das autofocus Attribut
Das Eingabeattribut autofocus gibt an, dass ein Eingabefeld automatisch den Fokus erhalten soll, wenn die Seite geladen wird.
Beispiel
Lassen Sie das Eingabefeld "First name" automatisch den Fokus erhalten, wenn die Seite geladen wird:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" autofocus><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
Try it Yourself »
Die Attribute height und width
Die Eingabeattribute height und width geben die Höhe und Breite eines an <input type="image"> Element.
Tipp: Geben Sie für Bilder immer sowohl die Höhen- als auch die Breitenattribute an. Wenn Höhe und Breite festgelegt sind, wird beim Laden der Seite der für das Bild benötigte Platz reserviert. Ohne diese Attribute kennt der Browser die Größe des Bildes nicht und kann ihm nicht den entsprechenden Platz reservieren. Dies hat zur Folge, dass sich das Seitenlayout während des Ladens ändert (während die Bilder geladen werden).
Beispiel
Definieren Sie ein Bild als „Senden“-Schaltfläche mit den Attributen „height“ und „width“:
<form>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>
Try it Yourself »
Das list Attribut
Das Eingabeattribut list bezieht sich auf ein <datalist>-Element, das vordefinierte Optionen für eine <input> enthält Element.
Beispiel
Ein <input>-Element mit vordefinierten Werten in einer <datalist>:
<form>
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
Try it Yourself »
Das autocomplete Attribut
Das Eingabeattribut autocomplete gibt an, ob für ein Formular oder ein Eingabefeld die automatische Vervollständigung aktiviert oder deaktiviert sein soll.
Autocomplete ermöglicht dem Browser, den Wert vorherzusagen. Wenn ein Benutzer mit der Eingabe in ein Feld beginnt, sollte der Browser Optionen zum Ausfüllen des Felds basierend auf zuvor eingegebenen Werten anzeigen.
Das Attribut autocomplete funktioniert mit <form> und dem folgenden <input>-Typen: text, search, url, tel, email, password, datepickers, range und color.
Beispiel
Ein HTML-Formular mit aktivierter und deaktivierter automatischer Vervollständigung für ein Eingabefeld:
<form action="/action_page.html" autocomplete="on">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="off"><br><br>
<input type="submit" value="Submit">
</form>
Try it Yourself »
Tipp: In einigen Browsern müssen Sie möglicherweise eine Autovervollständigungsfunktion aktivieren, damit dies funktioniert (siehe „Einstellungen“ im Menü des Browsers).
HTML Übungen
HTML Formular- und Eingabeelemente
| Tag | Beschreibung |
|---|---|
| <form> | Definiert ein HTML-Formular für Benutzereingaben |
| <input> | Definieren Sie ein Eingabesteuerelement |
Eine vollständige Liste aller verfügbaren HTML-Tags finden Sie in unserer HTML-Tag-Referenz.
