Nutzer bei der Eingabe von Daten in Formulare unterstützen

Wenn Sie ein Formular interaktiv gestalten möchten, müssen Sie Formularelemente hinzufügen. Es gibt Steuerelemente zum Eingeben und Auswählen von Daten, Elemente, die Steuerelemente beschreiben, Elemente, die Felder gruppieren, 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?

Je nach Elementnamen und Typ-Attribut zeigen Browser unterschiedliche Benutzeroberflächen an, verwenden unterschiedliche Validierungsregeln und bieten viele weitere Funktionen. Mit dem richtigen Formularkontrollelement können Sie bessere Formulare erstellen.

Labels für Formularelemente

Angenommen, Sie möchten ein Eingabefeld hinzufügen, in das Nutzer ihre Lieblingsfarbe eingeben können. Dazu müssen Sie Ihrem Formular ein <input>-Element hinzufügen. Aber woher weiß der Nutzer, dass er seine Lieblingsfarbe eingeben soll?

Verwenden Sie für jedes Formularkontrollelement ein <label>.

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

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

Nutzereingabe erfassen

Wie der Name schon sagt, wird das <input>-Element verwendet, um Eingaben 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 id-Attribut die <input> mit der <label>. Was ist mit den Attributen „Name“ und „Typ“ in diesem Beispiel?

Das Attribut „name“

Verwenden Sie das Attribut name, um die Daten zu identifizieren, die der Nutzer über das Steuerelement eingibt. Wenn Sie das Formular einreichen, wird dieser Name in die Anfrage aufgenommen. Angenommen, Sie haben ein Formularkontrollelement mountain genannt und der Nutzer hat Gutenberg eingegeben. Die Anfrage enthält diese Informationen als mountain=Gutenberg.

Versuchen Sie, den Namen des Formularkontrollelements in hill zu ändern. Wenn Sie dies richtig machen und das Formular einreichen, ist hill in der URL zu sehen.

Eingabetyp

Es gibt verschiedene Arten von Formularelementen, die alle nützliche integrierte Funktionen haben, die in verschiedenen Browsern und auf verschiedenen Plattformen funktionieren. Basierend auf dem Attribut type rendert der Browser unterschiedliche Benutzeroberflächen, zeigt unterschiedliche Bildschirmtastaturen an, verwendet unterschiedliche Validierungsregeln usw. Sehen wir uns an, wie Sie den Typ ändern.

Wenn Sie type="checkbox" verwenden, 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 so festlegen, dass es als angeklickt angezeigt wird.

Es gibt verschiedene andere Typen, aus denen Sie auswählen können. In einem späteren Modul werden wir uns das genauer ansehen.

Mehrere Textzeilen zulassen

Angenommen, Sie benötigen ein Feld, in das Nutzer einen Kommentar schreiben können. Wäre es nicht toll, wenn sie mehrere Textzeilen eingeben könnten? 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 Nutzern eine Liste mit Optionen zur Auswahl zur Verfügung? 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>

Fügen Sie zuerst ein <select>-Element hinzu. Wie bei allen anderen Formularelementen verknüpfen Sie es mit einem <label> über das id-Attribut und geben ihm mit dem name-Attribut einen eindeutigen Namen.

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, damit Sie sie bei der Verarbeitung der Formulardaten unterscheiden können. Der Text im Optionselement ist der visuell lesbare Wert.

Wenn Sie das Formular mit dieser <select> einreichen, ohne die Auswahl zu ändern, enthält die Anfrage color=orange. Aber woher weiß der Browser, welche Option verwendet werden soll?

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 eine Option vorab auswählen. Dieser Wert wird unabhängig von der Reihenfolge, in der <option>-Elemente definiert sind, als Standard festgelegt.

Formularsteuerelemente gruppieren

Manchmal müssen Sie Formularelemente gruppieren. 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>

Sind Ihnen das <legend>-Element innerhalb des <fieldset>-Elements aufgefallen? Wofür wird sie Ihrer Meinung nach verwendet?

Wenn Ihre Antwort „die Gruppe der Formularsteuerelemente beschreiben“ lautet, haben Sie Recht.

Jedes <fieldset>-Element erfordert ein <legend>-Element, genau wie jedes Formularkontrollelement ein zugehöriges <label>-Element benötigt. Außerdem muss <legend> das erste Element in <fieldset> sein. Nach dem Element <legend> können Sie die Formularsteuerelemente definieren, die Teil der Gruppe sein sollen.

Formular einreichen

Nachdem Sie gelernt haben, wie Sie Formularsteuerelemente hinzufügen und gruppieren, fragen Sie sich vielleicht, wie ein Nutzer ein Formular einreichen kann.

Die erste Möglichkeit ist die Verwendung eines <button>-Elements.

<button>Submit</button>

Nachdem ein Nutzer auf die Schaltfläche Senden geklickt hat, sendet der Browser eine Anfrage an die URL, die im action-Attribut des <form>-Elements angegeben ist. Dabei werden alle Daten aus den Formularelementen übertragen.

Du kannst auch ein <input>-Element mit type="submit" anstelle eines <button>-Elements verwenden. Die Eingabe sieht aus und funktioniert genau wie eine <button>. Verwenden Sie stattdessen das Attribut value, um die <input> zu beschreiben.<label>

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

Außerdem kann ein Formular mit der Taste Enter gesendet werden, wenn ein Formularfeld den Fokus hat.

Wissen testen

Ihr Wissen zu Formularelementen testen

Wie verbinde ich eine <label> mit einem Formularkontrollelement?

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

Was verwenden Sie für ein mehrzeiliges Formularkontrollelement?

<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 können Sie ein Formular einreichen?

Klick auf ein <button>-Element
Richtig, das ist eine Option.
Über die Taste Enter.
Richtig, das ist eine Option.
Klicken Sie auf ein <input>-Element mit type='submit'.
Richtig, das ist eine Option.

Ressourcen