Випадаючий список select

Тег <select> формує або випадаючий список, або поле вибору варіантів:

Тег списку може мати атрибут size, в значенні якого прописується число видимих строк. Якщо число дорівнює 1 або цей атрибут відсутній - список буде випадаючим.

Якщо задано розмір списку, то можна добавити атрибут multiple, що відповідає за можливість вибору декількох строк списку.

Елементи списку задаютьса тегами <option>.

Тег opiton може мати такі атрибути:

selected - вибрана по-замовчуванню строка.

disabled - строка, яку неможливо вибрати

value - значення, що передається на сервер в парі [ключ - значення].

Ви дуже обмежено можете стилізувати елементи option: виділити жирним, зробити текст нахиленим.


				<p>

				  <label>

				    Gender:

				    <select>

				      <option>male<option>

				      <option>female</option>

				      <option>other</option>

				    </select>

				  </label>

				</p>


				<p>

				  <label>

				    <select>

				      <option disabled>Виберіть місто:</option>

				      <option value="khm">Хмельницький<option>

				      <option value="vn">Вінниця</option>

				      <option value="ter">Тернопіль</option>

				      <option value="lv">Львів</option>

				    </select>

				  </label>

				</p>


				<p>

				  <label>

				    <select size="3" multiple>

				      <option value="khm">Хмельницький</option>

				      <option value="vn" selected>Вінниця</option>

				      <option value="ter">Тернопіль</option>

				      <option value="lv" disabled>Львів</option>

				    </select>

				  </label>

				</p>

Варіант списку multiple наразі використовується дуже рідко через його неочевидність, поганий UI/UX, його заміняють звичайним списком чекбоксів:

Хмельницький
Вінниця
Тернопіль
Львів


				<label><input type="checkbox" name="city_khm"> Хмельницький</label>

				<label><input type="checkbox" name="city_vn"> Вінниця</label>

				<label><input type="checkbox" name="city_ter"> Тернопіль</label>

				<label><input type="checkbox" name="city_lv"> Львів</label>

Приклад підміни елемента select на радіокнопки та випадаючий список для довільної стилізації (на чистому CSS): jsFiddle.