Форма регистрации для сайта html

Форма регистрации для сайта html

Узнайте, как создать адаптивную форму регистрации с помощью CSS.

Нажмите на кнопку, чтобы открыть форму регистрации:

Пожалуйста, заполните эту форму, чтобы создать учетную запись.

By creating an account you agree to our Terms & Privacy.

HTML формы — сложные элементы интерфейса. Они включают в себя разные функциональные элементы: поля ввода и

, списки , подсказки и т.д. Весь код формы заключается в элемент

Примечание
action="form.php" — ссылка на файл обработчика формы. Создайте файл в кодировке UTF-8, закачайте его на сервер и замените action="form.php" на путь к файлу на вашем сервере.

Как видно из рисунка, каждый элемент формы имеет стили браузера по умолчанию. Очистим стили и оформим элементы формы.

Примечание
В переменной $subject укажите текст, который будет отображаться как заголовок письма;
Ваше_имя — здесь вы можете указать имя, которое будет отображаться в поле «от кого письмо» ;
url_вашего_сайта замените на адрес сайта с формой регистрации;
ваш_email замените на ваш адрес электронной почты;
$headers .= "Bcc: ваш_email". "
"; отправляет скрытую копию на ваш адрес электронной почты.

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

Пример разных видов переключения форм можно увидеть здесь:

Посмотреть примерСкачать

Формы будут работать только в браузерах, которые поддерживают псевдоэлемент :target, поэтому если решите применять данную форму у себя на сайте, необходимо сделать так, чтобы был вариант при котором форма будет работать и в других браузерах.

HTML часть

Мы помещаем две формы, а одну скрываем с помощью CSS:

Читайте также:  Видеокарты для world of tanks 2018

Мы используем некоторые элементы HTML5, такие как , а также для того чтобы на писать внутри input-а некоторы текст для примера. Еще мы использовали атрибут required для обязательного заполнения поля. И мы нигде не используем Javascript.

CSS часть

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

Итак, начнем. Зададим основные стили для наших форм:

Добавим стиль для заголовка:

Обратите внимание, что свойство background-clip: text поддерживают webkit браузеры.

Сейчас пропишем стили для input-ов:

Мы выставили outline: none;, а значит в некоторых браузерах не будут видны активные input-ы. Поэтому не забудьте потом задать свойства для псевдоэлементов :focus и :active:

Сейчас добавим стили для кнопки входа и регистрации:

Мы сделали внутреннюю и внешннюю тень, а также границу.

А сейчас рассмотрим анимацию при переключении. Изначально необходимо спрятать вторую форму:

Для первой формы z-index: 22, то есть вторая форма будет находиться под первой.

Для переключения формы мы будет использовать псевдоэлемент :target :

Для создания анимации при переключении будем использовать CSS фреймфорк:

Форма которая «исчезает» имеет другую анимацию:

Вывод

Вот мы и создали необходимую форму. В демо примерах вы можете увидеть несколько видов переходов при переключении с одной формы на другую. Конечно использовать данную форму можно только при условии что у вас может подгружаться другая форма для других браузеров.

Ссылка на основную публикацию
Уравнение плоскости по двум пересекающимся прямым
УСЛОВИЕ: Составить уравнение плоскости, проходящей через две параллельные прямые x-2/3=y+1/2=z-3/-2 x-1/3=y-2/2=z+3/-2 Добавил yelymcheav , просмотры: ☺ 1976 ⌚ 2019-05-14 15:35:56....
Тест соловея штрассена c
Символ Якоби отличается от символа Лежандра тем, что в первом знаменатель – составное число, а во втором – простое. Алгоритм...
Тест стиральной машины bosch maxx 5
Самодиагностика – это очень важная функция, которая отличает современные стиральные машины с электронным управлением от старой аналоговой техники. Запустив сервисный...
Уравнение баланса мощностей формула
При решений электротехнических задач, часто нужно проверить правильность найденных значений. Для этого в науке ТОЭ, существует так называемый баланс мощностей....
Adblock detector