<option>
Pojedyncza opcja listy `<select>` albo podpowiedź w `<datalist>`.
- Wyświetlanie
- block
- Znacznik zamykający
- Wymagany
- Dozwolona zawartość
- Tekst
Przykład
#<label for="city">Miasto warsztatów</label>
<select id="city" name="city">
<option value="krk">Kraków</option>
<option value="waw" selected>Warszawa</option>
<option value="gda" disabled>Gdańsk (brak miejsc)</option>
</select>Definicja i zastosowanie
#Element <option> reprezentuje jedną pozycję do wyboru. Najczęściej stoi wewnątrz <select> albo <optgroup>, a w <datalist> służy jako podpowiedź dla pola tekstowego.
Tekst między znacznikami to to, co widzi użytkownik, a atrybut value to wartość wysyłana na serwer. Dzięki temu możesz pokazać „Wrocław”, a wysłać krótki kod wro. Jeśli pominiesz value, wysłany zostanie tekst opcji.
Opcję zaznaczysz na starcie atrybutem selected albo zablokujesz atrybutem disabled. Znacznik zamykający </option> formalnie można pominąć, ale warto go pisać.
Składnia
#<option value="wartość">Tekst opcji</option>Atrybuty
#tekst
Wartość wysyłana z formularzem, gdy ta opcja jest wybrana. Bez tego atrybutu wysyłany jest tekst opcji.atrybut logiczny
Zaznacza opcję po wczytaniu strony. Jeśli w liście bezmultipleoznaczysz tak kilka opcji, przeglądarka zostawi zaznaczoną tylko ostatnią z nich. Gdy nie zaznaczysz żadnej, wybrana będzie pierwsza dostępna opcja.atrybut logiczny
Pokazuje opcję, ale nie pozwala jej wybrać. Przydaje się dla wyprzedanych terminów albo funkcji dostępnych w wyższym planie.label
tekst
Etykieta opcji używana zamiast jej treści. W praktyce rzadko potrzebna, bo zwykle wystarczy sam tekst między znacznikami.
Element obsługuje też wszystkie atrybuty globalne, takie jak class, id, style czy hidden.
Atrybuty w praktyce
#value
tekstWartość wysyłana z formularzem, gdy ta opcja jest wybrana. Bez tego atrybutu wysyłany jest tekst opcji.
<select name="level" aria-label="Poziom">
<option value="1">Początkujący</option>
<option value="2">Średniozaawansowany</option>
<option value="3">Zaawansowany</option>
</select>selected
atrybut logicznyZaznacza opcję po wczytaniu strony. Jeśli w liście bez multiple oznaczysz tak kilka opcji, przeglądarka zostawi zaznaczoną tylko ostatnią z nich. Gdy nie zaznaczysz żadnej, wybrana będzie pierwsza dostępna opcja.
<select name="plan" aria-label="Plan">
<option value="monthly">Miesięczny</option>
<option value="yearly" selected>Roczny</option>
</select>disabled
atrybut logicznyPokazuje opcję, ale nie pozwala jej wybrać. Przydaje się dla wyprzedanych terminów albo funkcji dostępnych w wyższym planie.
<select name="date" aria-label="Termin">
<option>12 października</option>
<option disabled>19 października (brak miejsc)</option>
<option>26 października</option>
</select>Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Wartości
valuezapisuj w stałej, krótkiej formie, na przykład jako kody lub identyfikatory. Tekst opcji możesz wtedy dowolnie zmieniać bez psucia kodu po stronie serwera. - Opcja podpowiedzi „Wybierz…” powinna mieć
value="", a sama lista atrybutrequired.
Powiązane hasła
#- <select>Rozwijana lista, z której użytkownik wybiera jedną lub kilka opcji.
- <optgroup>Nazwana grupa opcji wewnątrz listy `<select>`.
- <datalist>Lista podpowiedzi dla pola `<input>`. Można wybrać propozycję albo wpisać własną wartość.
- <form>Formularz, który zbiera dane od użytkownika i wysyła je pod wskazany adres.
Widzisz błąd albo brakuje przykładu? Napisz do nas.