Nutzer bei der Eingabe von Daten in Formulare unterstützen

Damit ein Formular interaktiv wird, müssen Sie Formularelemente hinzufügen. Es gibt Steuerelemente zum Eingeben und Auswählen von Daten, Elemente zur Beschreibung von Steuerelementen, Elemente zum Gruppieren von Feldern und Schaltflächen zum Senden eines Formulars.

Was sind Formularelemente?

Sie sehen zwei <input>-Elemente: <input type="text"> und <input type="file">. Warum sehen sie anders aus?

Abhängig vom Elementnamen und dem Attribut type zeigen Browser unterschiedliche Benutzeroberflächen an, verwenden unterschiedliche Validierungsregeln und bieten viele weitere Funktionen. Mithilfe der entsprechenden Formularsteuerelemente können Sie Ihre Formulare besser erstellen.

Labels für Formularelemente

Angenommen, Sie möchten eine Eingabe hinzufügen, über die Nutzende ihre Lieblingsfarbe eingeben können. Dazu müssen Sie Ihrem Formular ein <input>-Element hinzufügen. Aber woher wissen die Nutzenden, dass sie ihre Lieblingsfarbe einfügen sollten?

Verwenden Sie zum Beschreiben von Formularsteuerelementen ein <label> für jedes Formularsteuerelement.

<label for="color">What is your favorite color?</label>
<input type="text" id="color" name="color">

Das Attribut for des Labelelements stimmt mit dem Attribut id in der Eingabe überein.

Nutzereingaben erfassen

Wie der Name schon sagt, wird das Element <input> verwendet, um Input von Nutzern zu erfassen.

<label for="color">What is your favorite color</label>
<input type="text" id="color" name="color">

Wie bereits erwähnt, verbindet das Attribut id die <input> mit der <label>. Wie sieht es mit dem Attribut „name“ und „type“ in diesem Beispiel aus?

Das Attribut „name“

Verwenden Sie das Attribut name, um die Daten zu identifizieren, die der Nutzer über das Steuerelement eingibt. Wenn Sie das Formular senden, ist dieser Name im Antrag enthalten. Angenommen, Sie haben eine Formularsteuerung mountain genannt und der Nutzer hat Gutenberg eingegeben. Die Anfrage enthält diese Informationen als mountain=Gutenberg.

Versuchen Sie, den Namen der Formularsteuerung in hill zu ändern. Wenn Sie das richtig machen und das Formular einreichen, wird hill in der URL angezeigt.

Der Eingabetyp

Es gibt verschiedene Arten von Formularsteuerelementen mit nützlichen integrierten Funktionen, die in verschiedenen Browsern und Plattformen verwendet werden können. Basierend auf dem Attribut type rendert der Browser u. a. unterschiedliche Benutzeroberflächen, zeigt unterschiedliche Bildschirmtastaturen an und verwendet unterschiedliche Validierungsregeln. Sehen wir uns an, wie Sie den Typ ändern können.

Durch die Verwendung von type="checkbox" rendert der Browser jetzt ein Kästchen anstelle eines Textfelds. Das Kästchen enthält auch zusätzliche Attribute. Sie können das Attribut checked festlegen, damit es als aktiviert angezeigt wird.

Es gibt verschiedene andere Typen, die Sie auswählen können. Detaillierte Informationen erhalten Sie in einem späteren Modul.

Mehrere Textzeilen zulassen

Angenommen, Sie brauchen ein Feld, in das Nutzer einen Kommentar eingeben können. Wäre es in diesem Fall nicht ideal, wenn die Person mehrere Textzeilen eingeben könnte? Das ist der Zweck des <textarea>-Elements.

<label for="comment">Comment</label>
<textarea id="comment" name="comment"></textarea>

Optionen aus einer Liste auswählen

Wie stellen Sie Nutzenden eine Liste mit Optionen zur Auswahl? Dazu können Sie ein <select>-Element verwenden.

<label for="color">Color</label>
<select id="color" name="color">
  <option value="orange">Orange</option>
  <option value="pink">Pink</option>
</select>

Zuerst fügen Sie ein <select>-Element hinzu. Wie bei allen anderen Formularsteuerelementen verbinden Sie sie über das Attribut id mit einem <label> und weisen ihr mithilfe des Attributs name einen eindeutigen Namen zu.

