HTML таг option
Пример
Кратък пример как се използва тагът <option>.
<label for="city" class="form-label">Избери град:</label>
<select id="city" name="city" class="form-select">
<option value="" selected disabled>-- Моля, изберете --</option>
<option value="sofia">София</option>
<option value="plovdiv">Пловдив</option>
<option value="varna">Варна</option>
<option value="burgas" disabled>Бургас (временно недостъпен)</option>
</select>
Опитай в редактора
Дефиниция и употреба
Виж как се ползва тагът <option>.
Елементът <option> дефинира отделна опция (избор) в падащ списък или списък с множество избори.
Той се използва само вътре в елементи като <select> и <datalist>.
Всеки <option> представлява една стойност, която потребителят може да избере.
Най-често се използва атрибутът value, който определя стойността, изпращана към сървъра при изпращане на формата.
Текстът между отварящия и затварящия таг на <option> е това, което потребителят вижда в интерфейса.
Често се използват и атрибутите selected (за предварително избрана опция) и disabled
(за деактивиране на дадена опция). Когато няма зададен атрибут value, за стойност се използва
текстът на опцията.
В комбинация с Bootstrap 5.3, <option> се използва в рамките на
<select class="form-select">, за да се възползвате от стилизираните полета за избор.
Browser Support
| Browser | Поддръжка |
|---|---|
|
Chrome |
✔️ |
|
Firefox |
✔️ |
|
Edge |
✔️ |
|
Safari |
✔️ |
|
Opera |
✔️ |
Атрибути
| Атрибут | Описание |
|---|---|
value |
Стойността, която се изпраща към сървъра, когато тази опция е избрана. Ако липсва, се използва текстът на опцията. |
label |
Алтернативен етикет за опцията, използван от някои браузъри или помощни технологии. |
selected |
Маркира опцията като предварително избрана при зареждане на страницата. |
disabled |
Прави опцията неизбираема (сиво оцветена и недостъпна за потребителя). |