HTML Input Attribute (engl.: HTML Input Attributs) erweitern die Funktionalität von Eingabefeldern in Formularen. Sie ermöglichen Entwicklern, spezifische Eigenschaften und Verhaltensweisen für jedes Eingabefeld festzulegen. In diesem Artikel werden die wichtigsten HTML-Input-Attribute beschrieben und deren Verwendung erläutert.
1. Allgemeine Attribute
1.1. type
Definiert den Typ des Eingabefelds, z.B. text, password, email, checkbox, usw.
<input type="text" name="username">1.2. name
Ein eindeutiger Name für das Eingabefeld, der beim Senden des Formulars verwendet wird.
<input type="text" name="email">1.3. id
Ein eindeutiger Bezeichner für das Eingabefeld, der oft mit dem <label>-Tag verwendet wird, um eine Verbindung herzustellen.
<input type="text" id="name" name="name">
<label for="name">Name:</label>1.4. value
Setzt den vorab eingegebenen Wert für das Eingabefeld. Dies wird häufig für Buttons verwendet.
<input type="submit" value="Absenden">2. Sicherheits- und Zugänglichkeitsattribute
2.1. required
Kennzeichnet ein Eingabefeld als erforderlich, sodass das Formular nicht gesendet werden kann, wenn das Feld leer ist.
<input type="text" name="username" required>2.2. readonly
Macht ein Eingabefeld nur lesbar, sodass der Benutzer den Inhalt nicht ändern kann.
<input type="text" name="username" value="Benutzername" readonly>2.3. disabled
Deaktiviert ein Eingabefeld, sodass der Benutzer keine Eingaben vornehmen kann. Das Feld wird nicht beim Senden des Formulars berücksichtigt.
<input type="text" name="username" disabled>3. Validierungsattribute
3.1. minlength und maxlength
Bestimmen die Mindest- und Höchstanzahl von Zeichen, die der Benutzer eingeben kann.
<input type="text" name="password" minlength="8" maxlength="20">3.2. pattern
Legt ein reguläres Ausdrucksmuster fest, das der Benutzer eingeben muss, um die Eingabe als gültig zu betrachten.
<input type="text" name="zipcode" pattern="\d{5}" title="Bitte geben Sie eine 5-stellige Postleitzahl ein.">4. Layout- und Präsentationsattribute
4.1. placeholder
Zeigt einen Platzhaltertext im Eingabefeld an, der verschwindet, wenn der Benutzer mit der Eingabe beginnt.
<input type="text" name="username" placeholder="Geben Sie Ihren Benutzernamen ein">4.2. size
Bestimmt die Breite des Eingabefelds in Zeichen. Dieses Attribut ist jedoch nicht immer zuverlässig, da die tatsächliche Größe von CSS abhängt.
<input type="text" name="username" size="30">4.3. style
Erlaubt das Hinzufügen von CSS-Stilen direkt im HTML.
<input type="text" name="username" style="border: 1px solid #ccc;">5. Beispiel für ein Formular mit verschiedenen Input-Attributen
Hier ist ein Beispiel für ein vollständiges HTML-Formular, das verschiedene Eingabefelder mit Attributen kombiniert:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Beispiel Formular mit Input Attributen</title>
</head>
<body>
<h1>Registrierungsformular</h1>
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required placeholder="Geben Sie Ihren Namen ein">
<br>
<label for="email">E-Mail:</label>
<input type="email" id="email" name="email" required>
<br>
<label for="password">Passwort:</label>
<input type="password" id="password" name="password" minlength="8" required>
<br>
<label for="zipcode">Postleitzahl:</label>
<input type="text" id="zipcode" name="zipcode" pattern="\d{5}" title="Bitte geben Sie eine 5-stellige Postleitzahl ein." required>
<br>
<input type="submit" value="Registrieren">
</form>
</body>
</html>Häufig gestellte Fragen
Was ist der Zweck des placeholder-Attributs?
Das placeholder-Attribut zeigt einen kurzen Hinweistext im Eingabefeld an, der dem Benutzer anzeigt, was in das Feld eingegeben werden soll.
Wie kann ich sicherstellen, dass ein Feld ausgefüllt werden muss?
Sie können das required-Attribut verwenden, um sicherzustellen, dass das Eingabefeld nicht leer bleibt.
Was bewirken die Attribute minlength und maxlength?
Diese Attribute legen die Mindest- und Höchstanzahl von Zeichen fest, die der Benutzer in ein Eingabefeld eingeben kann.
Was ist der Unterschied zwischen readonly und disabled?
Das readonly-Attribut ermöglicht es Benutzern, den Inhalt zu sehen, aber nicht zu bearbeiten, während das disabled-Attribut das Feld vollständig deaktiviert, sodass der Benutzer keine Interaktion damit hat.
Kann ich CSS-Stile auf Eingabefelder anwenden?
Ja, Sie können das style-Attribut verwenden oder CSS-Klassen anwenden, um das Aussehen der Eingabefelder anzupassen.