Zwischen dem Start- und End-Tag des <select>-Elements können Sie mehrere <option>-Elemente einfügen, die jeweils eine Auswahl darstellen.

Jede Option hat ein eindeutiges value-Attribut, das Sie bei der Verarbeitung der Formulardaten auseinanderhalten können. Der Text im Optionselement ist der visuell lesbare Wert.

Wenn Sie das Formular mit diesem <select> senden, ohne die Auswahl zu ändern, enthält die Anfrage color=orange. Aber woher weiß der Browser, welche Option er verwenden sollte?

Der Browser verwendet die erste Option in der Liste, es sei denn:

  • Ein <option>-Element hat das Attribut selected.
  • Der Nutzer wählt eine andere Option aus.

Option vorab auswählen

Mit dem Attribut selected können Sie vorab eine Option auswählen. Dies wird die Standardeinstellung, unabhängig von der Reihenfolge, in der <option>-Elemente definiert sind.

Steuerelemente für Formulare gruppieren

Manchmal müssen Sie Formularsteuerelemente in Gruppen zusammenfassen. Dazu können Sie das Element <fieldset> verwenden.

<fieldset>
    <legend>What is your favorite web technology</legend>

    <label for="html">HTML</label>
    <input type="radio" name="webfeature" value="html" id="html">

    <label for="css">CSS</label>
    <input type="radio" name="webfeature" value="css" id="css">
</fieldset>

Hast du das <legend>-Element innerhalb des <fieldset>-Elements bemerkt? Wofür wird sie Ihrer Meinung nach verwendet?

Wenn Ihre Antwort „um die Gruppe von Formularsteuerelementen zu beschreiben“ lautet, haben Sie recht.

Jedes <fieldset>-Element erfordert ein <legend>-Element, genau wie jedes Formularsteuerelement ein verknüpftes <label>-Element. Das <legend> muss auch das allererste Element im <fieldset> sein. Nach dem <legend>-Element können Sie die Formularsteuerelemente definieren, die Teil der Gruppe sein sollen.

Formulare senden

Nachdem Sie nun gelernt haben, wie Sie Formularsteuerelemente hinzufügen und gruppieren, fragen Sie sich jetzt vielleicht, wie Nutzer ein Formular senden können.

Die erste Option besteht darin, ein <button>-Element zu verwenden.

<button>Submit</button>

Nachdem ein Nutzer auf die Schaltfläche Senden geklickt hat, sendet der Browser eine Anfrage mit allen Daten aus den Formularsteuerelementen an die URL, die im Aktionsattribut des <form>-Elements angegeben ist.

Sie können auch ein <input>-Element mit type="submit" anstelle eines <button>-Elements verwenden. Die Eingabe sieht aus wie eine <button> und verhält sich auch so. Verwenden Sie zum Beschreiben von <input> anstelle eines <label>-Elements das Attribut value.

<input type="submit" value="Submit">

Außerdem kann ein Formular mit dem Schlüssel Enter gesendet werden, wenn ein Formularfeld im Fokus ist.

Wissen testen

Testen Sie Ihr Wissen zu Formularelementen

Wie verbinde ich ein <label> mit einer Formularsteuerung?

for='color' am <label> und name='color' am <input>.
Versuch es noch einmal.
for='color' am <label> und id='color' am <input>.
Richtig!
id='color' am <label> und for='color' am <input>.
Versuch es noch einmal.
name='color' am <label> und for='color am <input>.
Versuch es noch einmal.

Was verwenden Sie für eine mehrzeilige Formularsteuerung?

<input>-Element mit type='multi-line'.
Versuch es noch einmal.
Das <text>-Element.
Versuch es noch einmal.
Das <textarea>-Element.
🎉
<input>-Element mit type='long'.
Versuch es noch einmal.

Wie reiche ich ein Formular ein?

Klicken auf ein <button>-Element.
Richtig, das ist eine Option.
Durch Verwendung des Schlüssels Enter.
Richtig, das ist eine Option.
Klick auf ein <input>-Element mit type='submit'.
Richtig, das ist eine Option.
Alle oben genannten Optionen
Richtig. Alle Antworten sind mögliche Optionen zum Senden eines Formulars.

Ressourcen