select
mit option
multiple
option selected
value
Technik Formulare: Beschriftung mit Labels Formulare: Eingabefelder definieren |
Anwendung Formulare: Formularbox |
Prinzip
Auswahllisten sind ein weiteres Element von Formularen.
select
Dient zur Selektionierung.
option
Mit diesem Code können verschiedene Optionen angeboten
werden.
select
mit option
Code
<select name="..." id="..." size="...">
... </select>
Der Code <select...>
<select ...>
Mit diesem Code wird das Element Auswahlliste
eingeleitet.
Dieser Tag hat den Endtag </select>
Attribute des Codes <select...>
name="..."
Name des Elementes.
id="..."
Identifikation dieses Elementes.
size="..."
Die Anzahl der angezeigten Optionen.
Bemerkung: Falls mehr Optionen vorhanden sind als hier angegeben ist, wird das Auswahlfeld mit einer vertikalen Scrollleiste versehen.
Optionen
Die Optionen werden zwischen <select ...>
und </select>
eingegeben.
Beispiel
1) Eintrag im Quelltext
<form action="..." method="post"> <p>Wahl eines der 5 Interpreten:</p> <label for="interpret1">Interpret</label> <select name="interpret1" id="interpret1" size="3"> <option>Heino</option> <option>Michael Jackson</option> <option>Tom Waits</option> <option>Nina Hagen</option> <option>Marianne Rosenberg</option> </select> </form>
2) Anzeige im Dokument
Workshop
multiple
Prinzip
Code
<select ... multiple>
Beispiel
1) Eintrag im Quelltext
<form action="..." method="post"> <p>Mit der "Shift"-Taste können mehrere gewählt werden:</p> <label for="interpret2">Interpret</label> <select name="interpret2" id="interpret2" size="3" multiple> <option>Heino</option> <option>Michael Jackson</option> <option>Tom Waits</option> <option>Nina Hagen</option> <option>Marianne Rosenberg</option> </select> </form>
2) Anzeige im Dokument
Workshop
option selected
Prinzip
Code
<option selected>
Dies ist der entsprechende Eintrag bei
den Optionen.
Beispiel
1) Eintrag im Quelltext:
<form action="..." method="post"> <p>Sie können auch einen anderen Favoriten wählen!</p> <label for="interpret3">Interpret</label> <select name="interpret3" id="interpret3" size="3"> <option>Heino</option> <option>Michael Jackson</option> <option selected>Tom Waits</option> <option>Nina Hagen</option> <option>Marianne Rosenberg</option> </select> </form>
2) Anzeige im Dokument
Workshop
value
Prinzip
Sie können bestimmen, dass intern ein anderer Text übertragen wird als der,
der zwischen <option>
und </option>
notiert ist .
In diesem Beispiel wird die Nummer der Eingabe übertragen, mit der der Preis bestimmt werden kann.
In diesem Beispiel wurde diese Anwendung mit der Mehrfach-Selektion kombiniert.
Für die Auswertung wird voraussichtlich später in dieser
Anleitung darauf zurückgekommen.
Code
<option value="...">
Dies ist der entsprechende Eintrag
bei den Optionen.<option>
und </option>
notiert ist weitergeleitet.
Beispiel
1) Eintrag im Quelltext
<form action="..." method="post"> <p>Pizza-Bestellung:</p> <label for="interpret4">Pizza</label> <select name="interpret4" id="interpret4" size="6" multiple> <option value="P101">Pizza Napoli</option> <option value="P102">Pizza Funghi</option> <option value="P103">Pizza Mare</option> <option value="P104">Pizza Tonno</option> <option value="P105">Pizza Mexicana</option> <option value="P106">Pizza Regina</option> <option value="P107">Pizza de la Casa</option> <option value="P108">Pizza Calzone</option> <option value="P109">Pizza con tutti</option> </select> </form>
2) Anzeige im Dokument
Workshop
Beispiel
1) Eintrag im Quelltext
<label for="eintrag">Farbige Einträge</label> <select id="eintrag" size="4" style="width:200; background-color:#A050A0; color:white;"> <option style="color:#ffff00;">Eintrag 1 <option style="color:#00ffff;">Eintrag 2 <option style="color:#00ff00;">Eintrag 3 <option style="color:#00ffff;">Eintrag 4 <option style="color:#ff0000;">Eintrag 5 <option style="color:#ff00ff;">Eintrag 6 <option style="color:#ffffff;">Eintrag 7 </select>
2) Anzeige im Dokument