HTML Formulare sind grundlegende Bestandteile von Webseiten, die es Benutzern ermöglichen, Informationen einzugeben und an einen Server zu senden. Formulare werden häufig für Anmeldungen, Suchanfragen, Feedback und viele andere Interaktionen verwendet. In diesem Artikel erfahren Sie, wie Sie HTML-Formulare erstellen, die verschiedenen Eingabefelder nutzen und die Formulardaten an einen Server senden.
1. Grundstruktur eines HTML-Formulars
Ein HTML-Formular wird mit dem <form>-Tag erstellt. Innerhalb des Formulars können verschiedene Eingabefelder wie Textfelder, Dropdowns, Radiobuttons und Checkboxen hinzugefügt werden. Hier ist ein einfaches Beispiel für ein HTML-Formular:
<!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>
<input type="submit" value="Absenden">
</form>
</body>
</html>2. Wichtige Attribute von Formularelementen
- action: Gibt die URL an, an die die Formulardaten gesendet werden.
- method: Bestimmt die HTTP-Methode (z. B. GET oder POST), die beim Senden der Daten verwendet wird.
- name: Ein eindeutiger Bezeichner für jedes Eingabefeld, der verwendet wird, um die Daten auf dem Server zu verarbeiten.
- required: Gibt an, dass das Feld ausgefüllt werden muss, bevor das Formular abgeschickt wird.
3. Arten von Eingabefeldern
HTML bietet verschiedene Eingabefelder, die Sie in Ihren Formularen verwenden können:
| Eingabefeld | HTML-Tag | Beschreibung |
|---|---|---|
| Textfeld | <input type="text"> | Eingabefeld für einzeiligen Text |
<input type="email"> | Eingabefeld für eine E-Mail-Adresse | |
| Passwort | <input type="password"> | Eingabefeld für Passwörter (versteckt) |
| Radio-Buttons | <input type="radio"> | Auswahlfeld für mehrere Optionen |
| Checkbox | <input type="checkbox"> | Mehrfachauswahlfeld |
| Dropdown | <select> | Auswahlmenü für vordefinierte Optionen |
| Textbereich | <textarea> | Eingabefeld für mehrzeiligen Text |
| Button | <button> | Ein benutzerdefinierter Button |
| Datei-Upload | <input type="file"> | Eingabefeld für Dateiupload |
Beispiel für verschiedene Eingabefelder:
<form action="/submit" method="post">
<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="newsletter">Newsletter abonnieren:</label>
<input type="checkbox" id="newsletter" name="newsletter" value="yes"> Ja
<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>4. Formulare validieren
Um sicherzustellen, dass die eingegebenen Daten korrekt sind, können Sie HTML-5-Attribute zur Validierung verwenden. Dazu gehören:
- required: Erforderliches Feld.
- minlength und maxlength: Mindest- bzw. Höchstlänge für Texteingaben.
- pattern: Regulärer Ausdruck zur Validierung des Eingabewerts.
Beispiel für Validierung:
<label for="username">Benutzername:</label>
<input type="text" id="username" name="username" minlength="3" maxlength="15" pattern="[A-Za-z0-9]+" required>Häufig gestellte Fragen
Wie sende ich die Daten eines Formulars?
Die Daten eines Formulars werden gesendet, indem der Benutzer auf den „Absenden“-Button klickt. Die Aktion wird an die im action-Attribut angegebene URL gesendet.
Was ist der Unterschied zwischen GET und POST?
GET sendet die Formulardaten in der URL, während POST die Daten im HTTP-Body sendet. GET ist für einfache Anfragen geeignet, während POST für die Übertragung sensibler Daten verwendet wird.
Wie kann ich sicherstellen, dass ein Feld ausgefüllt wird?
Sie können das required-Attribut verwenden, um sicherzustellen, dass das Feld ausgefüllt wird, bevor das Formular gesendet wird.
Kann ich mehrere Formulare auf einer Seite haben?
Ja, Sie können mehrere Formulare auf einer Seite haben, solange jedes Formular ein einzigartiges action-Attribut hat.
Wie validiere ich Formulardaten auf der Serverseite?
Die Validierung auf der Serverseite erfolgt in der Regel durch Programmiersprachen wie PHP, Python oder JavaScript. Es ist wichtig, die Daten zu validieren, um sicherzustellen, dass sie den Erwartungen entsprechen und um Sicherheitsrisiken zu vermeiden.