Formulare
Formulare sind ein wesentliches Element jeder Webseite, die Interaktion mit Benutzern erfordert. Sie ermöglichen es, Daten vom Benutzer zu erfassen und an einen Server zu senden.
6.1. Formularelemente
Ein Formular wird mit dem <form>-Tag erstellt. Innerhalb des Formulars können verschiedene Formularelemente wie Textfelder, Radiobuttons, Checkboxen, Schaltflächen usw. enthalten sein.
Grundlegendes Formular:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grundlegendes Formular</title>
</head>
<body>
<form action="submit.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">E-Mail:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Absenden">
</form>
</body>
</html>
6.2. Verschiedene Formularelemente
Textfelder
<input type="text">: Ein einzeiliges Textfeld.<textarea>: Ein mehrzeiliges Textfeld.
Beispiel:
<label for="nachricht">Nachricht:</label>
<textarea id="nachricht" name="nachricht" rows="4" cols="50"></textarea><br><br>
Radiobuttons und Checkboxen
<input type="radio">: Ein Radiobutton, der aus einer Gruppe von Optionen ausgewählt werden kann.<input type="checkbox">: Eine Checkbox, die ein- oder ausgeschaltet werden kann.
Beispiel:
<p>Geschlecht:</p>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Männlich</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Weiblich</label><br><br>
<p>Interessen:</p>
<input type="checkbox" id="sport" name="interest" value="sport">
<label for="sport">Sport</label><br>
<input type="checkbox" id="music" name="interest" value="music">
<label for="music">Musik</label><br><br>
Dropdown-Listen
<select>: Eine Dropdown-Liste.<option>: Ein Element innerhalb der Dropdown-Liste.
Beispiel:
<label for="land">Land:</label>
<select id="land" name="land">
<option value="de">Deutschland</option>
<option value="at">Österreich</option>
<option value="ch">Schweiz</option>
</select><br><br>
6.3. Formularattribute
Formulare können verschiedene Attribute haben, die deren Verhalten steuern:
action: Die URL, an die das Formular gesendet wird.method: Die HTTP-Methode, die zum Senden des Formulars verwendet wird (GEToderPOST).name: Der Name des Formulars.id: Die ID des Formulars.
Beispiel:
<form action="submit.php" method="post" name="contactForm" id="contactForm">
<!-- Formularelemente hier -->
</form>
6.4. Validierung und Barrierefreiheit
Client-seitige Validierung
HTML5 bietet eingebaute Validierung für Formularelemente, um sicherzustellen, dass Benutzer gültige Daten eingeben.
Beispiele:
required: Macht ein Feld obligatorisch.pattern: Definiert ein reguläres Ausdrucksmuster, dem der Eingabewert entsprechen muss.minundmax: Legt minimale und maximale Werte für numerische Eingaben fest.
Beispiel:
<label for="alter">Alter:</label>
<input type="number" id="alter" name="alter" min="18" max="99" required><br><br>Barrierefreiheit
Verwende das label-Tag und aria-Attribute, um die Barrierefreiheit zu verbessern.
Beispiel:
<label for="telefon">Telefon:</label>
<input type="tel" id="telefon" name="telefon" aria-required="true"><br><br>