Повторение — Формы №1
Часть раздела Основы путешествия по HTML на Coddy. Урок 46 из 60.
Задание
ЛегкоДавайте создадим простую HTML-форму заказа напитка, как показано на изображении ниже.

Добавьте следующие элементы:
- Тег
<form>, который будет содержать все элементы. - Группу переключателей (name: "drink"), чтобы пользователи могли выбрать напиток. Метки должны быть "Water", "Coke" или "Sprite". Для каждого переключателя задайте
id, совпадающий с его меткой в нижнем регистре: "water", "coke", "sprite". - Группу флажков (name: "extras") для дополнительных добавок. Метки должны быть "Ice", "Lemon" или "Sugar". Для каждого флажка задайте
id, совпадающий с его меткой в нижнем регистре: "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>Все уроки раздела Основы
1Основы HTML
Что такое HTML?Базовая структура HTMLТеги и элементыВложенность и закрывающие тегиКомментарии в HTML7Страница личного профиля
Обзор проектаСекция Header2Текст и форматирование
ЗаголовкиАбзацыПереносы строкЖирный и курсивный текстСнова жирный и курсивныйПовторение — форматирование8Формы и поля ввода, часть 1
Основы формТекстовые поля вводаАтрибуты полей вводаПоле для пароляМетки для полей вводаПовторение — основы форм11Страница регистрации на мероприятие
Обзор проектаСекция Header9Формы и элементы ввода. Часть 2
РадиокнопкиЧекбоксыВыпадающие спискиКнопкиКнопки в формахПовторение — Формы №1Повторение — Формы №2Потренируйтесь самостоятельно: Песочница Web