Formulare mit HTML

Formulare sind ein wichtiger Bestandteil von Webseiten. Speziell, wenn wir den Benutzer Eingaben tätigen lassen und diese im Anschluss weiterverarbeiten wollen. In diesem Abschnitt lernen wir wichtige Formularelemente kennen und wie wir diese mit HTML umsetzen.

Auch für dieses Thema empfehle ich den Artikel auf der MDN-Plattform:

Your first form - Learn web development | MDNMDN Web Docs

Eingabefelder für Text

Einzeiliger Text

Mit dem input Element zusammen mit dem Attribut type können wir ein einfaches Texteingabefeld erzeugen:

<input type="text">

Es ist eine hervorragende Idee, Formularelemente mit einer eindeutigen ID zu versehen. Das vereinfacht den späteren Zugriff auf die Daten:

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

Die ID erlaubt uns auch das Zuordnen eines Labels über das label Element:

<label for="taskname">Aufgabe:</label>
<input type="text" id="taskname">

Wir könnten das Label auch ohne die ID und die Zuordnung erstellen. Allerdings hat die Zuordnung den Vorteil, dass das Eingabefeld auf mobilen Geräten durch das Klicken auf das Label aktiviert werden kann. Dazu können Screenreader das Label dem Eingabefeld auch auf der Tonspur zuordnen.

Wir können Eingabefelder auch mit einem Wert vorbelegen. Das kann z. B. sinnvoll sein, wenn wir ein Formular für das Editieren eines Benutzerprofils erstellen. Hier werden die Informationen zu einem Benutzer aus der Datenbank geladen und in das Formular eingetragen, sodass der Benutzer nur die Änderungen einpflegen kann.

<label for="taskname">Name:</label>
<input type="text" id="taskname" value="Bitte Namen eingeben">

Mehrzeiliger Text

Das input Element ist für einzeilige Eingaben vorgesehen. Für längere Texte, die mehrere Zeilen umfassen können, eignet sich das textarea Element:

<textarea>Dieser Text erscheint als Inhalt</textarea>

Auch die textarea können wir mit einem Label und einer ID versehen:

<label for="texteingabe">Längerer Text</label>
<textarea id="texteingabe">Dieser Text erscheint als Inhalt</textarea>

Deaktivierte Eingabefelder

Wir können Eingabefelder auch deaktivieren oder als „nur Lesen“ kennzeichnen. In beiden Fällen kann das Feld nicht bearbeitet werden:

<input type="text" readonly>Dieser Text kann nicht geändert werden</input>
<input type="text" disabled>Dieser Text kann nicht geändert werden und ist grau</input>

Passwörter

Bei Passworteingaben sollte der eingegebene Wert nicht sichtbar sein. Das können wir mit dem entsprechenden Eingabetyp „password“ erreichen:

<input type="password" id="inputPassword">

Checkboxen

Oft verwenden wir in Formularen sogenannte Checkboxen, um den Benutzer ein oder mehrere Elemente aus einer Anzahl von Optionen auswählen zu lassen.

<label for="dringend">Zeitnah: </label>
<input type="checkbox" id="zeitnah" value="zeitnah"/>
    
<br>
    
<label for="dringend">Wichtig: </label>
<input type="checkbox" id="wichtig" value="wichtig"/>

Bei Checkboxen ist es wichtig, eine ID zu vergeben, um später auf den Wert zugreifen zu können.

Checkboxen können wir auch beim Laden der HTML-Seite direkt als angekreuzt anzeigen:

<label for="dringend">Wichtig: </label>
<input type="checkbox" id="wichtig" value="wichtig" checked/>

Radiobuttons

Im Vergleich zu Checkboxen erlauben Radiobuttons nur eine Option auszuwählen (single-choice). Wichtig ist, dass alle Optionen den gleichen Wert für das Attribut name besitzen:

<label for="ja">Ja </label>
<input type="radio" id="ja" name="einverstanden"/>
    
<label for="nein">Nein </label>
<input type="radio" id="nein" name="einverstanden"/>

Dropdown-Menüs

Bei einer großen Anzahl an Optionen bietet sich die Verwendung eines Dropdown-Menüs an. Das erlaubt uns, die Optionen erst auf Mausklick anzuzeigen:

<select id="taskcategory">
	<option value="simple" selected>Simple</option>
  <option value="complex">Complex</option>
  <option value="project">Project</option>
</select>

Schaltflächen

Wir benötigen in Formularen eine Möglichkeit, um nach der Eingabe eine Aktion auszulösen. In vielen Fällen wollen wir die Daten in eine Datenbank speichern. Das können wir z. B. mit JavaScript umsetzen, und wir haben im Rahmen der Todo-App bereits gesehen, wie wir einen Button erzeugen und mit JavaScript verbinden:

<button onclick="addTask()">Add task</button>

Dieser Abschnitt hat euch einen Überblick über die wichtigsten HTML-Formularelemente gegeben, mit denen ihr die meisten Anforderungen abdecken könnt. Ferner gibt es noch weitere, wie Datepicker oder Dateiupload. Diese könnt ihr bei Bedarf nachschlagen oder ChatGPT dazu befragen.