Startseite | Gästebuch | Kontakt

 
xx HTML-Einführung | xx CSS-Einführung | xx JavaScript-Einführung
 

10.6. Auswahlliste

Hinter einer Auswahlliste oder Drop-Down-Menü verbirgt sich eine Reihe von Einträgen, die erst durch Aktivierung der Liste angezeigt werden.

<html>
 <head>
  <title>Formular</title>
 </head>
 <body>
  <form>
   Wählen Sie die Stadt:
   <select name="Reise">
     <option>Berlin</option>
     <option>Paris</option>
     <option>London</option>
     <option>Rom</option>
   </select>
  </form>
 </body>
</html>
» Beispiel ansehen «

 

Die Höhe der Anzeige in der Auswahlliste wird mit dem Attribut size im <select>-Tag angegeben. Der Wert im Attribut value im <option>-Tag wird als Übergabeparameter für die ausgewählte Option benutzt.

<html>
 <head>
  <title>Formular</title>
 </head>
 <body>
  <form>
   <p>Wählen Sie eine Stadt:</p>
   <select name="Reise" size="3">
     <option value="Berlin">Berlin</option>
     <option value="Paris">Paris</option>
     <option value="London">London</option>
     <option value="Rom">Rom</option>
   </select>
  </form>
 </body>
</html>
» Beispiel ansehen «

 

Wird keine Größe (size) angegeben, gilt Standard und das ist die Höhe einer Option.

 

Für eine Mehrfachauswahl wird multiple="multiple" im <select>-Tag genutzt. Eine Mehrfachauswahl aktiviert man mit gedrückter Strg-Taste und einem Mausklick auf die entsprechende Option. Ein Eintrag in der Auswahlliste wird mit selected="selected" im entsprechendem <option>-Tag als vorbelegt gekennzeichnet.

<html>
 <head>
  <title>Formular</title>
 </head>
 <body>
  <form>
   <p>Wählen Sie mehrere Städte mithilfe der STRG-Taste:</p>
   <select name="Reise" size="3" multiple="multiple">
     <option value="Berlin" selected="selected">Berlin</option>
     <option value="Paris">Paris</option>
     <option value="London">London</option>
     <option value="Rom">Rom</option>
   </select>
  </form>
 </body>
</html>
» Beispiel ansehen «

» zurück «» Seitenanfang «» weiter «