Ein ganzes Formular

Ein einzelnes Feld mit Beschriftung ist inzwischen Routine. Ein Formular für eine echte Bestellung hat aber sechs, acht oder zehn davon, und dann kommen Fragen dazu, die kein einzelnes Feld stellt. Welches Feld passt zu welcher Angabe, was gehört zusammen, und kommt am Ende an, was der Empfänger braucht?

01 / 03Vom Empfänger her denken

<form action="/kochkurs-anmeldung" method="get">
  <label for="name">Dein Name</label>
  <input type="text" id="name" name="name" required autocomplete="name">

  <fieldset>
    <legend>Welcher Kurs?</legend>
    <input type="radio" id="suppen" name="kurs" value="suppen" checked>
    <label for="suppen">Suppen</label>
    <input type="radio" id="brot" name="kurs" value="brot">
    <label for="brot">Brot backen</label>
  </fieldset>

  <label for="personen">Wie viele kommen?</label>
  <input type="number" id="personen" name="personen" min="1" max="4" value="1">

  <button type="submit">Anmelden</button>
</form>

Mit einem Namen im ersten Feld und einem Klick auf „Anmelden“ steht in der Adresszeile /kochkurs-anmeldung?name=Anna&kurs=suppen&personen=1, wenn der Name Anna war. Das ist alles, was das Formular verschickt, drei Paare aus name und Wert, und nichts sonst. Die Beschriftungen, die Gruppe und der Knopf sind nur für den, der das Formular ausfüllt.

Deshalb fange ich bei einem neuen Formular mit genau dieser Liste an. Welche Angaben braucht der Empfänger, unter welchem Namen, und welche Werte darf es geben? Steht die Liste, ergibt sich daraus fast von allein, welche Felder es braucht.

Das get steht hier nur, damit die Paare in der Adresszeile zu sehen sind. Eine echte Anmeldung verändert etwas beim Empfänger und geht deshalb per post, so wie es die Lektion über das Verschicken erklärt.

02 / 03Welches Feld für welche Angabe

Für jede Angabe auf der Liste gibt es ein Feld, das am besten passt:

• Wer etwas tippen muss, bekommt ein input mit dem passenden type, also email, number oder date, wo es passt.
• Wer eins aus wenigen wählt, die man alle auf einen Blick sehen soll, bekommt Radios in einem fieldset.
• Wer eins aus vielen wählt oder aus einer Reihe, die jeder kennt, etwa Wochentage oder Termine, bekommt ein select.
• Wer beliebig viele wählen darf, bekommt Checkboxen.
• Wer mehr als eine Zeile schreiben soll, bekommt ein textarea.

<form>
  <fieldset>
    <legend>Für wie viele Personen?</legend>
    <input type="radio" id="p2" name="portionen" value="2" checked>
    <label for="p2">2</label>
    <input type="radio" id="p4" name="portionen" value="4">
    <label for="p4">4</label>
  </fieldset>

  <label for="termin">Welcher Samstag?</label>
  <select id="termin" name="termin">
    <option value="2026-10-31">31.10.2026</option>
    <option value="2026-11-07">07.11.2026</option>
    <option value="2026-11-14">14.11.2026</option>
    <option value="2026-11-21">21.11.2026</option>
    <option value="2026-11-28">28.11.2026</option>
    <option value="2026-12-05">05.12.2026</option>
  </select>
</form>

Beide Fragen erlauben genau eine Antwort. Die Portionen stehen als Radios da, weil es nur zwei sind und man sie vergleichen will, bevor man klickt. Die sechs Samstage stehen in einer Auswahlliste, weil sie als Radios die halbe Seite füllten und ohnehin jeder weiß, was nach dem 7. November kommt.

Eine feste Grenze zwischen wenigen und vielen gibt es nicht. Ich nehme Radios, solange alle Optionen auf eine Zeile oder zwei passen, und ein select, sobald es mehr werden.

03 / 03Was beim Zusammensetzen schiefgeht

<form action="/kochkurs-anmeldung" method="get">
  <label for="vorname">Vorname</label>
  <input type="text" id="vorname" name="vorname">

  <label for="vorname">Nachname</label>
  <input type="text" id="vorname" name="vorname">

  <button type="submit">Anmelden</button>
</form>

Vorname und Nachname sehen richtig aus. Der zweite Block ist aber eine Kopie des ersten, und dabei sind for, id und name stehen geblieben.

Ein Klick auf „Nachname“ setzt den Cursor ins Feld für den Vornamen, denn beide Beschriftungen zeigen auf dieselbe id, und der Browser nimmt die erste. Abgeschickt mit Anna und Berg steht in der Adresszeile /kochkurs-anmeldung?vorname=Anna&vorname=Berg. Zweimal derselbe Name kommt an, und ob Berg der Vor- oder der Nachname ist, kann der Empfänger nicht wissen.

Je länger ein Formular wird, desto öfter entsteht es durch Kopieren. Ich gehe danach jeden Block noch einmal durch, for, id, name und value, und schicke das Formular einmal mit get ab, um in der Adresszeile zu sehen, ob jedes Paar so ankommt, wie es auf der Liste steht. Danach kommt das post wieder hin.

Pflichtfelder bekommen dabei ihr required und Angaben zur Person ihr autocomplete, wie in der Lektion davor.

In der Aufgabe hat der Hofladen Sonnenfeld aufgeschrieben, was er von einer Bestellung für seine Gemüsekiste wissen muss. Daraus wird das ganze Formular.