HTML Input Typen (engl.: HTML Input Types) in HTML bietet eine Vielzahl von Eingabetypen für Formulare, die es Entwicklern ermöglichen, verschiedene Arten von Benutzereingaben zu erfassen. Jeder Eingabetyp hat spezifische Eigenschaften und Funktionen, die ihn für bestimmte Zwecke geeignet machen. In diesem Artikel werden die gängigsten HTML-Eingabetypen beschrieben und deren Verwendung erläutert.
1. Grundlegende Eingabetypen
1.1. Text
Ein einfaches Textfeld für einzeilige Eingaben, ideal für Namen, Adressen und ähnliche Informationen.
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>1.2. Passwort
Ein Eingabefeld für Passwörter, bei dem die eingegebenen Zeichen maskiert werden.
<label for="password">Passwort:</label>
<input type="password" id="password" name="password" required>1.3. E-Mail
Ein Eingabefeld speziell für E-Mail-Adressen, das eine grundlegende Validierung ermöglicht.
<label for="email">E-Mail:</label>
<input type="email" id="email" name="email" required>1.4. Telefonnummer
Ein Eingabefeld für Telefonnummern, das eine einfache Validierung ermöglicht.
<label for="phone">Telefonnummer:</label>
<input type="tel" id="phone" name="phone" required>1.5. Textbereich
Ein mehrzeiliges Eingabefeld, ideal für längere Texte wie Nachrichten oder Kommentare.
<label for="message">Nachricht:</label>
<textarea id="message" name="message" rows="4" required></textarea>2. Auswahlmöglichkeiten
2.1. Radiobutton
Erlaubt dem Benutzer, eine Option aus einer Gruppe von Auswahlmöglichkeiten auszuwählen.
<label for="gender">Geschlecht:</label>
<input type="radio" id="male" name="gender" value="male"> Männlich
<input type="radio" id="female" name="gender" value="female"> Weiblich2.2. Checkbox
Eine Auswahloption, bei der der Benutzer mehrere Optionen gleichzeitig auswählen kann.
<label for="newsletter">Newsletter abonnieren:</label>
<input type="checkbox" id="newsletter" name="newsletter" value="yes"> Ja2.3. Dropdown-Liste
Ein Auswahlfeld, das eine Liste von Optionen anzeigt, aus der der Benutzer eine auswählen kann.
<label for="country">Land:</label>
<select id="country" name="country">
<option value="de">Deutschland</option>
<option value="at">Österreich</option>
<option value="ch">Schweiz</option>
</select>3. Besondere Eingabetypen
3.1. Datei-Upload
Ein Feld, das es Benutzern ermöglicht, eine Datei von ihrem Gerät hochzuladen.
<label for="file">Datei hochladen:</label>
<input type="file" id="file" name="file" required>3.2. Farbwahl
Ein Eingabefeld, das es Benutzern ermöglicht, eine Farbe aus einer Farbauswahl auszuwählen.
<label for="color">Wählen Sie eine Farbe:</label>
<input type="color" id="color" name="color">3.3. Datum
Ein Eingabefeld für die Auswahl eines Datums.
<label for="date">Datum:</label>
<input type="date" id="date" name="date" required>3.4. Uhrzeit
Ein Eingabefeld für die Auswahl einer Uhrzeit.
<label for="time">Uhrzeit:</label>
<input type="time" id="time" name="time" required>3.5. Datums- und Zeitbereich
Ein Eingabefeld für die Auswahl eines Zeitraums mit Start- und Enddatum.
<label for="datetime">Datum und Uhrzeit:</label>
<input type="datetime-local" id="datetime" name="datetime" required>4. Schaltflächen
4.1. Absenden-Button
Ein Button, der das Formular absendet.
<input type="submit" value="Absenden">4.2. Zurücksetzen-Button
Ein Button, der alle Eingabewerte im Formular zurücksetzt.
<input type="reset" value="Zurücksetzen">4.3. Benutzerdefinierter Button
Ein Button, der benutzerdefinierte Aktionen ausführen kann, ohne das Formular abzusenden.
<button type="button" onclick="alert('Hallo!')">Klicken Sie hier</button>5. Beispiel für ein vollständiges Formular mit verschiedenen Input-Typen
Hier ist ein Beispiel für ein vollständiges HTML-Formular, das verschiedene Eingabetypen kombiniert:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Beispiel Formular</title>
</head>
<body>
<h1>Kontaktformular</h1>
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<br>
<label for="email">E-Mail:</label>
<input type="email" id="email" name="email" required>
<br>
<label for="phone">Telefonnummer:</label>
<input type="tel" id="phone" name="phone">
<br>
<label for="message">Nachricht:</label>
<textarea id="message" name="message" rows="4" required></textarea>
<br>
<label for="gender">Geschlecht:</label>
<input type="radio" id="male" name="gender" value="male"> Männlich
<input type="radio" id="female" name="gender" value="female"> Weiblich
<br>
<label for="country">Land:</label>
<select id="country" name="country">
<option value="de">Deutschland</option>
<option value="at">Österreich</option>
<option value="ch">Schweiz</option>
</select>
<br>
<label for="file">Datei hochladen:</label>
<input type="file" id="file" name="file">
<br>
<input type="submit" value="Absenden">
</form>
</body>
</html>Häufig gestellte Fragen
Welche Eingabetypen sind in HTML verfügbar?
Zu den verfügbaren Eingabetypen gehören text, password, email, tel, textarea, radio, checkbox, select, file, color, date, time, datetime-local, und viele mehr.
Wie füge ich Validierung zu Eingabefeldern hinzu?
Sie können Attribute wie required, minlength, maxlength und pattern verwenden, um Validierungsregeln für Eingabefelder festzulegen.
Was ist der Unterschied zwischen Radiobuttons und Checkboxen?
Radiobuttons erlauben es Benutzern, nur eine Option aus einer Gruppe auszuwählen, während Checkboxen es Benutzern ermöglichen, mehrere Optionen gleichzeitig auszuwählen.
Wie kann ich ein Datei-Upload-Feld erstellen?
Verwenden Sie das <input type="file">-Element, um ein Datei-Upload-Feld in Ihr Formular einzufügen.
Was sind die Vorteile der Verwendung von spezifischen Eingabetypen wie email und date?
Diese spezifischen Eingabetypen bieten eine eingebaute Validierung und Benutzeroberfläche, die die Dateneingabe für den Benutzer erleichtert und die Wahrscheinlichkeit von Fehlern verringert.