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

Форма входа пользователей на сайт

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

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

Модуль оплаты подписки

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

Назначение:
Сумма (рос. руб.):
Способ оплаты:
   

Калькулятор перевода чисел между СС

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

Калькулятор НДС

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

Генератор случайных чисел

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

...

Форма регистрации на сайте

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

Пол:*
Дата рождения:*
*- поля, помеченные звездочкой, обязательны для заполнения
 С правилами пользования сайтом согласен