Element-Referenz
HTML 5 doctype - weil html einfach einfach ist.
nach oben

    <select>

    Bedeutung

    Auswahlliste in einem Formular


    Notation

    <select [Attribute]>[Elementinhalt]</select>

    Elternelemente

    Kann gemäß der HTML5 Spezifikation innerhalb der folgenden Elemente vorkommen:

    Liste der HTML 5 Block-ElementeBlock-Elemente und Liste der HTML 5 Inline-ElementeInline-Elemente.


    Elementinhalt

    Kann Text mit folgenden anderen HTML-Elementen enthalten:
    zum <optgroup> Element<optgroup> und zum <option> Element<option>.


    Attribute

    Kann folgende elementspezifische Attribute enthalten:
    zum HTML5 Attribut autofocusautofocus | zum HTML5 Attribut disableddisabled | zum HTML5 Attribut formform | zum HTML5 Attribut multiplemultiple | zum HTML5 Attribut namename | zum HTML5 Attribut sizesize

    Des Weiteren kann das Element folgende allgemeinen Attribute und Event-Handler enthalten:
    zum HTML5 Attribut accesskeyaccesskey | zum HTML5 Attribut classclass | zum HTML5 Attribut contenteditablecontenteditable | zum HTML5 Attribut contextmenucontextmenu | zum HTML5 Attribut datadata | zum HTML5 Attribut dirdir | zum HTML5 Attribut draggabledraggable | zum HTML5 Attribut hiddenhidden | zum HTML5 Attribut idid | zum HTML5 Attribut itemitem | zum HTML5 Attribut itempropitemprop | zum HTML5 Attribut langlang | zum HTML5 Attribut spellcheckspellcheck | zum HTML5 Attribut stylestyle | zum HTML5 Attribut subjectsubject | zum HTML5 Attribut tabindextabindex | zum HTML5 Attribut titletitle

    onabort | onblur | onchange | onclick | oncontextmenu | ondblclick | ondrag | ondragend | ondragenter | ondragleave | ondragover | ondragstart | ondrop | onfocus | onformchange | onforminput | oninput | onkeydown | onkeypress | onkeyup | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onmousewheel | onscroll | onselect | onsubmit


    Standard-Style-Formateigenschaften

    select {
       display: inline-block
    }


    Beispiel
    <p><label>Browser<br />
    <select name="browsers" size="1">
    <option value="IE5">Internet Explorer 5.0</option>
    <option value="IE6" selected="selected" >Internet Explorer 6.0</option>
    <option value="IE7">Internet Explorer 7.0</option>
    <option value="FF30">Mozilla Firefox 3.0</option>
    <option value="FF35">Mozilla Firefox 3.5</option>
    <option value="FF36">Mozilla Firefox 3.6</option>
    <option value="FF40">Mozilla Firefox 4.0</option>
    </select></label></p>
    <p><label>Browser<br />(Mehrfachauswahl möglich)<br>
    <select name="browsers" multiple="multiple">
    <optgroup label="Internet Explorer">
    <option value="IE5">Version 5.0</option>
    <option value="IE6" selected="selected" >Version 6.0</option>
    <option value="IE7">Version 7.0</option>
    </optgroup>
    <optgroup label="Mozilla Firefox">
    <option value="FF30">Version 3.0</option>
    <option value="FF35">Version 3.5</option>
    <option value="FF36" selected="selected" >Version 3.6</option>
    <option value="FF40">Version 4.0</option>
    </optgroup>
    </select></label></p>
    Anzeigebeispiel

    Erläuterung

    Das <select> Element definiert eine Auswahlliste in deren Elemtinhalt mit dem <option> Element einzelne Eintäge definiert werden. Der </select> Tag definiert das Ende der Auswahlliste. Das name Attribut im einleitenden <select> Tag definiert einen eindeutigen Namen innerhalb eines Formulars.

    Der jeweilige Wert eines Eintrages, der mit dem Formular übergeben werden soll, wird durch das value Attribut im einleitenden <option> Tag der Auswahlliste definiert. Dem Formular wird dann ein sogenanntes Name-Wert-Paar, im ersten Beispiel browsers = IE6 übergeben. Wird kein value Attribut angegeben, so wird dem Formular der Elementinhalt der ausgewählten <option> Elemente übergeben.

    Um einen Eintrag einer Auswahlliste bereits vorzuselektieren, ist im einleitenden <option> Tag des betreffenden Eintrags der Auswahlliste das selected Attribut zu notieren. Wie im XHTML Beispiel <option value="IE6" selected="selected" >Internet Explorer 6.0</option>.

    Das Attribut multiple im einleitenden <select> Tag definiert die Mehrfachauswahl innerhalb einer Auswahlliste. Dies ist für den Nutzer jedoch nicht unmittelbar zu erkennen, sodass in diesem Fall darauf hingewiesen werden sollte. Ebenso sollte dem Nutzer dem gegebenenfalls nicht bekannt ist wie mehrere Einträge selektiert werden können ein unterstützender Hinweis gegeben werden. In der Regel ist für das Selektieren mehrerer Einträge das Halten der [Strg] Taste bei gleichzeitigem Anklicken der gewünschten Listeneinträge erforderlich, Mac Nutzer verwenden dafür die [Befehlstaste].

    Für eine Gruppierung von Einträgen innerhalb einer Auswahlliste, werden die zu gruppierenden <option> Elemente einer Gruppe zwischen <optgroup>[...]</optgroup> notiert. Mit dem label Attribut wird die Überschrift der jeweiligen Gruppierung definiert.


    W3C Logo & WHATWG Logo Spezifikation

    Tastaturkürzel