HTML таг `select`

Пример

Кратък пример как се използва тагът <select>.

<form>
  <div class="mb-3">
    <label for="country" class="form-label">Избери държава</label>
    <select id="country" name="country" class="form-select">
      <option value="" selected disabled>-- Моля, изберете --</option>
      <option value="bg">България</option>
      <option value="de">Германия</option>
      <option value="fr">Франция</option>
    </select>
  </div>
  <button type="submit" class="btn btn-primary">Изпрати</button>
</form>

Опитай в редактора

Дефиниция и употреба

Виж как се ползва тагът <select>.

<select> се използва за създаване на падащ списък (drop-down list) в HTML формуляри. Вътре в него се поставят един или повече елементи <option>, които представляват отделните избори за потребителя. Често се комбинира с етикет <label>, за да се опише какво точно избира потребителят.

Основни характеристики на <select>:

Избор на една стойност – по подразбиране потребителят може да избере само една опция от списъка.
Множествен избор – с атрибута multiple може да се позволи избор на повече от една опция.
Свързване с формуляри – чрез атрибутите name и id стойността на избраната опция се изпраща към сървъра при изпращане на формата.
Предварително избрана опция – с атрибута selected върху <option> може да се зададе начална стойност.
Групиране на опции – с елемента <optgroup> може да се групират свързани опции под общо заглавие.

В контекста на Bootstrap 5.3 към <select> обикновено се добавя класът form-select, за да се приложи стилизиран външен вид, съвместим с останалите компоненти на формите.

Browser Support

Browser	Поддръжка
Chrome	✔️
Firefox	✔️
Edge	✔️
Safari	✔️
Opera	✔️

Атрибути

Атрибут	Описание
`name`	Име на контролата; използва се като ключ при изпращане на формата към сървъра.
`id`	Уникален идентификатор в документа; често се използва за свързване с `<label>` и за JavaScript.
`multiple`	Позволява избор на повече от една опция едновременно.
`size`	Определя колко опции да се виждат едновременно (без да се отваря падащ списък).
`required`	Прави избора задължителен преди изпращане на формата.
`disabled`	Деактивира контролата, така че да не може да се променя и не се изпраща при submit.
`form`	Свързва `<select>` с конкретна форма по `id`, дори да не е вътре в нея.
`autofocus`	Автоматично фокусира контролата при зареждане на страницата.

Тагове

a abbr address area article aside audio b base bdi bdo blockquote body br button canvas caption cite code col colgroup data datalist dd del details dfn dialog div dl dt em embed fencedframe fieldset figcaption figure footer form h1 h2 h3 h4 h5 h6 head header hgroup hr html i iframe img input ins kbd label legend li link main map mark menu meta meter nav noscript object ol optgroup option output p picture pre progress q rp rt ruby s samp script search section select selectedcontent slot small source span strong style sub summary sup table tbody td template textarea tfoot th thead time title tr track u ul var video wbr

HTML таг select