HTML -Eingabeattribute
Dieses Kapitel beschreibt die verschiedenen Attribute für das HTML- <input>Element.
Das Wertattribut
Das Eingabeattribut valuegibt einen Anfangswert für ein Eingabefeld an:
Beispiel
Eingabefelder mit initialen (Default-)Werten:
<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>
Das schreibgeschützte Attribut
Das Eingabeattribut readonlygibt an, dass ein Eingabefeld schreibgeschützt ist.
Ein schreibgeschütztes Eingabefeld kann nicht geändert werden (ein Benutzer kann jedoch mit der Tabulatortaste dorthin wechseln, 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>
Das deaktivierte Attribut
Das Eingabeattribut disabledgibt 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>
Das Größenattribut
Das Eingabeattribut sizegibt die sichtbare Breite eines Eingabefelds in Zeichen an.
Der Standardwert für sizeist 20.
Hinweis: Das sizeAttribut funktioniert mit den folgenden Eingabetypen: Text, Suche, Tel, URL, E-Mail und Passwort.
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>
Das maxlength-Attribut
Das Eingabeattribut maxlengthgibt die maximal zulässige Anzahl von Zeichen in einem Eingabefeld an.
Hinweis: Wenn a maxlengthgesetzt ist, akzeptiert das Eingabefeld nicht mehr als die angegebene Anzahl von Zeichen. Dieses Attribut liefert jedoch keine Rückmeldung. Wenn Sie also den Benutzer warnen 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>
Die min- und max-Attribute
Die Eingabe minund maxdie Attribute geben die minimalen und maximalen Werte für ein Eingabefeld an.
Die Attribute minund maxfunktionieren mit den folgenden Eingabetypen: Zahl, Bereich, Datum, DateTime-Local, Month, Time und Week.
Tipp: Verwenden Sie die Attribute „max“ und „min“ zusammen, um einen Bereich gültiger Werte zu erstellen.
Beispiel
Legen Sie ein maximales Datum, ein minimales Datum und einen Bereich gültiger 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>
Das mehrfache Attribut
Das Eingabeattribut multiplegibt an, dass der Benutzer mehr als einen Wert in ein Eingabefeld eingeben darf.
Das multipleAttribut funktioniert mit den folgenden Eingabetypen: E-Mail und Datei.
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>
Das Musterattribut
Das Eingabeattribut patterngibt einen regulären Ausdruck an, gegen den der Wert des Eingabefelds beim Absenden des Formulars geprüft wird.
Das patternAttribut funktioniert mit den folgenden Eingabetypen: Text, Datum, Suche, URL, Tel, E-Mail und Passwort.
Tipp: Verwenden Sie das globale Titelattribut , um das Muster zu beschreiben, um 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 darf (keine Ziffern 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>
Das Platzhalterattribut
Das Eingabeattribut placeholdergibt 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 placeholderAttribut funktioniert mit den folgenden Eingabetypen: Text, Suche, URL, Tel, E-Mail und Passwort.
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>
Das erforderliche Attribut
Das Input- requiredAttribut gibt an, dass vor dem Absenden des Formulars ein Eingabefeld ausgefüllt werden muss.
Das requiredAttribut funktioniert mit den folgenden Eingabetypen: Text, Suche, URL, Tel, E-Mail, Passwort, Datumsauswahl, Nummer, Kontrollkästchen, Radio und Datei.
Beispiel
Ein erforderliches Eingabefeld:
<form>
<label for="username">Username:</label>
<input
type="text" id="username" name="username" required>
</form>
Das Schrittattribut
Das Eingabeattribut stepgibt die zulässigen Nummernintervalle für ein Eingabefeld an.
Beispiel: wenn step="3", gültige Zahlen könnten -3, 0, 3, 6 usw. sein.
Tipp: Dieses Attribut kann zusammen mit den Attributen „max“ und „min“ verwendet werden, um eine Reihe zulässiger Werte zu erstellen.
Das stepAttribut funktioniert mit den folgenden Eingabetypen: Zahl, Bereich, Datum, DateTime-Local, Month, Time und Week.
Beispiel
Ein Eingabefeld mit einem bestimmten zulässigen Nummernintervall:
<form>
<label for="points">Points:</label>
<input
type="number" id="points" name="points" step="3">
</form>
Hinweis: Eingabebeschränkungen sind nicht narrensicher, und JavaScript bietet viele Möglichkeiten, illegale Eingaben hinzuzufügen. Um Eingaben sicher einzuschränken, muss diese auch vom Empfänger (dem Server) geprüft werden!
Das Autofokus-Attribut
Das Eingabeattribut autofocusgibt an, dass ein Eingabefeld automatisch den Fokus erhalten soll, wenn die Seite geladen wird.
Beispiel
Lassen Sie das Eingabefeld "Vorname" 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>
Die Attribute height und width
Die Eingabe heightund widthdie Attribute geben die Höhe und Breite eines <input
type="image">Elements an.
Tipp: Geben Sie für Bilder immer sowohl die Höhen- als auch die Breitenattribute an. Wenn Höhe und Breite eingestellt 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. Der Effekt besteht darin, 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 Höhe und Breite:
<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>
Das Listenattribut
Das input - listAttribut bezieht sich auf ein <datalist>Element, das vordefinierte Optionen für ein <input>-Element enthält.
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>
Das Autocomplete-Attribut
Das Eingabeattribut autocompletegibt an, ob ein Formular oder ein Eingabefeld die automatische Vervollständigung ein- oder ausschalten soll.
Autocomplete ermöglicht es 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 autocompleteAttribut funktioniert mit <form>und den folgenden <input>Typen: Text, Suche, URL, Tel, E-Mail, Passwort, Datumsauswahl, Bereich und Farbe.
Beispiel
Ein HTML-Formular mit aktivierter und deaktivierter automatischer Vervollständigung für ein Eingabefeld:
<form action="/action_page.php" 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>
Tipp: In manchen Browsern müssen Sie dafür ggf. eine Autocomplete-Funktion aktivieren (siehe unter „Einstellungen“ im Menü des Browsers).
HTML-Übungen
HTML-Formular und Eingabeelemente
| Tag | Description |
|---|---|
| <form> | Defines an HTML form for user input |
| <input> | Defines an input control |
Eine vollständige Liste aller verfügbaren HTML-Tags finden Sie in unserer HTML-Tag-Referenz .