1. Mehrfachauswahl und Listen
HTML-Formulare bieten viele Möglichkeiten für die Interaktion der Benutzer mit der Webseite. Neben Texteingabefeldern und Buttons unterstützen Formulare auch Elemente für Mehrfachauswahl und Listen, die flexiblere und bequemere Schnittstellen für die Dateneingabe ermöglichen. Heute lernen wir diese kennen.
In HTML bieten Formulare verschiedene Möglichkeiten zur Erstellung von Elementen mit Auswahlmöglichkeiten aus einer Liste. Die am häufigsten verwendeten Elemente hierfür sind <select> und <option>, sowie Checkboxen und Radio-Buttons.
Dropdown-Liste: <select> und <option>
Der Tag <select> erstellt eine Dropdown-Liste, und <option> wird verwendet, um Optionen innerhalb dieser Liste hinzuzufügen. Der Benutzer kann eine oder mehrere Optionen aus der Liste auswählen.
Einzelauswahl: Standardmäßig erlaubt <select> nur die Auswahl einer Option.
<label for="country">Wähle ein Land:</label>
<select id="country" name="country">
<option value="ru">Russland</option>
<option value="us">USA</option>
<option value="de">Deutschland</option>
</select>
<label for="country">Wähle ein Land:</label>
<select id="country" name="country">
<option value="ru">Russland</option>
<option value="us">USA</option>
<option value="de">Deutschland</option>
</select>
Mehrfachauswahl: Wenn das Attribut multiple hinzugefügt wird, kann der Benutzer mehrere Optionen auswählen, indem er die Taste Strg (auf Windows) oder Cmd (auf Mac) gedrückt hält und klickt.
<label for="languages">Wähle Sprachen:</label>
<select id="languages" name="languages" multiple>
<option value="ru">Russisch</option>
<option value="en">Englisch</option>
<option value="de">Deutsch</option>
</select>
<label for="languages">Wähle Sprachen:</label>
<select id="languages" name="languages" multiple>
<option value="ru">Russisch</option>
<option value="en">Englisch</option>
<option value="de">Deutsch</option>
</select>
In diesem Fall werden die Daten der ausgewählten Elemente in Form eines Arrays von Werten an den Server gesendet.
Checkboxen: <input type="checkbox">
Checkboxen sind Elemente, die es dem Benutzer erlauben, eine oder mehrere Optionen aus einer gegebenen Liste auszuwählen. Jede Checkbox wird mit dem Tag <input type="checkbox"> erstellt.
<label><input type="checkbox" name="interests" value="sports"> Sport</label>
<label><input type="checkbox" name="interests" value="music"> Musik</label>
<label><input type="checkbox" name="interests" value="travel"> Reisen</label>
<label><input type="checkbox" name="interests" value="sports"> Sport</label>
<label><input type="checkbox" name="interests" value="music"> Musik</label>
<label><input type="checkbox" name="interests" value="travel"> Reisen</label>
Wenn alle Checkboxen dasselbe name-Attribut haben, werden die Daten jeder markierten Checkbox beim Senden des Formulars als Array übertragen.
Radio-Buttons: <input type="radio">
Radio-Buttons erlauben es dem Benutzer, nur eine Option aus einer Gruppe auszuwählen. Radio-Buttons mit demselben name-Attributwert werden in einer Gruppe zusammengefasst, sodass der Benutzer nur eine Option in dieser Gruppe auswählen kann.
<p>Wähle das Geschlecht aus:</p>
<label><input type="radio" name="gender" value="male"> Männlich</label>
<label><input type="radio" name="gender" value="female"> Weiblich</label>
<p>Wähle das Geschlecht aus:</p>
<label><input type="radio" name="gender" value="male"> Männlich</label>
<label><input type="radio" name="gender" value="female"> Weiblich</label>
Radio-Buttons eignen sich gut zur Auswahl einer Option aus mehreren festen Alternativen, wie z. B. "Ja" oder "Nein", Geschlecht, Altersgruppe usw.
...
GO TO FULL VERSION