TAG 2 · HTML

HTML: Formulare

Mit Formularen können Benutzer Informationen auf einer Website eingeben. HTML stellt dafür verschiedene Eingabefelder wie Textfelder, Zahlenfelder, Uhrzeitfelder und Checkboxen zur Verfügung.

1) Ein einfaches Formular

Hier kannst du ein vollständiges Formular ausprobieren:

2) Das <form>-Element

Das gesamte Formular wird mit <form> und </form> umschlossen. 

<form action="#" method="get">

  

</form>

action gibt an, wohin die Formulardaten gesendet werden. Mit method="get" werden die Daten über die URL übertragen.

3) Beschriftungen mit <label>

Ein <label> beschreibt, wofür ein Eingabefeld verwendet wird. 

<label for="name">Name:</label>

<input
  type="text"
  id="name"
  name="name"
>

Das for-Attribut des Labels sollte zum id-Attribut des Eingabefeldes passen.

4) Das <input>-Element

Mit <input> können verschiedene Arten von Eingabefeldern erstellt werden. Welche Art verwendet wird, bestimmt type.

type="text" Eingabe von normalem Text.
type="number" Eingabe einer Zahl.
type="time" Auswahl einer Uhrzeit.
type="checkbox" Eine Option kann an- oder abgewählt werden.

5) Textfeld

Für normalen Text kannst du type="text" verwenden. 

<input
  type="text"
  name="text"
  placeholder="Schreibe etwas …"
>

Mit placeholder kannst du einen Hinweis anzeigen, solange das Feld noch leer ist.

6) Zahlenfeld

Mit type="number" kann der Benutzer eine Zahl eingeben. 

<input
  type="number"
  name="anzahl"
  min="0"
  max="10"
>

min legt den kleinsten erlaubten Wert fest. max legt den größten erlaubten Wert fest.

7) Uhrzeit auswählen

Für eine Uhrzeit kannst du type="time" verwenden. 

<input
  type="time"
  name="zeit"
>

Der Browser stellt dafür normalerweise direkt eine passende Uhrzeitauswahl zur Verfügung.

8) Checkbox

Eine Checkbox eignet sich für eine Auswahl, die aktiviert oder deaktiviert werden kann. 

<input
  type="checkbox"
  id="agb"
  name="agb"
>

<label for="agb">
  AGB akzeptieren
</label>

9) Absenden-Button

Mit einem Button kann das Formular abgeschickt werden. 

<button type="submit">
  Absenden
</button>

type="submit" sagt dem Browser, dass dieser Button das Formular absenden soll.

10) Komplettes Beispiel

Jetzt setzen wir die einzelnen Elemente zu einem vollständigen Formular zusammen: 

<form action="#" method="get">

  <label for="zeit">Uhrzeit:</label>
  <input
    type="time"
    id="zeit"
    name="zeit"
  >

  <label for="zahl">Zahl (0–10):</label>
  <input
    type="number"
    id="zahl"
    name="anzahl"
    min="0"
    max="10"
  >

  <label for="text">Text:</label>
  <input
    type="text"
    id="text"
    name="text"
    placeholder="Schreibe etwas …"
  >

  <input
    type="checkbox"
    id="agb"
    name="agb"
  >

  <label for="agb">
    AGB akzeptieren
  </label>

  <button type="submit">
    Absenden
  </button>

</form>

11) Wofür ist name?

Das Attribut name gibt einem Eingabefeld einen Namen. Dieser Name wird beim Absenden zusammen mit dem eingegebenen Wert übertragen. 

<input
  type="text"
  name="vorname"
>

Ohne name wird der Wert eines normalen Eingabefeldes beim Absenden nicht auf dieselbe Weise als Formulardaten mitgeschickt.

Merke

  • <form> bildet den Rahmen des Formulars.
  • Mit <label> beschreibst du Eingabefelder.
  • <input> erstellt verschiedene Eingabefelder.
  • type bestimmt die Art des Eingabefeldes.
  • name gibt dem Feld einen Namen für die Formulardaten.
  • min und max können Zahlenbereiche begrenzen.
  • <button type="submit"> sendet das Formular ab.

12) Mini-Übung

Erstelle dein eigenes Formular zum Thema Sommercamp.

Dein Formular soll enthalten:

  • ein Textfeld für den Namen
  • ein Zahlenfeld von 1 bis 10
  • ein Feld für eine Uhrzeit
  • eine Checkbox
  • einen Absenden-Button

Versuche anschließend, die einzelnen Felder mit <label> sinnvoll zu beschriften.

```