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 zur Beschreibung von Steuerelementen, Elemente, mit denen Felder gruppiert werden, 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 Browser zeigen unterschiedliche Benutzeroberflächen, verwenden unterschiedliche Validierungsregeln, und viele weitere Funktionen bieten. Mit den passenden Formularsteuerelementen lassen sich bessere Formulare erstellen.

Labels für Formularelemente

Angenommen, Sie möchten eine Eingabe hinzufügen, in die der Nutzer seine Lieblingsfarbe eingeben kann. Dazu müssen Sie Ihrem Formular ein <input>-Element hinzufügen. Aber woher wissen die Nutzenden, dass sie ihre Lieblingsfarbe ausfüllen sollten?

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

<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 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 Attribut id das <input> mit dem <label>. Wie sieht es in diesem Beispiel mit den Attributen name und type aus?

Das Attribut „name“ [name]

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

Versuche, etwas zu ändern den Namen des Formularsteuerelements auf hill. Wenn Sie das richtig machen und das Formular senden, ist hill in der URL sichtbar.

Der Eingabetyp

Es gibt verschiedene Arten von Formularsteuerelementen, alle mit nützlichen integrierten Funktionen, die in verschiedenen Browsern und auf verschiedenen Plattformen funktionieren. Basierend auf type gibt der Browser verschiedene Benutzeroberflächen aus, zeigt verschiedene Bildschirmtastaturen an, verwendet verschiedene Validierungsregeln und mehr. Sehen wir uns an, wie wir den Typ ändern können.

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

Es stehen noch andere Typen zur Auswahl. Näheres dazu erfahren Sie in einem späteren Modul.

Mehrere Textzeilen zulassen

Angenommen, Sie benötigen ein Feld, in das ein Nutzer einen Kommentar schreiben kann. Wäre es nicht praktisch, wenn mehrere Textzeilen eingegeben werden können? Dies ist der Zweck des Elements <textarea>.

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

Auswahl aus einer Liste von Optionen

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ügst du ein <select>-Element hinzu. Wie alle anderen Formularsteuerelemente verbinden Sie es über das Attribut id mit einem <label>. und geben Sie ihm mithilfe des Attributs 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 voneinander unterscheiden können. Der Text innerhalb des Optionselements ist der visuell lesbare Wert.

Wenn du das Formular über diese <select> sendest, ohne die Auswahl zu ändern, die Anfrage enthält 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.

Vorauswahl einer Option

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

Gruppierung von Formularsteuerelementen

Manchmal müssen Formularsteuerelemente gruppiert werden. 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 Element <legend> im Element <fieldset> bemerkt? Wofür wird sie deiner Meinung nach verwendet?

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

Jedes <fieldset>-Element erfordert ein <legend>-Element. Ebenso wie jedes Formularsteuerelement ein verknüpftes <label>-Element benötigt. <legend> muss außerdem das erste Element im <fieldset> sein. Nach dem <legend>-Element können Sie die Formularsteuerelemente definieren, die Teil der Gruppe sein sollen.

Formular senden

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

Die erste Möglichkeit besteht darin, ein <button>-Element zu verwenden.

<button>Submit</button>

Nachdem ein Nutzer auf die Schaltfläche Senden geklickt hat, Der Browser sendet eine Anfrage an die URL, die in den <form>-Elementen angegeben ist. Attribut „Aktion“ mit allen Daten aus den Formularsteuerelementen.

Du kannst 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. Anstelle eines <label>-Elements zur Beschreibung <input> verwenden Sie stattdessen das Attribut value.

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

Darüber hinaus kann ein Formular auch mit dem Schlüssel Enter gesendet werden, wenn ein Formularfeld hervorgehoben ist.

Wissen testen

Testen Sie Ihr Wissen über Formularelemente

Wie verbinde ich ein <label> mit einem Formularsteuerelement?

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

Was verwenden Sie für ein mehrzeiliges Formularsteuerelement?

<input>-Element mit type='multi-line'.
Versuch es noch einmal.
Das Element <text>.
Versuch es noch einmal.
Das Element <textarea>.
🎉
<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 dem Schlüssel Enter.
Richtig, das ist eine Option.
Klicken 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