HTML -Formulare
Zum Sammeln von Benutzereingaben wird ein HTML-Formular verwendet. Die Benutzereingaben werden meist zur Verarbeitung an einen Server gesendet.
Das <form>-Element
Das HTML-Element <form> wird verwendet, um ein HTML-Formular für Benutzereingaben zu erstellen:
<form>
.
form elements
.
</form>
Das Element <form> ist ein Container für verschiedene Arten von Eingabeelementen, wie zum Beispiel: Textfelder, Kontrollkästchen, Optionsfelder, Schaltflächen zum Senden usw.
Alle verschiedenen Formularelemente werden in diesem Kapitel behandelt: HTML-Formularelemente.
Das <input>-Element
Das HTML-Element <input> ist das am häufigsten verwendete Formularelement.
Ein <input>-Element kann abhängig vom Attribut type auf viele Arten angezeigt werden.
Hier sind einige Beispiele:
| Typ | Beschreibung |
|---|---|
| <input type="text"> | Zeigt ein einzeiliges Texteingabefeld an |
| <input type="radio"> | Zeigt ein Optionsfeld an (zur Auswahl einer von vielen Möglichkeiten) |
| <input type="checkbox"> | Zeigt ein Kontrollkästchen an (zur Auswahl von null oder mehr aus vielen Auswahlmöglichkeiten) |
| <input type="submit"> | Zeigt eine Schaltfläche „Senden“ an (zum Absenden des Formulars) |
| <input type="button"> | Zeigt eine anklickbare Schaltfläche an |
Alle verschiedenen Eingabetypen werden in diesem Kapitel behandelt: HTML-Eingabetypen.
Textfelder
Der <input type="text"> definiert ein einzeiliges Eingabefeld für die Texteingabe.
Beispiel
Ein Formular mit Eingabefeldern für Text:
<form>
<label for="fname">Vorname:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Nachname:</label><br>
<input type="text" id="lname" name="lname">
</form>
Try it Yourself »
So wird der obige HTML-Code in einem Browser angezeigt:
Hinweis: Das Formular selbst ist nicht sichtbar. Beachten Sie außerdem, dass die Standardbreite eines Eingabefelds 20 Zeichen beträgt.
Das <label>-Element
Beachten Sie die Verwendung des Elements <label> im obigen Beispiel.
Das Tag <label> definiert eine Beschriftung für viele Formularelemente.
Das Element ist für Benutzer von Screenreadern nützlich, da der Screenreader die Beschriftung laut vorliest, wenn der Benutzer sich auf das Eingabeelement konzentriert.
Das Element <label> hilft auch Benutzern, die Schwierigkeiten haben, auf sehr kleine Bereiche (z. B. Optionsfelder oder Kontrollkästchen) zu klicken – weil der Benutzer auf den darin enthaltenen Text klickt das Element <label> schaltet das Optionsfeld/Kontrollkästchen um.
Das for Attribut des <label> -Tags sollte dem entsprechen id-Attribut des <input>-Elements, um sie miteinander zu verbinden.
Radio Knöpfe
Der <input type="radio"> definiert ein Optionsfeld.
Mit Optionsschaltflächen kann ein Benutzer EINE aus einer begrenzten Anzahl von Optionen auswählen.
Beispiel
Ein Formular mit Optionsfeldern:
<p>Choose your favorite Web language:</p>
<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
Try it Yourself »
So wird der obige HTML-Code in einem Browser angezeigt:
Wählen Sie Ihre bevorzugte Websprache:
Kontrollkästchen
Der <input type="checkbox"> definiert ein Kontrollkästchen.
Mit Kontrollkästchen kann ein Benutzer NULL oder MEHR Optionen aus einer begrenzten Anzahl von Optionen auswählen.
Beispiel
Ein Formular mit Kontrollkästchen:
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2">I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
Try it Yourself »
So wird der obige HTML-Code in einem Browser angezeigt:
Der Senden-Button
Der <input type="submit"> definiert eine Schaltfläche zum Senden der Formulardaten an einen Formularhandler.
Der Formular-Handler ist normalerweise eine Datei auf dem Server mit einem Skript zur Verarbeitung von Eingabedaten.
Der Formularhandler wird im Attribut action des Formulars angegeben.
Beispiel
Ein Formular mit der Schaltfläche „Senden“:
<form action="/action_page.html">
<label for="fname">Vorname:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Nachname:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
Try it Yourself »
So wird der obige HTML-Code in einem Browser angezeigt:
Das Namensattribut für <input>
Beachten Sie, dass jedes Eingabefeld zum Senden ein name-Attribut haben muss.
Wenn das Attribut name weggelassen wird, wird der Wert des Eingabefelds überhaupt nicht gesendet.
Beispiel
In diesem Beispiel wird der Wert des Eingabefelds „Vorname“ nicht übermittelt:
<form action="/action_page.html">
<label for="fname">Vorname:</label><br>
<input type="text" id="fname" value="John"><br><br>
<input type="submit" value="Submit">
</form>
Try it Yourself »
