Formular Workshop
Lerne das Erstellen von HTML-Formularen für deinen Onlex-Formmailer
Auswahllisten
<select>
Mit Auswahllisten bietest du deinen Besuchern die Möglichkeit vordefinierte Einträge auszuwählen.
Der Text des ausgewählten Eintrages wird beim Absenden übertragen.
Hier verschiedene Möglichkeiten wie man Auswahllisten in ein Formular einbindet und modifizieren kann:
- einfache Auswahllisten
- Mehrfachauswahlen in Auswahllisten
- Einträge vorselektieren
- Einträge andere Werte zuweisen
einfache Auswahllisten
Hier eine kleine Auswahllisten mit Themen, die in diesem Workshop behandelt werden:
Quelltext-Auszug:
<select name="Themen" size="5">
<option>Formulare einbinden</option>
<option>Eingabefelder</option>
<option>Eingabebereiche</option>
<option>Auswahllisten</option>
<option>Radiobuttons</option>
<option>Checkboxen</option>
<option>Formulare senden</option>
</select>
Auswahllisten werden mit dem HTML-Befehl
<select> eingeleitet. Sie benötigen auch einen abschliessenden HTML-Befehl: </select>.Die einzelnene Einträge werden zwischen den HTML-Befehlen
<option> und </option> notiert.Wie auch bei allen anderen Formularelementen wird mit dem
name-Attribut ein eindeutiger Name vergeben. Auch hier darf sich dieser Name nicht innerhalb des selben Formulares wiederholen.Die Grösse der Auswahlliste bzw. die Anzahl der Einträge, die auf Anhieb sichtbar sind, wird mit dem Attribute
size angegeben.Wenn mehr Einträge vorhanden sind als die Grösse angibt, dann wird automatisch ein Scrollbalken eingeblendet mit dem man zu den gewünschten Einträgen gehen kann.
Tipp: Ein Dropdown-Feld wird mit Auswahllisten erstellt. Hierbei wird die Grösse (
size) auf "1" eingestellt:Quelltext-Auszug:
<select name="Themen" size="1">
<option>Formulare einbinden</option>
<option>Eingabefelder</option>
<option>Eingabebereiche</option>
<option>Auswahllisten</option>
<option>Radiobuttons</option>
<option>Checkboxen</option>
<option>Formulare senden</option>
</select>
↑ zum Seitenanfang ↑
Mehrfachauswahlen in Auswahllisten
In Auswahllisten können Mehrfachauswahlen möglich gemacht werden:
Hinweis: Für Mehrfachauswahlen bitte die Strg-Taste gedrückt halten und Auswahl treffen.
Quelltext-Auszug:
<select name="Themen[]" size="5" multiple>
<option>Formulare einbinden</option>
<option>Eingabefelder</option>
<option>Eingabebereiche</option>
<option>Auswahllisten</option>
<option>Radiobuttons</option>
<option>Checkboxen</option>
<option>Formulare senden</option>
</select>
Mehrfachauswahlen in einer Auswahlliste ist Dank dem Atribut
multiple möglich. Dieser wird im einleitenden <select>-Befehl notiert.Wichtig ist, dass eine Mehrfachauswahl in einer Auswahlliste eher unüblich ist. Deswegen weise den Benutzer daraufhin, wie er eine Mehrfachauswahl vornehmen kann:
Windows-Nutzer: Strg-/Ctrl-Taste gedrückt halten und Auswahl treffen
Mac-Nutzer: Apfel-/Befehlstaste gedrückt halten und Auswahl treffen
Bei Anwendung der Mehrfachauswahlen in einer Auswahlliste mit einem Formmailer ist es u.U. wichtig, dass sogenannte Arrays verwendet werden:
<select name="Themen[]" size="5" multiple>
[...]
</select>
Arrays werden mit eckigen Klammern hinter dem Wert im
name-Attribut positioniert.So können dann mehrere Werte übergeben werden. Die Ausgabe könnte dann so aussehen:
Themen[0] : Formulare einbinden
Themen[1] : Eingabefelder
Themen[2] : Auswahllisten
usw.
↑ zum Seitenanfang ↑
Einträge vorselektieren
Einträge können in einer Auswahlliste auch vorselektiert werden:
Quelltext-Auszug:
<select name="Themen" size="10">
<option>Formulare einbinden</option>
<option>Eingabefelder</option>
<option selected>Eingabebereiche</option>
<option>Auswahllisten</option>
<option>Radiobuttons</option>
<option>Checkboxen</option>
<option>Formulare senden</option>
</select>
Die Vorselektierung von Einträgen in Auswahllisten wird mit dem Attribut
selected im einleitenden <option>-Befehl des jeweiligen Eintrages vorgenommen.Im obigen Beispiel wurde die Grösse der Auswahlliste bewusst auf
size="10" zur besseren Ansicht gesetzt.↑ zum Seitenanfang ↑
Einträge andere Werte zuweisen
Normalerweise werden die Werte, die in Auswahllisten übergeben werden, zwischen dem einleitenden
<option>- und abschliessenden </option>-Befehl vermerkt.Man kann aber auch andere Werte zuweisen, ohne die Texte ändern bzw. anpassen zu müssen.
<select name="Note" size="6">
<option value="1">sehr gut</option>
<option value="2">gut</option>
<option value="3">befriedigend</option>
<option value="4">ausreichend</option>
<option value="5">mangelhaft</option>
<option value="6">ungenügend</option>
</select>
Das obige Beispiel wurde anhand von Benotungen gemacht.
Hier wählt der Nutzer einfach die Note in ausgeschriebener Form aus.
Der Empfänger der eMail erhält die numerischen Angaben.
↑ zum Seitenanfang ↑