HTML <select> etikett

Definition och användning

<select> Elementet används för att skapa rullgardinslistor.

<select> Elementet används ofta i formulär för att samla in användarinput.

Efter att ha skickat in formuläret måste name-egenskapen användas för att hänvisa till formulärdata (om name-egenskapen utelämnas kommer data från rullgardinslistan inte att skickas in).

<select> Inom elementet <option>-taggen Definiera tillgängliga alternativ i rullgardinslistan.

Använd id-egenskapen för att koppla samman rullgardinslistan med etiketten (label).

Tips:Lägg alltid till <label>-taggen För bästa tillgänglighetspraxis!

Se också:

HTML DOM-referenshandbok:Select-objekt

CSS-lärarlektion:Ställ in formulärstilen

Exempel

Exempel 1

Skapa en rullgardinslista med fyra alternativ:

<label for="cars">Välj en bilmärke:</label>
<select name="cars" id="cars">
  <option value="audi">Audi</option>
  <option value="byd">BYD</option>
  <option value="geely">Geely</option>
  <option value="volvo">Volvo</option>
</select>

Prova själv

Exempel 2

Exempel 2 <select> Används tillsammans med <optgroup>-taggen:

<label for="cars">Välj en bilmärke:</label>
<select name="cars" id="cars">
  <optgroup label="Kinesiska bilar">
    <option value="byd">BYD</option>
    <option value="geely">Geely</option>
  </optgroup>
  <optgroup label="Tyska bilar">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

Prova själv

Egenskap

Egenskap Värde Beskrivning
autofocus autofocus Reglerar att rullgardinslistan automatiskt får fokus vid sidans laddning.
disabled disabled Reglerar att rullgardinslistan bör vara inaktiverad.
form Formulär id Definiera vilken formulär som tillhör rullgardinslistan.
multiple multiple Reglerar att flera alternativ kan väljas samtidigt.
name Namn Definierar namnet på rullgardinslistan.
required required Specificerar att användaren måste välja ett värde innan formuläret skickas in.
size Nummer Definierar antalet synliga alternativ i rullgardinslistan.

Globala egenskaper

<select> Etiketter stöder också Globala egenskaper i HTML.

Händelseegenskaper

<select> Etiketter stöder också Händelseegenskaper i HTML.

Standard CSS-inställningar

Ingen.

Webbläsarstöd

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Stöd Stöd Stöd Stöd Stöd