Повторение — Формы №1
Часть раздела Fundamentals путешествия по HTML на Coddy — урок 46 из 60.
Задание
ЛегкоДавайте создадим простую форму заказа напитков с помощью HTML, как показано на рисунке ниже.
Вот что нужно включить:
- Тег
<form>, чтобы обернуть все элементы. - Группу переключателей (radio buttons) (name: "drink"), чтобы пользователи могли выбрать напиток. Метки должны быть "Water", "Coke" или "Sprite".
- Группу флажков (checkboxes) (name: "extras") для дополнительных добавок. Метки должны быть "Ice", "Lemon" или "Sugar".
- Выпадающее меню (name: "size") для выбора размера напитка. Варианты должны быть "Small", "Medium" или "Large".
- Кнопку отправки с надписью "Place Order".
- Кнопку сброса с надписью "Clear".
⚠️ Важно: Используйте только один тег <form>. HTML не допускает вложенные теги <form> — размещение <form> внутри другого <form> является недопустимым и приведет к тому, что ваши поля ввода будут обнаружены вне формы, что нарушит тесты. Поместите все ваши переключатели, флажки, выпадающий список и кнопки непосредственно внутри единственного внешнего тега <form> — не оборачивайте разделы в дополнительные теги <form>.
Попробуйте сами
<!DOCTYPE html>
<html>
<body>
<form>
<p>Select a drink: </p>
<!-- Напишите код здесь -->
<p>Select extras: </p>
<!-- Напишите код здесь -->
<p>Select size: </p>
<!-- Напишите код здесь -->
</form>
</body>
</html>Все уроки раздела Fundamentals
1Основы HTML
Что такое HTML?Базовая структура HTMLТеги и элементыВложенность и закрывающие тегиКомментарии в HTML7Страница личного профиля
Обзор проектаСекция Header
Фото профиляСекция «Обо мне»Ссылки на социальные сети2Текст и форматирование
ЗаголовкиАбзацыПереносы строкЖирный и курсивный текстСнова жирный и курсивныйПовторение — форматирование8Формы и поля ввода, часть 1
Основы формТекстовые поля вводаАтрибуты полей вводаПоле для пароляМетки для полей вводаПовторение — основы форм11Страница регистрации на мероприятие
Обзор проектаСекция HeaderСекция деталей мероприятияФорма регистрацииСекция Footer9Формы и элементы ввода. Часть 2
РадиокнопкиЧекбоксыВыпадающие спискиКнопкиКнопки в формахПовторение — Формы №1Повторение — Формы №2