Kalender
Anmeldung
Webmail
Hilfe
SchulungFEN Startseite > ~xx502 > Forms > Lektion11
Web Formulare
Kapitel 11 - Auswahlliste mit Abrollmenü
Als nächste Eingabemöglichkeit möchte ich Dir Auswahllisten vorstellen. Bei diesem Formularelement verwendet man select an Stelle von input und es gibt auch einen abschließenden Tag!
Im Englischen wird dieses Formularelement auch als "Pulldown-Menu" oder "Drop-Down-Liste"bezeichnet.
Wir wollen der Auswahlliste auch gleich einen Namen geben.
|
<form> <select name="Bekannte_Person"> </select> </form> |
Optionen
Das mit der Auswahlliste funktioniert ja schon, aber wir brauchen sinnvollerweise noch einige Auswahlmöglichkeiten. Diese nennt man Optionen.
|
<form> <select name="Bekannte_Person"> <option> Norbert Blüm</option> <option> König Ludwig</option> <option> Stefan Raab</option> </select> </form> |
Die Breite der Liste wird, abhängig vom längsten Eintrag, automatisch ermittelt.
Wert zuweisen
Du hast sicher bereits das System, das hinter den Formularfeldern steckt, begriffen:
Außer dem Namen, braucht's auch immer einen Wert (value). Diesen wollen wir sofort ergänzen.
|
<form> <select name="Bekannte_Person"> <option value="Norbert"> Norbert Blüm</option> <option value="Ludwig"> König Ludwig</option> <option value="Stefan"> Stefan Raab</option> </select> </form> |
Hinweis:
Der abschließende Tag </option> ist nicht zwingend notwendig, es geht aber die Tendenz in Richtung XHTML und XML und dort ist immer ein abschließender Tag nötig!
Vorgabewert
Der Vorgabewert ist bei einer Auswahlliste immer die erste Option in der Liste.
Es besteht aber die Möglichkeit eine andere Option als Vorgabe festzulegen.
Vorsicht:
Im Gegensatz zu den Radiobuttons und Checkboxen muß hier die Eigenschaft selected (ausgewählt) verwendet werden.
Es kann bei der bisher bekannten Auswahlliste nur genau ein Eintrag ausgewählt werden.
|
<form> <select name="Bekannte_Person"> <option value="Norbert"> Norbert Blüm</option> <option value="Ludwig" selected="selected"> König Ludwig</option> <option value="Stefan"> Stefan Raab</option> </select> </form> |
Wichtig:
Bitte hier nie mehr als einen Eintrag mit selected vorgeben !
Im nächsten Kapitel geht's weiter mit den Auswahllisten.