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 Прави опцията неизбираема (сиво оцветена и недостъпна за потребителя).