Logo von www.onlex.de
Formular Workshop

Lerne das Erstellen von HTML-Formularen für deinen Onlex-Formmailer
Onlex auf Facebook verwenden Onlex bei Google empfehlen Onlex auf Twitter verwenden

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

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 ^



© 2002 - 2016 · www.onlex.de - HomepageTools | Impressum | Sitemap