4.8.7 Auswahllisten

• 1 Allgemein
• 2 Einfache Auswahlliste select mit option
• 3 Auswahllisten mit Mehrfachauswahl multiple
• 4 Einträge vorselektieren option selected
• 5 Absendewert von Einträgen bestimmen value
• 6 Liste mit farbigem Hintergrund und farbigen Einträgen
• 7 Grundlagen-Websites & Workshops

Technik Formulare: Beschriftung mit Labels Formulare: Eingabefelder definieren

Anwendung Formulare: Formularbox

-

⇧ 1 Allgemein

Prinzip

• Auswahllisten sind ein weiteres Element von Formularen.

• select Dient zur Selektionierung.

• option Mit diesem Code können verschiedene Optionen angeboten werden.

-

⇧ 2 Einfache Auswahlliste select mit option

Code

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

Wahl eines der 5 Interpreten:

Interpret Heino Michael Jackson Tom Waits Nina Hagen Marianne Rosenberg

Workshop

• SELFHTML-Wiki de HTML/Formulare/Auswahllisten Beispiel

-

⇧ 3 Auswahllisten mit Mehrfachauswahl multiple

Prinzip

• Mit drücken der "Shift"-Taste können mehrere Optionen gewählt werden.

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

Mit der "Shift"-Taste können mehrere gewählt werden:

Interpret Heino Michael Jackson Tom Waits Nina Hagen Marianne Rosenberg

Workshop

• SELFHTML-Wiki de Auswahllisten mit Mehrfachauswahl Beispiel

-

⇧ 4 Einträge vorselektieren option selected

Prinzip

• Ein Eintrag der Optionen kann bereits makiert sein.
  Der Anwender kann aber auch eine andere Option wählen.

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

Sie können auch einen anderen Favoriten wählen!

Interpret Heino Michael Jackson Tom Waits Nina Hagen Marianne Rosenberg

Workshop

• SELFHTML-Wiki de Einträge vorselektieren Beispiel

-

⇧ 5 Absendewert von Einträgen bestimmen 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.
  Dieser Wert wird anstatt dem Namen, der zwischen <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

Pizza-Bestellung:

Pizza Pizza Napoli Pizza Funghi Pizza Mare Pizza Tonno Pizza Mexicana Pizza Regina Pizza de la Casa Pizza Calzone Pizza con tutti

Workshop

• SELFHTML-Wiki de Absendewert von Einträgen bestimmen Beispiel

-

⇧ 6 Liste mit farbigem Hintergrund und farbigen Einträgen

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

Farbige Einträge Eintrag 1 Eintrag 2 Eintrag 3 Eintrag 4 Eintrag 5 Eintrag 6 Eintrag 7

-

⇧ 7 Grundlagen-Websites & Workshops

• W3C Recommendation -
  HTML 4.01 Specification:
  Deutsche Übersetzung de Die Elemente SELECT, OPTGROUP und OPTION

• SELFHTML-Wiki de HTML/Formulare/Auswahllisten Beispiel
• SELFHTML-Wiki de Auswahllisten mit Mehrfachauswahl Beispiel
• SELFHTML-Wiki de Einträge vorselektieren Beispiel
• SELFHTML-Wiki de Absendewert von Einträgen bestimmen Beispiel
• SELFHTML-Wiki de Verschachtelte Auswahllisten (Menüstruktur) definieren Beispiel

↑