Радиокнопки в HTML используются для создания группы опций, из которых пользователь может выбрать только одну. В этом уроке мы рассмотрим, как использовать радиокнопки, их атрибуты и применение, а также предложим тестовое задание для закрепления материала.
Радиокнопки создаются с помощью тега <input> с атрибутом type="radio". Чтобы радиокнопки работали как группа, они должны иметь одинаковое значение атрибута name.
<label for="gender-male">Мужчина</label>
<input type="radio" id="gender-male" name="gender" value="male">
<label for="gender-female">Женщина</label>
<input type="radio" id="gender-female" name="gender" value="female">
name: имя поля, по которому данные будут отправлены на сервер. Радиокнопки с одинаковым name группируются вместе.value: значение, которое будет отправлено, если радиокнопка выбрана.checked: устанавливает радиокнопку как выбранную по умолчанию.disabled: делает радиокнопку недоступной для выбора.
<form>
<p>Выберите ваш пол:</p>
<input type="radio" id="gender-male" name="gender" value="male" checked>
<label for="gender-male">Мужчина</label><br>
<input type="radio" id="gender-female" name="gender" value="female">
<label for="gender-female">Женщина</label><br>
</form>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Выбор пола</title>
</head>
<body>
<form action="/submit-gender" method="POST">
<p>Выберите ваш пол:</p>
<input type="radio" id="gender-male" name="gender" value="male" checked>
<label for="gender-male">Мужчина</label><br>
<input type="radio" id="gender-female" name="gender" value="female">
<label for="gender-female">Женщина</label><br>
<input type="submit" value="Отправить">
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Метод оплаты</title>
</head>
<body>
<form action="/submit-payment" method="POST">
<p>Выберите метод оплаты:</p>
<input type="radio" id="payment-credit" name="payment" value="credit">
<label for="payment-credit">Кредитная карта</label><br>
<input type="radio" id="payment-paypal" name="payment" value="paypal">
<label for="payment-paypal">PayPal</label><br>
<input type="radio" id="payment-bank" name="payment" value="bank">
<label for="payment-bank">Банковский перевод</label><br>
<input type="submit" value="Отправить">
</form>
</body>
</html>
nameБез атрибута name данные поля не будут отправлены на сервер и радиокнопки не будут группироваться.
<!-- Неправильно -->
<input type="radio" id="gender-male" value="male">
<input type="radio" id="gender-female" value="female">
<!-- Правильно -->
<input type="radio" id="gender-male" name="gender" value="male">
<input type="radio" id="gender-female" name="gender" value="female">
valueАтрибут value должен быть указан, чтобы знать, какое значение отправляется при выборе радиокнопки.
<!-- Неправильно -->
<input type="radio" id="gender-male" name="gender">
<input type="radio" id="gender-female" name="gender">
<!-- Правильно -->
<input type="radio" id="gender-male" name="gender" value="male">
<input type="radio" id="gender-female" name="gender" value="female">
checkedЕсли необходимо, чтобы радиокнопка была выбрана по умолчанию, используйте атрибут checked.
<!-- Неправильно -->
<input type="radio" id="gender-male" name="gender" value="male">
<input type="radio" id="gender-female" name="gender" value="female">
<!-- Правильно -->
<input type="radio" id="gender-male" name="gender" value="male" checked>
<input type="radio" id="gender-female" name="gender" value="female">
В этом уроке мы рассмотрели, как использовать радиокнопки в HTML, их атрибуты и примеры использования. Радиокнопки позволяют пользователям выбирать один вариант из группы, что делает формы более интерактивными и удобными.
Создайте веб-страницу, которая содержит форму с следующими элементами:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Форма доставки</title>
</head>
<body>
<form action="/submit-delivery" method="POST">
<p>Выберите тип доставки:</p>
<input type="radio" id="delivery-standard" name="delivery" value="standard" checked>
<label for="delivery-standard">Стандартная доставка</label><br>
<input type="radio" id="delivery-express" name="delivery" value="express">
<label for="delivery-express">Экспресс-доставка</label><br>
<p>Выберите предпочтительное время доставки:</p>
<input type="radio" id="time-morning" name="time" value="morning" checked>
<label for="time-morning">Утро</label><br>
<input type="radio" id="time-afternoon" name="time" value="afternoon">
<label for="time-afternoon">День</label><br>
<input type="radio" id="time-evening" name="time" value="evening">
<label for="time-evening">Вечер</label><br>
<input type="submit" value="Отправить">
</form>
</body>
</html>
Проверьте свою работу на наличие ошибок и убедитесь, что страница корректно отображается в браузере.
Наша цель и главная задача сделать качественное образование в вашем браузере
Телефон: +375 33 910-08-92
Email: info@codefor.tech
Адрес: г. Барановичи, ул. Пирогова, д. 7
© 2024-2025 Все права защищены. CodeFor.
