HTML
Selectie menu bedieningselementen

Syntaxis

• <select name=""></select>
• <datalist id=""></datalist>
• <optgroup label="Option Group"></optgroup>
• <option value="">Option</option>

Selecteer menu

Het element <select> genereert een vervolgkeuzemenu waaruit de gebruiker een optie kan kiezen.

<select name="">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
</select>

De grootte wijzigen

U kunt de grootte van het selectiemenu wijzigen met het kenmerk size . Een grootte van 0 of 1 geeft het standaard vervolgkeuzemenu weer. Een grootte groter dan 1 converteert de vervolgkeuzelijst naar een vak met zoveel regels, met één optie per regel en een schuifbalk om door de beschikbare opties te bladeren.

<select name="" size="4"></select>

Keuzemenu's met meerdere opties

Standaard kunnen gebruikers slechts één optie selecteren. Door het multiple attribuut toe te voegen, kunnen gebruikers meerdere opties tegelijk selecteren en alle geselecteerde opties met het formulier indienen. Als u het kenmerk multiple wordt het vervolgkeuzemenu automatisch omgezet in een vak alsof er een grootte is gedefinieerd. De standaardgrootte wanneer dit gebeurt, wordt bepaald door de specifieke browser die u gebruikt en het is niet mogelijk om het terug te veranderen naar een vervolgkeuzemenu terwijl u meerdere selecties toestaat.

<select name="" multiple></select>

Bij gebruik van het multiple attribuut is er een verschil tussen het gebruik van 0 en 1 voor de grootte, terwijl er geen verschil bestaat wanneer het attribuut niet wordt gebruikt. Als u 0 gebruikt, gedraagt de browser zich op de standaardmanier waarop deze is geprogrammeerd. Als u 1 gebruikt, wordt de grootte van het resulterende vak expliciet ingesteld op slechts één rij hoog.

Optiegroepen

U kunt uw opties netjes groeperen in een selectiemenu om een meer gestructureerde lay-out te bieden in een lange lijst met opties met behulp van het element <optgroup> .

De syntax is zeer eenvoudig, door eenvoudig het element een label attribuut de titel identificeren van de groep en met nul of meer opties die moet binnen die groep.

<select name="">
  <option value="milk">Milk</option>
  <optgroup label="Fruits">
    <option value="banana">Bananas</option>
    <option value="strawberry">Strawberries</option>
  </optgroup>
  <optgroup label="Vegetables" disabled>
    <option value="carrot">Carrots</option>
    <option value="zucchini">Zucchini</option>
  </optgroup>
</select>

Bij het gebruik van optiegroepen hoeven niet alle opties binnen een groep te zijn opgenomen. Als u een optiegroep uitschakelt, worden ook alle opties binnen de groep uitgeschakeld en is het niet mogelijk om een enkele optie binnen een uitgeschakelde groep handmatig opnieuw in te schakelen.

opties

De opties in een selectiemenu zijn wat de gebruiker zal selecteren. De normale syntaxis voor een optie is als volgt:

<option>Some Option</option>

Het is echter belangrijk op te merken dat de tekst in het <option> -element zelf niet altijd wordt gebruikt en in wezen de standaardwaarde wordt voor attributen die niet zijn opgegeven.

De attributen die het daadwerkelijke uiterlijk en de functie van de optie bepalen, zijn value en label . Het label vertegenwoordigt de tekst die wordt weergegeven in het vervolgkeuzemenu (waar u naar kijkt en erop klikt om het te selecteren). De waarde vertegenwoordigt de tekst die samen met het indienen van het formulier wordt verzonden. Als een van deze waarden wordt weggelaten, wordt in plaats daarvan de tekst in het element gebruikt. Dus het voorbeeld dat we hierboven hebben gegeven, zou hierop kunnen worden "uitgebreid":

<option label="Some Option" value="Some Option">

Let op het weglaten van de binnentekst en de eindtag, die niet nodig zijn om een optie in het menu te bouwen. Als ze zouden worden opgenomen, zou de binnentekst worden genegeerd omdat beide kenmerken al zijn opgegeven en de tekst niet nodig is. Je zult echter waarschijnlijk niet veel mensen zien die ze op deze manier schrijven. De meest voorkomende manier waarop het wordt geschreven, is met een waarde die naar de server wordt verzonden, samen met de binnentekst die uiteindelijk het labelkenmerk wordt, als volgt:

<option value="option1">Some Option</option>

Standaard een optie selecteren

U kunt ook een bepaalde optie opgeven die standaard in het menu moet worden geselecteerd door het selected kenmerk eraan te koppelen. Als er geen optie is opgegeven zoals geselecteerd in het menu, wordt standaard de eerste optie in het menu geselecteerd wanneer deze wordt weergegeven. Als aan het selected attribuut meer dan één optie is gekoppeld, is de laatste optie in het menu met het attribuut die standaard geselecteerd.

<option value="option1" selected>Some option</option>

Als u het kenmerk in een keuzemenu met meerdere opties gebruikt, worden standaard alle opties met het kenmerk geselecteerd en wordt er geen optie geselecteerd als er geen optie is.

<select multiple>
  <option value="option1" selected>Some option</option>
  <option value="option2" selected>Some option</option>   
</select>

Datalist

De tag <datalist> geeft een lijst met vooraf gedefinieerde opties voor een <input> -element. Het biedt een "autocomplete" -functie op <input> -elementen. Gebruikers zien tijdens het schrijven een vervolgkeuzelijst met opties.

<input list="Languages">

<datalist id="Languages">
  <option value="PHP">
  <option value="Perl">
  <option value="Python">
  <option value="Ruby">
  <option value="C+">
</datalist>

Browserondersteuning