Keuzelijsten definiëren.

Je kunt een bezoeker een lijst met -inhoud- voorstellen, waaruit gekozen kan worden. De tekst die aangeklikt wordt, wordt dan verstuurd.

Voorbeeld:

Output

Toelichting:

<select ...> is de start-tag van de keuzelijst. Iedere lijst moet een interne naam hebben met behulp van de verwijzing name=. De naam mag niet te lang zijn en geen spaties of speciale tekens bevatten. Hoogstens kun je een "_" (underscore) gebruiken. Zet de naam in aanhalingstekens.

Met het attribuut size= bepaal je de afmeting van de lijst, d.w.z hoeveel -inhoud- getoond wordt in het scherm. Als de lijst meer inhoud heeft kan de gebruiker scrollen. Met size=1 maakt U een z.g. "drop-down-lijst/box".

<option> definieert een naam op de lijst. Achter <option> zet je de naam. Je kunt zoveel namen onder elkaar zetten als je wilt.

Het is goede HTML om eind-tags toe te passen, maar </option> is niet voorgeschreven.

Met </select> moet je de lijst afsluiten.

Oppassen:

De breedte van een lijst wordt automatisch vastgesteld, afhankelijk van de langste naam.

Met behulp van JavaScript kunt je dit soort lijsten ook, op een heel andere manier, gebruiken om verwijzingen binnen je project te realiseren.

Meervoudige keuzelijsten.

Indien je niets anders opgeeft, kan de bezoeker uit een keuzelijst slechts een item kiezen. Je kunt echter een -meervoudige- keuze toestaan.

Voorbeeld:

Toelichting:

Meervoudige keuzelijsten worden zoals normale lijsten gedefinieert. De meervoudige keuze mogelijkheid staat je toe m.b.v het extra attribuut multiple in de start-tag <select>.

Oppassen:

Een meervoudige keuze is voor een bezoeker niet altijd op de eerste blik herkenbaar. Daarom verdient het aanbeveling je bezoeker erop te wijzen dat een meervoudige keuze mogelijk is. Op een modern toetsenbord gebeurt dat door het vasthouden van de CTRL-toets en het gelijktijdig klikken met de muis op de gewenste naam in de lijst.

Voorkeuze definiëren.

Indien je niets anders opgeeft, wordt geen enkele naam voorgesteld. Je kunt echter -vooraf- een naam selekteren. In verbinding met -meervoudige- keuze kunt je ook meerdere namen -voor-selekteren. Voorgeselekteerde namen worden dmv een markeringsbalk getoond.

Voorbeeld:

Toelichting:

Keuzelijsten met voorselektie worden zoals normale keuzelijsten gedefinieerd. Om een naam -voor- te selekteren zet je in de tag <option...> bij de gekozen naam het extra attribuut selected.

Gegevens coderen.

Gewoonlijk wordt bij het versturen van het formulier de tekst van de gekozen naam verstuurd die achter <option> staat. Je kunt echter bepalen dat -intern- een ander gegeven (tekst/nummer) wordt verstuurd.

Voorbeeld:

Toelichting:

Keuzelijsten met andere -verstuurde- gegevens worden zoals normale lijsten gedefinieerd. Om i.p.v de naam op de lijst, een ander gegeven te versturen, zet je in de tag <option...> het attribuut value= (value = waarde). Het gegeven moet tussen aanhalingstekens staan. Bij het versturen wordt dus niet de naam van de pizza verstuurd, maar wel de afkorting die de pizzabakker heeft vastgesteld (zoals in het voorbeeld hierboven ).

Menustructuur definiëren.

Het onderstaande voorbeeld moet een browser niet als een gewone keuzelijst laten zien, maar wel zoals bijvoorbeeld het startmenu van Windows 95.

Netscape 4.70 en MS Internet Explorer 5.0 kunnen dat echter nog niet.

Voorbeeld:

Toelichting:

Een browser moet volgens het W3C een dergelijke menustruktuur net zo laten zien als bijvoorbeeld het -start-menu- in WIN-95.

Om zo'n menu te maken, definieer je subgroepen met gegevens in het keuzemenu. Daarvoor noteer je tussen <select> en </select> voor elke gewenste subgroep de <optgroup> tag en als afsluiting van de subgroep de eind-tag </optgroup>. In de start-tag <optgroup> vergeef je d.m.v het attribuut label= een naam voor de groep van gegevens. De naam moet tussen aanhalingstekens staan.

Voor de gegevens binnen de subgroep noteer je de <option> tag. Ook hier bepaal je het getoonde menu met het attribuut label=.

De waarde die je achter <option> noteert is voor het tonen van het menu zonder belang. Het is wel belangrijk een waarde te noteren omdat browsers die de menustruktuur niet kunnen laten zien, in plaats daarvan een gewone keuzelijst tonen met de gegevens die je achter de <option> tag noteert.

Oppassen:

Indien je z.g. sub-sub-groepen wilt realiseren, noteer je eenvoudig tussen de <optgroup>...</optgroup> op de gewenste plaats een volgende groep met <optgroup>...</optgroup>.

Diversen

Universele attributen binnen de <select> en <option> tags zijn mogelijk.

Het is verder mogelijk om CSS style-sheets te gebruiken. Netscape kan dat in versie 4.0 nog niet, MS Internet Explorer 4.0 interpreteert CSS style-sheets in verbinding met formulier elementen wel.