Nutzer bei der Eingabe von Daten in Formulare unterstützen

Damit ein Formular interaktiv ist, 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 Elementname und type-Attribut zeigen Browser unterschiedliche Benutzeroberflächen an, verwenden unterschiedliche Validierungsregeln und bieten viele weitere Funktionen. Mit dem richtigen Formularsteuerelement können Sie bessere Formulare erstellen.

Labels für Formularelemente

Angenommen, Sie möchten eine Eingabe hinzufügen, in der der Nutzer seine Lieblingsfarbe eingeben kann. Dazu müssen Sie Ihrem Formular ein <input>-Element hinzufügen. Aber woher weiß der Nutzer, dass er seine Lieblingsfarbe angeben soll?

Verwenden Sie für jedes Formularsteuerelement ein <label>, um es zu beschreiben.

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

Das Attribut for für das Label-Element entspricht dem Attribut id für die Eingabe.

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, wird mit dem Attribut id die <input> mit der <label> verknüpft. Was ist mit dem Attribut „name“ und „type“ in diesem Beispiel?

Das Attribut „name“

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

Ändern Sie den Namen des Formularsteuerelements in hill. Wenn Sie das Formular korrekt ausfüllen und senden, ist hill in der URL sichtbar.

Der Eingabetyp

Es gibt verschiedene Arten von Formularsteuerelementen, die alle nützliche integrierte Funktionen bieten, die in verschiedenen Browsern und auf verschiedenen Plattformen funktionieren. Anhand des Attributs type rendert der Browser verschiedene Benutzeroberflächen, zeigt verschiedene Bildschirmtastaturen an und verwendet unterschiedliche Validierungsregeln. Hier erfahren Sie, wie Sie den Typ ändern.

Wenn Sie type="checkbox" verwenden, rendert der Browser jetzt ein Kästchen anstelle eines Textfelds. Das Kästchen hat auch zusätzliche Attribute. Sie können das Attribut checked festlegen, um es als ausgewählt anzuzeigen.

Es gibt verschiedene Typen, aus denen Sie auswählen können. Das sehen wir uns in einem späteren Modul genauer an.

Mehrere Textzeilen zulassen

Angenommen, Sie benötigen ein Feld, in das ein Nutzer einen Kommentar eingeben kann. 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>

Aus einer Liste von Optionen auswählen

Wie geben Sie Nutzern 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>

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

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

Jede Option hat ein eindeutiges value-Attribut, sodass Sie sie bei der Verarbeitung der Formulardaten unterscheiden können. Der Text im Element „option“ ist der für Menschen 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. Dies wird zum Standard, unabhängig von der Reihenfolge, in der <option>-Elemente definiert werden.

Formularsteuerelemente gruppieren

Manchmal müssen Sie Formularsteuerelemente 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>

Ist Ihnen das <legend>-Element im <fieldset>-Element aufgefallen? Wofür wird es Ihrer Meinung nach verwendet?

Wenn Sie „zur Beschreibung der Gruppe von Formularsteuerelementen“ geantwortet haben, liegen Sie richtig.

Jedes <fieldset>-Element erfordert ein <legend>-Element, genau wie jedes Formularsteuerelement ein zugehöriges <label>-Element benötigt. Die <legend> muss auch das erste Element in der <fieldset> sein. Nach dem <legend>-Element können Sie die Formularsteuerelemente definieren, die zur Gruppe gehören sollen.

Formular senden

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

Die erste Option ist die Verwendung eines <button>-Elements.

<button>Submit</button>

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

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

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

Außerdem kann ein Formular auch durch Drücken der Enter-Taste gesendet werden, wenn ein Formularfeld den Fokus hat.

Wissen testen

Ihr Wissen zu Formularelementen testen

Wie verbinden Sie ein <label> mit einem Formularsteuerelement?

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 ein mehrzeiliges Formularsteuerelement?

<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 kann ich ein Formular einreichen?

Klicken auf ein <button>-Element.
Richtig, das ist eine Option.
Mit der Taste Enter.
Richtig, das ist eine Option.
Klicken auf ein <input>-Element mit type='submit'.
Richtig, das ist eine Option.

Ressourcen