HTML -Formulare
Ein HTML-Formular wird verwendet, um Benutzereingaben zu sammeln. Die Benutzereingabe wird meistens zur Verarbeitung an einen Server gesendet.
Beispiel
Das <form>-Element
Das HTML <form>-Element wird verwendet, um ein HTML-Formular für Benutzereingaben zu erstellen:
<form>
.
form elements
.
</form>
Das <form>Element ist ein Container für verschiedene Arten von Eingabeelementen, wie z. B.: Textfelder, Kontrollkästchen, Optionsfelder, Senden-Schaltflächen usw.
Alle verschiedenen Formularelemente werden in diesem Kapitel behandelt: HTML-Formularelemente .
Das <input>-Element
Das HTML- <input>Element ist das am häufigsten verwendete Formularelement.
Ein <input>Element kann je nach type
Attribut auf viele Arten dargestellt werden.
Hier sind einige Beispiele:
| Typ | Beschreibung |
|---|---|
| <Eingabetyp="text"> | Zeigt ein einzeiliges Texteingabefeld an |
| <input type="radio"> | Zeigt ein Optionsfeld an (zur Auswahl einer von vielen Auswahlmöglichkeiten) |
| <input type="checkbox"> | Zeigt ein Kontrollkästchen an (zur Auswahl von null oder mehr aus vielen Auswahlmöglichkeiten) |
| <input type="submit"> | Zeigt eine Senden-Schaltfläche an (zum Senden des Formulars) |
| <Eingabetyp="Schaltfläche"> | 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">First name:</label><br>
<input
type="text" id="fname" name="fname"><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname">
</form>
So wird der obige HTML-Code in einem Browser angezeigt:
Hinweis: Das Formular selbst ist nicht sichtbar. Beachten Sie auch, dass die Standardbreite eines Eingabefelds 20 Zeichen beträgt.
Das <label>-Element
Beachten Sie die Verwendung des <label>Elements im obigen Beispiel.
Das <label>Tag definiert eine Bezeichnung für viele Formularelemente.
Das <label>Element ist für Benutzer von Screenreadern nützlich, da der Screenreader die Bezeichnung laut vorliest, wenn der Benutzer sich auf das Eingabeelement konzentriert.
Das <label>Element hilft auch Benutzern, die Schwierigkeiten haben, auf sehr kleine Bereiche (z. B. Optionsfelder oder Kontrollkästchen) zu klicken – denn wenn der Benutzer auf den Text innerhalb des <label>Elements klickt, wird das Optionsfeld/Kontrollkästchen umgeschaltet.
Das forAttribut des <label>Tags sollte gleich dem idAttribut des <input>
Elements sein, um sie miteinander zu verbinden.
Radio Knöpfe
Das <input type="radio">definiert ein Optionsfeld.
Radio-Buttons ermöglichen es einem Benutzer, EINE aus einer begrenzten Anzahl von Auswahlmöglichkeiten auszuwählen.
Beispiel
Ein Formular mit Radiobuttons:
<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>
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 .
Kontrollkästchen ermöglichen es einem Benutzer, NULL oder MEHR Optionen aus einer begrenzten Anzahl von Auswahlmöglichkeiten auszuwä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>
So wird der obige HTML-Code in einem Browser angezeigt:
Der Submit-Button
Der <input type="submit">definiert eine Schaltfläche zum Senden der Formulardaten an einen Formularhandler.
Der Form-Handler ist typischerweise eine Datei auf dem Server mit einem Skript zur Verarbeitung von Eingabedaten.
Der Formular-Handler wird im action
Attribut des Formulars angegeben.
Beispiel
Ein Formular mit einem Senden-Button:
<form action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" name="fname"
value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
So wird der obige HTML-Code in einem Browser angezeigt:
Das Namensattribut für <input>
Beachten Sie, dass jedes Eingabefeld ein namezu übermittelndes Attribut haben muss.
Wird das nameAttribut weggelassen, wird der Wert des Eingabefeldes überhaupt nicht gesendet.
Beispiel
In diesem Beispiel wird der Wert des Eingabefelds "Vorname" nicht übermittelt:
<form action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" value="John"><br><br>
<input type="submit" value="Submit">
</form>