Menu
CoddyTech

Повторение — Формы №1

Часть раздела Основы путешествия по HTML на Coddy. Урок 46 из 60.

challenge icon

Задание

Легко

Давайте создадим простую HTML-форму заказа напитка, как показано на изображении ниже.

Добавьте следующие элементы:

  1. Тег <form>, который будет содержать все элементы.
  2. Группу переключателей (name: "drink"), чтобы пользователи могли выбрать напиток. Метки должны быть "Water", "Coke" или "Sprite". Для каждого переключателя задайте id, совпадающий с его меткой в нижнем регистре: "water", "coke", "sprite".
  3. Группу флажков (name: "extras") для дополнительных добавок. Метки должны быть "Ice", "Lemon" или "Sugar". Для каждого флажка задайте id, совпадающий с его меткой в нижнем регистре: "ice", "lemon", "sugar".
  4. Раскрывающийся список (name: "size") для выбора размера напитка. Варианты должны быть "Small", "Medium" или "Large".
  5. Кнопку отправки с надписью "Place Order".
  6. Кнопку сброса с надписью "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>

Все уроки раздела Основы

Потренируйтесь самостоятельно: Песочница Web