Примеры форм на HTML и CSS

• Форма входа пользователей на сайт
• Модуль оплаты подписки
• Калькулятор перевода чисел между СС
• Калькулятор НДС
• Генератор случайных чисел
• Форма регистрации на сайте

Подробнее о создании форм можно почитать в нашем учебнике по HTML здесь.

Для авторизации на сайтах используются различные варианты формы входа пользователей, которые требуют от них ввода некоторых контрольных данных, например, логина и пароля. В качестве примера давайте оформим при помощи HTML и CSS разметку и внешний вид формы авторизации пользователей, которая используется на нашем сайте https://html.okpython.net/.

А вот и внешний вид нашей формы для оплаты годовой подписки. Здесь есть две радиокнопки, а также скрытые поля, которые нужны для передачи некоторых данных пользователя на страницу Яндекса для дальнейшей обработки.

Данный калькулятор для перевода чисел из одной системы счисления в другую имеет простую структуру, всего пару полей с метками и блок с кнопками.

Калькулятор несложный, но обратите внимание на поле с радиокнопками и плавный переход при переключении между ними. Также сверстайте форму без использования повсеместного абсолютного позиционирования элементов. Используйте внешние отступы, плавающие элементы, попробуйте флекс-элементы.

Генератор содержит целый набор полей, списков, кнопок и переключателей. Тоже хороший вариант для тренировки использования элементов формы на практике.

Теперь давайте сверстаем форму регистрации пользователя. Форма может показаться довольно объемной, но в любом случае, наберитесь терпения и внимательно, шаг за шагом сверстайте ее до конца, стараясь не копировать готовый код. В полях выбора даты рождения и места проживания обязательно наберите хотя бы по пять первых строчек списка, чтобы прочуствовать порядок набора кода. Обратите внимание на порядок использования селекторов псевдоклассов.