Пошук уроків, статей та іншого контенту
Створюйте випадаючі списки select, додавайте option і задавайте початкове та множинне значення.
<select>Елемент <select> створює випадаючий список. Користувач може відкрити його та вибрати одне або кілька значень.
Кожен пункт списку додають за допомогою елемента <option>.
<label for="city">Оберіть місто:</label>
<select id="city" name="city">
<option value="kyiv">Київ</option>
<option value="lviv">Львів</option>
<option value="odesa">Одеса</option>
<option value="kharkiv">Харків</option>
</select>У браузері цей код створить випадаючий список із чотирма містами.
<option>Елемент <option> описує один пункт списку:
<select name="language">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="javascript">JavaScript</option>
</select>У користувацькому інтерфейсі відображається текст між відкривальним і закривальним тегами:
<option value="html">HTML</option>HTML — текст, який бачить користувач.
value="html" — значення, яке буде передано формі.
Зазвичай value записують англійською або в іншому короткому форматі, а зрозумілий користувачу текст розміщують усередині <option>.
За замовчуванням вибраним є перший пункт списку. Щоб одразу вибрати інший пункт, додайте йому атрибут selected.
<select name="language">
<option value="html">HTML</option>
<option value="css" selected>CSS</option>
<option value="javascript">JavaScript</option>
</select>Після відкриття сторінки вибраним буде пункт CSS.
Атрибут selected є булевим атрибутом. Його можна записувати без значення:
<option selected>CSS</option>Також допустимий запис із явним значенням:
<option selected="selected">CSS</option>Проте короткий варіант є більш поширеним.
Іноді список має спочатку показувати підказку, а не справжній вибір. Для цього першому <option> можна додати disabled і selected.
<label for="topic">Оберіть тему:</label>
<select id="topic" name="topic">
<option value="" disabled selected>Оберіть тему</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="accessibility">Доступність</option>
</select>selected показує цей пункт спочатку.
disabled забороняє вибрати його як звичайне значення.
value="" задає порожнє значення.
Такий варіант допомагає користувачу зрозуміти, що потрібно зробити вибір.
<label>Для доступності кожен список варто пов’язувати з підписом <label>. Значення атрибута for у <label> має збігатися зі значенням id у <select>.
<label for="country">Країна:</label>
<select id="country" name="country">
<option value="ukraine">Україна</option>
<option value="poland">Польща</option>
<option value="germany">Німеччина</option>
</select>Користувач може натиснути не лише на сам список, а й на його підпис, щоб активувати поле.
id потрібен для зв’язку з <label>, а name — для імені поля під час надсилання форми.
За замовчуванням у <select> можна вибрати лише один пункт. Атрибут multiple дозволяє вибрати кілька пунктів.
<label for="skills">Оберіть навички:</label>
<select id="skills" name="skills" multiple>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="javascript">JavaScript</option>
<option value="git">Git</option>
</select>У браузері такий список зазвичай відображається як поле, у якому можна вибрати кілька пунктів.
Щоб вибрати кілька варіантів, користувач зазвичай утримує клавішу Ctrl у Windows або Command у macOS під час натискання. На мобільних пристроях спосіб взаємодії залежить від браузера та операційної системи.
Для множинного списку можна позначити одразу кілька пунктів атрибутом selected.
<select name="technologies" multiple>
<option value="html" selected>HTML</option>
<option value="css" selected>CSS</option>
<option value="javascript">JavaScript</option>
<option value="python">Python</option>
</select>У цьому прикладі спочатку вибрані HTML і CSS.
Наступний приклад містить звичайний список з одним вибраним значенням і список із множинним вибором.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Випадаючі списки</title>
</head>
<body>
<form>
<p>
<label for="experience">Ваш рівень:</label>
<select id="experience" name="experience">
<option value="" disabled selected>Оберіть рівень</option>
<option value="beginner">Початківець</option>
<option value="middle">Середній</option>
<option value="advanced">Просунутий</option>
</select>
</p>
<p>
<label for="technologies">Оберіть технології:</label>
<select id="technologies" name="technologies" multiple>
<option value="html" selected>HTML</option>
<option value="css" selected>CSS</option>
<option value="javascript">JavaScript</option>
</select>
</p>
<button type="submit">Надіслати</button>
</form>
</body>
</html>У першому списку можна вибрати лише один рівень. Перший пункт є підказкою, тому його не можна вибрати.
У другому списку можна вибрати кілька технологій. HTML і CSS будуть вибрані початково.
nameВизначає ім’я поля у формі:
<select name="color">
<option value="red">Червоний</option>
<option value="blue">Синій</option>
</select>idВикористовується для унікальної ідентифікації елемента та зв’язку з <label>:
<label for="color">Колір:</label>
<select id="color" name="color">
<option value="red">Червоний</option>
</select>valueВизначає значення конкретного пункту:
<option value="red">Червоний</option>Користувач бачить Червоний, а форма використовує значення red.
selectedВибирає пункт початково:
<option value="css" selected>CSS</option>multipleДозволяє вибирати кілька пунктів:
<select name="skills" multiple>
<option value="html">HTML</option>
<option value="css">CSS</option>
</select>disabledРобить список або окремий пункт недоступним для вибору:
<select name="format">
<option value="pdf">PDF</option>
<option value="docx" disabled>DOCX — недоступно</option>
</select><label> і <select>Неправильно:
<label for="city">Місто:</label>
<select name="city">
<option value="kyiv">Київ</option>
</select>У <select> немає id="city", тому for="city" не посилається на потрібний елемент.
Правильно:
<label for="city">Місто:</label>
<select id="city" name="city">
<option value="kyiv">Київ</option>
</select>selected у кількох пунктах звичайного спискуДля списку без multiple потрібно вибирати один початковий пункт:
<select name="language">
<option value="html" selected>HTML</option>
<option value="css">CSS</option>
</select>Якщо додати selected кільком пунктам у звичайному списку, браузер зазвичай залишить вибраним лише один із них.
value<option value="HTML">HyperText Markup Language</option>Це не помилка, але важливо розуміти: користувач бачить HyperText Markup Language, а форма передає HTML.
value<option>HTML</option>Такий код працює, але краще явно задавати значення:
<option value="html">HTML</option>Це робить дані форми передбачуваними.
<select> створює випадаючий список.
<option> додає пункт до списку.
Текст усередині <option> бачить користувач.
Атрибут value визначає значення пункту.
Атрибут selected задає початково вибраний пункт.
Атрибут multiple дозволяє вибрати кілька пунктів.
id у <select> і for у <label> мають збігатися.
Атрибут name потрібен для передавання значення разом із формою.
Для підказки можна використати disabled selected у першому пункті.