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