Чекбоксы в HTML используются для создания элементов формы, которые позволяют пользователям выбирать один или несколько параметров из предложенных. В этом уроке мы рассмотрим, как использовать чекбоксы, их атрибуты и применение, а также предложим тестовое задание для закрепления материала.
Чекбоксы создаются с помощью тега <input> с атрибутом type="checkbox".
<form>
<p>Выберите свои увлечения:</p>
<input type="checkbox" id="hobby1" name="hobby" value="reading">
<label for="hobby1">Чтение</label><br>
<input type="checkbox" id="hobby2" name="hobby" value="traveling">
<label for="hobby2">Путешествия</label><br>
<input type="checkbox" id="hobby3" name="hobby" value="sports">
<label for="hobby3">Спорт</label><br>
</form>
name: имя поля, по которому данные будут отправлены на сервер.value: значение, которое будет отправлено, если чекбокс выбран.checked: устанавливает чекбокс как выбранный по умолчанию.disabled: делает чекбокс недоступным для выбора.
<form>
<input type="checkbox" id="newsletter" name="newsletter" value="yes" checked>
<label for="newsletter">Подписаться на рассылку</label>
</form>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Предпочтения</title>
</head>
<body>
<form action="/submit-preferences" method="POST">
<p>Выберите ваши любимые жанры музыки:</p>
<input type="checkbox" id="rock" name="genre" value="rock">
<label for="rock">Рок</label><br>
<input type="checkbox" id="pop" name="genre" value="pop">
<label for="pop">Поп</label><br>
<input type="checkbox" id="jazz" name="genre" value="jazz">
<label for="jazz">Джаз</label><br>
<input type="checkbox" id="classical" name="genre" value="classical">
<label for="classical">Классическая музыка</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="/register" method="POST">
<label for="username">Имя пользователя:</label>
<input type="text" id="username" name="username" required><br>
<label for="password">Пароль:</label>
<input type="password" id="password" name="password" required><br>
<input type="checkbox" id="agree" name="agree" value="yes" required>
<label for="agree">Я согласен с условиями использования</label><br>
<input type="submit" value="Зарегистрироваться">
</form>
</body>
</html>
nameБез атрибута name данные поля не будут отправлены на сервер.
<!-- Неправильно -->
<input type="checkbox" id="subscribe" value="yes">
<!-- Правильно -->
<input type="checkbox" id="subscribe" name="subscribe" value="yes">
valueАтрибут value должен быть указан, чтобы знать, какое значение отправляется при выборе чекбокса.
<!-- Неправильно -->
<input type="checkbox" id="newsletter" name="newsletter">
<!-- Правильно -->
<input type="checkbox" id="newsletter" name="newsletter" value="yes">
checkedЕсли необходимо, чтобы чекбокс был выбран по умолчанию, используйте атрибут checked.
<!-- Неправильно -->
<input type="checkbox" id="agree" name="agree" value="yes">
<!-- Правильно -->
<input type="checkbox" id="agree" name="agree" value="yes" checked>
В этом уроке мы рассмотрели, как использовать чекбоксы в HTML, их атрибуты и примеры использования. Чекбоксы позволяют пользователям выбирать один или несколько параметров из предложенных вариантов, что делает формы более интерактивными и гибкими.
Создайте веб-страницу, которая содержит форму с следующими элементами:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Форма предпочтений</title>
</head>
<body>
<form action="/submit-preferences" method="POST">
<p>Подписаться на рассылку:</p>
<input type="checkbox" id="subscribe" name="subscribe" value="yes">
<label for="subscribe">Да, я хочу получать новости и обновления</label><br>
<p>Выберите предпочтения по типу отдыха:</p>
<input type="checkbox" id="beach" name="vacation" value="beach">
<label for="beach">Пляж</label><br>
<input type="checkbox" id="mountains" name="vacation" value="mountains">
<label for="mountains">Горы</label><br>
<input type="checkbox" id="city" name="vacation" value="city">
<label for="city">Город</label><br>
<input type="submit" value="Отправить">
</form>
</body>
</html>
Проверьте свою работу на наличие ошибок и убедитесь, что страница корректно отображается в браузере.
Наша цель и главная задача сделать качественное образование в вашем браузере
Телефон: +375 33 910-08-92
Email: info@codefor.tech
Адрес: г. Барановичи, ул. Пирогова, д. 7
© 2024-2025 Все права защищены. CodeFor.
