Startseite ⇒ HTML Formular ⇒ Auswahlliste
1205 Aufrufe

Auswahllisten definieren

Die Elementtypen select und option

select = auswählen

option = Wahlmöglichkeit


Beschreibung:

Mit den HTML Elementen select und option haben Sie die Möglichkeit dem Anwender eine Liste mit festen Einträgen zum Auswählen anzubieten. Dabei definiert select den Anfang und das Ende der Auswahlliste und mit option notieren Sie die festen Einträge. Der Wert des ausgewählten Feldes wird dann beim Absenden des Formulars übertragen.


Syntax:

Mit dem Start-Tag <select> leiten Sie eine Auswahlliste ein. Mit dem End-Tag </select> schließen Sie die Auswahlliste ab. Dazwischen notieren Sie die Einträge die zur Auswahl stehen sollen. Einen Eintrag leiten Sie mit dem Start-Tag <option> ein und schließen ihn mit </option> ab.


Quelltext:

<form action="URI">
  <select>
    ... Auswahl ...
  </select>
</form>

Quelltext:

<form action="URI">
  <select>
    <option>Eintrag 1</option>
    <option>Eintrag 2</option>
  </select>
</form>

Ausgabe:


Bezeichnernamen: Das Attribut name

name = Name


Beschreibung:

Wie auch die Eingabefelder, sollten auch Auswahllisten interne Bezeichnernamen erhalten. Diese können Sie durch das Attribut name="Bezeichnung" zuweisen.


Syntax:

Notieren Sie das Attribut name="Bezeichnung" in den Start-Tag <select>. Als "Bezeichnung" können Sie einen beliebigen Namen wählen.


Quelltext:

<form action="URI">
  <select name="Stadt">
    <option>Berlin</option>
    <option>Hamburg</option>
  </select>
</form>

Ausgabe:


Anzeigegröße der Liste: Das Attribut size

size = Größe


Beschreibung:

Mit dem Attribut size bestimmen Sie wie viele Einträge angezeigt weren sollen. Wenn die Liste mehr Einträge enthält als angezeigt werden, kann der Anwender in der Liste scrollen


Syntax:

Um die Anzeigegröße der Auswahlliste zu bestimmen, notieren Sie das Attribut size="Wert" in das Start-Tag <select>. Dabei bestimmt "Wert" die Anzahl der Einträge in Zeilen die angezeigt werden sollen.


Quelltext:

<form action="URI">
  <select name="Stadt" size="3">
    <option>Berlin</option>
    <option>München</option>
    <option>Hamburg</option>
    <option>Köln</option>
    <option>Essen</option>
  </select>
</form>

Ausgabe:


Mehrfachauswahl: Das Attribut multiple

multiple = mehrere


Beschreibung:

Wenn Sie wünschen, können Sie dem Anwender, mit dem Attribut multiple, die Möglichkeit bieten mehrere Einträge aus der Auswahlliste auszuwählen. Da dies für den Anwender aber nicht direkt ersichtlich ist, sollten Sie ihn darauf hinweisen.


Syntax:

Um eine Mehrfachauswahl zu ermöglichen, notieren Sie in dem Start-Tag <select> das Attribut multiple. Wenn Sie XHTML-Standard-konform arbeiten, müssen Sie multiple="multiple" notieren.


Quelltext:

<form action="URI">
  <select multiple="multiple">
    <option>Berlin</option>
    <option>München</option>
    <option>Hamburg</option>
    <option>Köln</option>
    <option>Essen</option>
  </select>
</form>

Ausgabe:


Einträge vorselektieren: Das Attribut selected

selected = ausgewählt


Beschreibung:

Manchmal ist es sinnvoll Einträge innerhalb einer Auswahlliste vorzuselektieren. HTML bietet mit dem Attribut selected diese Möglichkeit.


Syntax:

Um einen Eintrag innerhalb einer Auswahlliste vorzuselektieren, notieren Sie im Start-Tag <option>-Tag des betreffenden Eintrags das Attribut selected. Wollen Sie XHTML-konform arbeiten müssen Sie im Start-Tag <option> selected="selected".


Quelltext:

<form action="URI">
  <select name="Stadt" size="5">
    <option>Berlin</option>
    <option selected="selected">München</option>
    <option>Hamburg</option>
    <option>Köln</option>
    <option>Essen</option>
  </select>
</form>

Ausgabe:


Absendewert von Einträgen bestimmen: Das Atrribut value

value = Wert


Beschreibung:

Wenn Sie nichts anderes angeben wird beim Absenden des Formulars der Text übertragen, welcher zwischen den Tags <option> und </option> steht. Mit dem Attribut value="Wert" haben Sie die Möglichkeit, einem Eintrag einen anderen Wert zuzuweisen.


Syntax:

Um einem Eintrag einen anderen Wert zuzuweisen, notieren Sie das Attribut value="Wert" im Start-Tag <option>. Dabei geben Sie für "Wert" den Wert oder Text an, welcher übertragen werden soll.


Quelltext:

<form action="URI">
  <select name="Stadt" size="5">
    <option value="ID14">Berlin</option>
    <option value="ID05">München</option>
    <option value="ID20">Hamburg</option>
    <option value="ID09">Köln</option>
    <option value="ID17">Essen</option>
  </select>
</form>

Ausgabe:


Weiterführende Informationen:


Weblinks: