HTML Forms

Allgemeines

Ein HTML-Formular wird verwendet, um Benutzereingaben zu sammeln. Die Benutzereingabe wird meistens zur Verarbeitung an einen Server gesendet.

Allgemein

Das HTML-Element <form> wird verwendet, um ein HTML-Formular für Benutzereingaben zu erstellen:

‎

<form>
.
Formelemente
.
</form>
‎

Das <form>-Element ist ein Container für verschiedene Arten von Eingabeelementen, wie z. B.: Textfelder, Kontrollkästchen, Optionsfelder, Senden-Schaltflächen usw.

Folgende, verschiedene HTML-Formularelemente sind innerhalb des <form>-Element möglich (unvollständig)

HTML-Form-Elemente

<input>

<select>

<select id="" name="">
  <option value="value 1">value 1</option>
  <option value="value 2">value 2</option>
  <option value="value 3">value 3</option>
</select>

<textarea>

<textarea name="message" rows="10" cols="30">
</textarea>

Vorlage

HTML

alle häufig verwendeten sichtbaren Elemente

<form action="/action_page.php">
    <label for="textfeld">Textfeld</label><br>
    <input type="text" id="text" name="Textfeld" value="text"><br>
    <label for="email">E-Mail</label><br>
    <input type="email">
    <label for="telephone">Telefonnummer</label><br>
    <input type="tel">
    <label for="checkbox">Checkbox</label><br>
    <input type="checkbox">
    <label for="radiobutton">Radiobutton</label><br>
    <input type="radio">
    <label for="Range">Range Slider</label><br>
    <input type="range">
    <label for="fileupload">Dateiupload</label><br>
    <input type="file">
    <input type="submit" value="Submit">
    <input type="reset">
</form>

mit Gruppierung via Fieldset

<form action="/action_page.php">
  <fieldset>
    <legend>Personalia:</legend>
    <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">
  </fieldset>
</form>