HTML-Formulare ermöglichen es Benutzern, Daten auf einer Webseite einzugeben. Beispiele sind Kontaktformulare, Registrierungen, Suchfelder und Umfragen.
Ein Formular wird mit dem Element <form> erstellt. Die Eingabefelder befinden sich innerhalb dieses Elements.
Mit <input> können verschiedene Eingabefelder erstellt werden. Das Element <label> beschreibt das jeweilige Eingabefeld.
<form>
<label for="benutzer">Name:</label>
<input type="text"
id="benutzer"
name="benutzer">
<label for="passwort">Passwort:</label>
<input type="password"
id="passwort"
name="passwort">
</form>Ein Passwortfeld verdeckt die eingegebenen Zeichen. Die Daten werden in diesem Beispiel nicht gesendet.
Das Attribut type bestimmt, welche Art von Eingabefeld angezeigt wird.
<input type="text">
<input type="email">
<input type="number">
<input type="date">
<input type="color">
<input type="range">Checkboxen ermöglichen die Auswahl mehrerer Optionen gleichzeitig. Sie werden mit type="checkbox" erstellt.
<label>
<input type="checkbox" name="html">
HTML
</label>
<label>
<input type="checkbox" name="css">
CSS
</label>Es können mehrere Kontrollkästchen gleichzeitig aktiviert werden.
Radio-Buttons werden verwendet, wenn nur eine Option aus einer Gruppe ausgewählt werden soll. Alle Optionen einer Gruppe besitzen denselben name-Wert.
<label>
<input type="radio"
name="level"
value="anfaenger">
Anfänger
</label>
<label>
<input type="radio"
name="level"
value="fortgeschritten">
Fortgeschritten
</label>Mit <select> wird eine Auswahlliste erstellt. Die einzelnen Optionen werden mit <option> definiert.
<select name="sprache">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="php">PHP</option>
</select>Mit <textarea> können längere Texte oder Nachrichten eingegeben werden.
<textarea
name="nachricht"
rows="5"
cols="40"
placeholder="Nachricht schreiben"
></textarea>Mit <button> oder <input> können Schaltflächen erstellt werden. Der Typ submit sendet ein Formular. Der Typ reset setzt Eingabefelder zurück.
<form>
<input type="text" name="vorname">
<button type="submit">
Absenden
</button>
<button type="reset">
Zurücksetzen
</button>
</form>Bei der GET-Methode werden die Formulardaten als Parameter an die URL angehängt. GET eignet sich beispielsweise für Suchformulare. Vertrauliche Daten sollten nicht über GET übertragen werden.
<form method="get" action="formulare.php">
<input type="text" name="name">
<input type="text" name="stadt">
<button type="submit"
name="get_senden"
value="1">
Mit GET senden
</button>
</form>Bei der POST-Methode werden die Daten im HTTP-Anfragekörper übertragen und erscheinen nicht als URL-Parameter. POST wird häufig für Kontaktformulare und Registrierungen verwendet.
POST verschlüsselt die Daten nicht automatisch. Für eine sichere Übertragung ist HTTPS notwendig.
<form method="post" action="formulare.php">
<input type="text" name="name">
<input type="email" name="email">
<textarea name="nachricht"></textarea>
<button type="submit"
name="post_senden"
value="1">
Mit POST senden
</button>
</form>| Eigenschaft | GET | POST |
|---|---|---|
| Datenübertragung | URL-Parameter | HTTP-Anfragekörper |
| In der URL sichtbar | Ja | Nein |
| Typische Verwendung | Suche und Filter | Kontakt und Registrierung |
| Als Lesezeichen speicherbar | Ja, mit Parametern | Nicht direkt |
| Automatische Verschlüsselung | Nein | Nein |
| Element / Attribut | Bedeutung |
|---|---|
| <form> | Erstellt ein Formular |
| <input> | Eingabefeld |
| <label> | Beschriftung eines Feldes |
| <select> | Auswahlliste |
| <option> | Eintrag einer Auswahlliste |
| <textarea> | Mehrzeiliges Textfeld |
| <button> | Schaltfläche |
| method | Übertragungsmethode GET oder POST |
| action | Zieladresse des Formulars |
| required | Pflichtfeld |
Mit welchem HTML-Element wird ein Formular erstellt?
<form></form>Erstellen Sie ein Textfeld für die Eingabe eines Namens.
<input type="text" name="name">Erstellen Sie ein Feld für die Eingabe einer E-Mail-Adresse.
<input type="email" name="email">Welcher Eingabetyp wird für Passwörter verwendet?
<input type="password">Erstellen Sie eine Checkbox für HTML-Kenntnisse.
<label>
<input type="checkbox" name="html">
HTML
</label>Erstellen Sie zwei Radio-Buttons für Anfänger und Fortgeschrittene.
<input type="radio"
name="level"
value="anfaenger">
<input type="radio"
name="level"
value="fortgeschritten">Welches HTML-Element wird für Auswahllisten verwendet?
<select>
<option>HTML</option>
</select>Erstellen Sie ein mehrzeiliges Eingabefeld für Nachrichten.
<textarea
name="nachricht"
rows="5">
</textarea>Welche Methode überträgt Daten als URL-Parameter?
GETWelche Methode wird häufig für Kontaktformulare und Registrierungen verwendet?
POSTWelches Attribut macht ein Formularfeld zu einem Pflichtfeld?
requiredGeben Sie ein Beispiel für ein Formular an, das die POST-Methode nutzt.
<form method="post">
...
</form>HTML-Formulare ermöglichen die Eingabe und Übertragung von Benutzerdaten. Mit verschiedenen Eingabeelementen können Texte, Zahlen und Auswahlmöglichkeiten erfasst werden. Die Übertragung erfolgt häufig mit den Methoden GET oder POST. PHP kann diese Daten auf dem Server verarbeiten.