Formulare

Formulare sind die Stelle, an der eine Seite aufhört, nur zu zeigen, und anfängt, etwas entgegenzunehmen, eine Suche, eine Anmeldung, eine Bestellung. Sie bestehen aus wenigen Elementen, die immer gleich zusammenspielen.

01 / 04Formular, Feld, Beschriftung, Knopf

<form>
  <label for="name">Dein Name</label>
  <input type="text" id="name">

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

form ist die Klammer um alles, was zusammen abgeschickt wird.

input ist das Eingabefeld. Es ist ein Void-Element, hat also keinen Inhalt und keinen schließenden Tag. Welche Art von Feld daraus wird, entscheidet das type-Attribut, dazu gleich mehr in einer eigenen Lektion.

label ist die Beschriftung.

button löst das Absenden aus.

Ein Klick auf die Wörter „Dein Name“ setzt den Cursor ins Feld, obwohl der Klick das Feld gar nicht traf. Diese Verbindung ist der Sinn des label.

02 / 04Die Verbindung über for und id

Sie entsteht durch zwei zusammengehörige Attribute. Das input bekommt eine id, das label ein for mit demselben Wert. Das ist derselbe Mechanismus wie bei den Sprungmarken, nur ohne Raute.

Was du dadurch bekommst:

• Eine größere Klickfläche. Ein Klick auf die Beschriftung landet im Feld. Bei einer Checkbox von drei mal drei Millimetern ist das auf dem Handy der Unterschied zwischen benutzbar und ärgerlich.
• Eine Ansage im Screenreader. Springt der Nutzer ins Feld, liest die Software die Beschriftung vor. Ohne Verbindung hört er nur „Eingabefeld“ und muss raten.
• Formulare, die verständlich bleiben, auch wenn das Layout die Beschriftung mal über, mal neben das Feld setzt.

Es gibt eine zweite Schreibweise ohne for und id.

<form>
  <label>
    Dein Name
    <input type="text">
  </label>

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

Hier umschließt das label das Feld, und die Verbindung ergibt sich aus der Verschachtelung. Das funktioniert genauso und spart die id. Ich nehme meistens die mit for, weil sie beim Stylen mehr Freiheit lässt. Welche es wird, ist Geschmack, nur eine von beiden muss es sein.

03 / 04Was ohne label passiert

<form>
  <p>Dein Name</p>
  <input type="text">

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

Gemeint ist dasselbe, und in einem echten Projekt sähe es auch gleich aus. Aber der Klick auf die Wörter tut nichts, und ein Screenreader liest an dieser Stelle einen Absatz und danach ein namenloses Eingabefeld vor. Der Zusammenhang existiert nur im Kopf der sehenden Nutzer.

Dabei kostet die Abhilfe nur eine Zeile, denn jedes Eingabefeld bekommt einfach sein eigenes label.

04 / 04Der Knopf

button hat ein type-Attribut mit drei Werten. submit schickt das Formular ab und ist die Voreinstellung, wenn du nichts hinschreibst. reset setzt alle Felder auf ihren Ausgangswert zurück, nicht auf leer, was im Markup vorbelegt war, steht danach wieder da. Gebraucht wird er selten. button tut von sich aus nichts und wartet auf JavaScript.

Ich schreibe den Typ trotzdem immer hin. Ein button ohne type ist in einem Formular automatisch ein Absende-Knopf, und das überrascht spätestens, wenn jemand einen zweiten Knopf für etwas anderes einbaut.

Wer etwas ins Feld tippt und auf „Absenden“ klickt, sieht die Seite neu aufbauen, das Getippte ist weg, und in der Adresszeile ändert sich nichts. Abgeschickt wird also durchaus, an die Seite selbst, nur kommt nichts an, denn dem Feld fehlt der Name, unter dem sein Wert ankommen soll. Wohin ein Formular schickt und unter welchem Namen, ist das Thema der nächsten Lektion.

In der Aufgabe entsteht ein Formular, mit dem man sich für neue Rezepte per Mail eintragen kann, mit beschriftetem Feld und einem Knopf zum Absenden.