HTML-Tags: Formulare

Formulare dienen der Übermittlung von Daten, z.B. bei einer Bestellung.
Sie können sowohl sichtbare als auch nicht sichtbare Elemente enthalten.

Die Verarbeitung der gesendeten Daten erfolgt serverseitig und wird in diesem Kurs nicht behandelt1.
Eine Simulation der Verarbeitung findet ihr hier, an diese URL werden alle Formulare in diesem Kurs gesendet.

1 das würde eindeutig den Rahmen sprengen ;-)

Einfaches Formular

Ein Formular wird mit dem <form>-Tag eröffnet. Zwingend benötigt werden die Attribute action (wohin wird das Formular gesendet?) und method (wie werden die Daten übertragen — GET oder POST?). 

<form
  action="http://mi-teichmann.de/formVars.php"  <!-- Ziel-URL -->
  method="POST"                                   <!-- GET oder POST -->
  target="_blank"                                 <!-- Antwort in neuem Tab -->
>
  Name: <br>
  <input
    type="text"
    name="name"                   <!-- Schlüssel im gesendeten Datensatz -->
    placeholder="dein Name"      <!-- Hinweistext im leeren Feld -->
    size="60"                    <!-- sichtbare Breite in Zeichen -->
    maxlength="100"             <!-- max. Anzahl Zeichen -->
  >

  Nachricht: <br>
  <textarea
    name="message"
    rows="5"                    <!-- sichtbare Höhe in Zeilen -->
    cols="60"
    placeholder="deine Nachricht"
  ></textarea>

  <input type="submit" value="Abschicken">
</form>
Name:

Nachricht:

Formular-Elemente

Es gibt außer <input type="text"> und <textarea> noch diverse andere Eingabefelder.

In HTML5 sind diverse types hinzugekommen, z.B. email, date, number…
Ältere Browser, die diese Types noch nicht unterstützen, behandeln diese wie <input type="text">.
Eine vollständige Liste findet sich z.B. hier.

Verstecktes Feld mit <input type="hidden">
sieht man nicht ;-)
Textfeld einzeilig mit <input type="text">
Passwort-Eingabe mit <input type="password">
Entweder-Oder-Auswahl mit <input type="radio">
Häkchen setzen mit <input type="checkbox">
Datei-Upload mit <input type="file">
Email-Adresse mit <input type="email">
Farbe mit <input type="color">
Datum mit <input type="date">
Uhrzeit mit <input type="time">
Zahl mit <input type="number">
Auswahl-Bereich mit <input type="range">
Dropdown mit <select>
Mehrzeiliges Eingabefeld mit <textarea>
Buttons zum Absenden mit <button> oder <input type="submit"> sowie zum Zurücksetzen mit <input type="reset">