Пошук уроків, статей та іншого контенту
Використовуйте radio для вибору лише одного варіанта з групи взаємопов’язаних опцій.
Перемикачі radio використовують, коли користувач має вибрати лише один варіант із групи взаємопов’язаних опцій.
Наприклад:
спосіб доставки;
стать;
тарифний план;
розмір товару;
спосіб оплати.
HTML-елемент для перемикача створюють за допомогою <input> з атрибутом type="radio":
<input type="radio">Зазвичай перемикач використовують разом із текстовим підписом через елемент <label>.
Щоб браузер розумів, що перемикачі належать до однієї групи, усі вони повинні мати однакове значення атрибута name.
<label>
<input type="radio" name="delivery" value="courier">
Кур'єр
</label>
<label>
<input type="radio" name="delivery" value="post">
Поштове відділення
</label>
<label>
<input type="radio" name="delivery" value="pickup">
Самовивіз
</label>У цьому прикладі всі перемикачі мають name="delivery", тому можна вибрати лише один спосіб доставки.
Атрибут value визначає значення, яке буде передано разом із формою. Його не видно користувачеві, але він важливий для обробки даних.
nameПеремикачі з однаковим name належать до однієї групи:
<!-- Одна група -->
<input type="radio" name="color" value="red">
<input type="radio" name="color" value="blue">
<!-- Інша група -->
<input type="radio" name="size" value="small">
<input type="radio" name="size" value="large">У першій групі можна вибрати один колір, а в другій — один розмір. Вибір кольору не впливає на вибір розміру.
labelТекст перемикача потрібно розміщувати в <label>. Це робить усю область із текстом клікабельною, а також покращує доступність форми.
inputНайпростіший варіант — розмістити <input> усередині <label>:
<label>
<input type="radio" name="language" value="uk">
Українська
</label>
<label>
<input type="radio" name="language" value="en">
English
</label>Користувач може натиснути як на кружечок, так і на текст.
for та idІнший варіант — додати унікальний id до перемикача та вказати такий самий ідентифікатор в атрибуті for елемента <label>:
<input type="radio" id="ukrainian" name="language" value="uk">
<label for="ukrainian">Українська</label>
<input type="radio" id="english" name="language" value="en">
<label for="english">English</label>Значення for має точно збігатися зі значенням id.
Щоб одразу вибрати один із варіантів, використовуйте атрибут checked:
<label>
<input type="radio" name="payment" value="card" checked>
Банківська картка
</label>
<label>
<input type="radio" name="payment" value="cash">
Готівка
</label>Після завантаження сторінки буде вибрано «Банківська картка».
Для однієї групи radio бажано позначати checked не більше ніж у одного елемента. Якщо позначити кілька перемикачів у тій самій групі, браузер вибере лише останній із них.
Перемикачі часто використовують усередині форми. Ось повний приклад:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Спосіб доставки</title>
</head>
<body>
<form>
<fieldset>
<legend>Оберіть спосіб доставки</legend>
<label>
<input type="radio" name="delivery" value="courier" checked>
Кур'єр
</label>
<br>
<label>
<input type="radio" name="delivery" value="post">
Поштове відділення
</label>
<br>
<label>
<input type="radio" name="delivery" value="pickup">
Самовивіз
</label>
<br><br>
<button type="submit">Продовжити</button>
</fieldset>
</form>
</body>
</html><fieldset> об’єднує пов’язані елементи форми в одну логічну групу, а <legend> задає назву цієї групи.
Якщо користувач вибере «Поштове відділення», форма передасть пару даних:
delivery=postНазва береться з name, а вибране значення — з value.
До перемикачів можна застосовувати звичайні CSS-властивості:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Стилізовані перемикачі</title>
<style>
.option {
display: block;
margin-bottom: 8px;
cursor: pointer;
}
.option input {
accent-color: #2563eb;
}
</style>
</head>
<body>
<form>
<p>Оберіть розмір:</p>
<label class="option">
<input type="radio" name="size" value="small">
Малий
</label>
<label class="option">
<input type="radio" name="size" value="medium" checked>
Середній
</label>
<label class="option">
<input type="radio" name="size" value="large">
Великий
</label>
</form>
</body>
</html>Властивість accent-color змінює основний колір стандартного перемикача браузера.
Для початку краще зберігати стандартний вигляд radio. Він знайомий користувачам і вже враховує багато особливостей доступності.
radio і checkbox використовують для різних типів вибору:
radio — лише один варіант із групи;
checkbox — нуль, один або кілька варіантів.
<!-- Можна вибрати лише один спосіб оплати -->
<label>
<input type="radio" name="payment" value="card">
Картка
</label>
<label>
<input type="radio" name="payment" value="cash">
Готівка
</label>
<!-- Можна вибрати кілька додаткових послуг -->
<label>
<input type="checkbox" name="services" value="gift-wrap">
Подарункове пакування
</label>
<label>
<input type="checkbox" name="services" value="fast-delivery">
Швидка доставка
</label>name для різних групНеправильно:
<input type="radio" name="option" value="red">
<input type="radio" name="option" value="blue">
<input type="radio" name="option" value="small">
<input type="radio" name="option" value="large">Усі чотири елементи належать до однієї групи, тому користувач зможе вибрати лише один варіант загалом.
Правильно:
<input type="radio" name="color" value="red">
<input type="radio" name="color" value="blue">
<input type="radio" name="size" value="small">
<input type="radio" name="size" value="large">value<input type="radio" name="delivery">Такий перемикач можна вибрати, але під час надсилання форми його значення буде менш інформативним. Для кожного radio краще явно вказувати value.
<input type="radio" name="theme" value="dark">Користувач бачить лише кружечок і не знає, що він означає. Додавайте зрозумілий підпис через <label>.
idЯкщо використовуєте id і for, кожен перемикач повинен мати унікальний id:
<input type="radio" id="option-one" name="option" value="one">
<label for="option-one">Варіант один</label>
<input type="radio" id="option-two" name="option" value="two">
<label for="option-two">Варіант два</label>Radio створюють за допомогою <input type="radio">.
Перемикачі однієї групи повинні мати однаковий name.
За допомогою radio користувач обирає лише один варіант із групи.
value визначає дані, які передаються разом із формою.
checked задає вибраний варіант за замовчуванням.
Для кожного перемикача потрібно додавати зрозумілий <label>.
Для окремих груп використовуйте різні значення name.
Якщо потрібно дозволити вибір кількох варіантів, використовуйте checkbox, а не radio.