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 Attributselected
. - 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?
name='color'
für <label>
und for='color
für <input>
.id='color'
für <label>
und for='color'
für <input>
.for='color'
für <label>
und name='color'
für <input>
.for='color'
für <label>
und id='color'
für <input>
.Was verwenden Sie für ein mehrzeiliges Formularsteuerelement?
<input>
-Element mit type='multi-line'
.<textarea>
.<input>
-Element mit type='long'
.<text>
.Wie kann ich ein Formular einreichen?
Enter
.<input>
-Element mit type='submit'
.<button>
-Element.