HTML Formular Elemente (engl.: HTML Form Elements) bestehen aus verschiedenen Elementen, die es Benutzern ermöglichen, Informationen einzugeben und an einen Server zu senden. Jedes Element hat spezifische Funktionen und Eigenschaften. In diesem Artikel werden die gängigsten HTML-Formularelemente und deren Verwendung erläutert.
1. Eingabefelder
1.1. Textfeld
Ein einfaches Eingabefeld für einzeiligen Text. Es wird häufig für Namen, E-Mail-Adressen und ähnliche Informationen verwendet.
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>1.2. Passwortfeld
Ein Eingabefeld für Passwörter. Die eingegebenen Zeichen werden maskiert.
<label for="password">Passwort:</label>
<input type="password" id="password" name="password" required>1.3. E-Mail-Feld
Ein Eingabefeld für E-Mail-Adressen, das eine grundlegende Validierung der E-Mail-Adresse ermöglicht.
<label for="email">E-Mail:</label>
<input type="email" id="email" name="email" required>1.4. Telefonnummer
Ein Eingabefeld, das für Telefonnummern verwendet wird und eine einfache Validierung ermöglicht.
<label for="phone">Telefonnummer:</label>
<input type="tel" id="phone" name="phone" required>1.5. Textbereich
Ein mehrzeiliges Eingabefeld für längere Texte, wie Nachrichten oder Kommentare.
<label for="message">Nachricht:</label>
<textarea id="message" name="message" rows="4" required></textarea>2. Auswahlfelder
2.1. Radiobuttons
Eine Gruppe von Auswahlmöglichkeiten, von denen der Benutzer eine auswählen kann.
<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. Checkboxen
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. Spezielle Eingabefelder
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. Datumsfeld
Ein Eingabefeld für die Auswahl eines Datums.
<label for="date">Datum:</label>
<input type="date" id="date" name="date" required>3.4. Zeitfeld
Ein Eingabefeld für die Auswahl einer Uhrzeit.
<label for="time">Uhrzeit:</label>
<input type="time" id="time" name="time" 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 die 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
Hier ist ein Beispiel für ein vollständiges HTML-Formular, das verschiedene Elemente 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="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>
<input type="submit" value="Absenden">
</form>
</body>
</html>Häufig gestellte Fragen
Welche Arten von Eingabefeldern gibt es in HTML-Formularen?
Zu den gängigen Eingabefeldern gehören Textfelder, Passwortfelder, E-Mail-Felder, Telefonnummern, Textbereiche, Radiobuttons, Checkboxen und Dropdown-Listen.
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 füge ich ein Datei-Upload-Feld zu meinem Formular hinzu?
Verwenden Sie das <input type="file">-Element, um ein Datei-Upload-Feld zu erstellen.
Was bewirken die required- und placeholder-Attribute?
Das required-Attribut macht ein Eingabefeld erforderlich, während das placeholder-Attribut einen Platzhaltertext anzeigt, solange das Feld leer ist.
Kann ich benutzerdefinierte Schaltflächen in HTML-Formularen verwenden?
Ja, Sie können das <button>-Element verwenden, um benutzerdefinierte Schaltflächen zu erstellen, die verschiedene Aktionen ausführen können.