Das HTML-Element <input> ermöglicht das Erstellen verschiedener Formularelemente zur Erfassung von Benutzereingaben. Das Verhalten und das Erscheinungsbild dieser Steuerelemente können mit unterschiedlichen Attributen angepasst werden. Im Folgenden werden einige häufig verwendete Attribute vorgestellt:

value

Das Attribut value wird verwendet, um den Anfangswert des <input>-Elements festzulegen. Der genaue Wert hängt vom Eingabetyp ab:

• Für Schaltflächen ( type="button" , type="reset" , type="submit" ) definiert es den auf der Schaltfläche angezeigten Text;

• Für Textfelder ( type="text" ) und Passwortfelder ( type="password" ) legt es den Standardwert des Eingabefeldes fest;

• Für Kontrollkästchen ( type="checkbox" ) und Optionsfelder ( type="radio" ) bestimmt es den mit der Eingabe verknüpften Wert.

Hinweis

Das Attribut value kann nicht mit <input type="file"> verwendet werden.

autofocus

Das Attribut autofocus legt fest, dass das Eingabefeld beim Laden der Webseite automatisch den Fokus erhält. Beim Laden der Seite wird das Eingabefeld automatisch ausgewählt, sodass der Benutzer sofort mit der Eingabe beginnen kann, ohne zuerst in das Feld klicken zu müssen.

Hinweis

Autofocus funktioniert hier nicht, da die Seite beim Klicken auf den "Run Code"-Button nicht neu geladen wird.

required

Das Attribut required wird verwendet, um ein Eingabefeld als Pflichtfeld zu kennzeichnen. Es legt fest, dass das Eingabefeld ausgefüllt werden muss, bevor das Formular abgeschickt werden kann. Versucht der Benutzer, das Formular abzusenden, ohne das erforderliche Feld auszufüllen, erhält er eine Validierungsfehlermeldung, die darauf hinweist, dass das Feld erforderlich ist.

placeholder

Das Attribut placeholder bietet dem Benutzer einen Hinweis oder ein Beispiel für den erwarteten Eingabewert. Ein kurzer Text wird im Eingabefeld angezeigt, bevor der Benutzer einen Wert eingibt. Dies ist besonders nützlich für Felder, die eine bestimmte Formatierung erfordern, wie zum Beispiel Telefonnummern oder Kreditkartennummern.

Hinweis

In den obigen Beispielen werden verschiedene type-Attribute für die <input>-Elemente verwendet, was ihr Aussehen und ihre Funktionalität erheblich beeinflusst. Im nächsten Kapitel werden Sie verschiedene Eingabetypen näher kennenlernen.