Все для начинающих
Примеры форм на HTML и CSS
Форма входа пользователей на сайт
Подробнее о создании форм можно почитать в нашем учебнике по HTML здесь.
Для авторизации на сайтах используются различные варианты формы входа пользователей, которые требуют от них ввода некоторых контрольных данных, например, логина и пароля. В качестве примера давайте оформим при помощи HTML и CSS разметку и внешний вид формы авторизации пользователей, которая используется на нашем сайте https://html.okpython.net/.
Модуль оплаты подписки
А вот и внешний вид нашей формы для оплаты годовой подписки. Здесь есть две радиокнопки, а также скрытые поля, которые нужны для передачи некоторых данных пользователя на страницу Яндекса для дальнейшей обработки.
Калькулятор перевода чисел между СС
Данный калькулятор для перевода чисел из одной системы счисления в другую имеет простую структуру, всего пару полей с метками и блок с кнопками.
Калькулятор НДС
Калькулятор несложный, но обратите внимание на поле с радиокнопками и плавный переход при переключении между ними. Также сверстайте форму без использования повсеместного абсолютного позиционирования элементов. Используйте внешние отступы, плавающие элементы, попробуйте флекс-элементы.
Генератор случайных чисел
Генератор содержит целый набор полей, списков, кнопок и переключателей. Тоже хороший вариант для тренировки использования элементов формы на практике.
Форма регистрации на сайте
Теперь давайте сверстаем форму регистрации пользователя. Форма может показаться довольно объемной, но в любом случае, наберитесь терпения и внимательно, шаг за шагом сверстайте ее до конца, стараясь не копировать готовый код. В полях выбора даты рождения и места проживания обязательно наберите хотя бы по пять первых строчек списка, чтобы прочуствовать порядок набора кода. Обратите внимание на порядок использования селекторов псевдоклассов.