Форма регистрации
Сниппет формы регистрации аккаунта на сайте при помощи CSS.
Регистрация
Заполните форму, чтобы создать аккаунт.
Электронный адрес
Пароль
Пароль еще раз
Создавая аккаунт вы соглашаетесь с нашими Правилами & Условиями.
Регистрация
Уже есть аккаунт? Войти.
Как сделать форму регистрации аккаунта на сайте
Шаг 1) Добавляем HTML:
Для создания ввода используем элемент . Затем добавляем элементы (с соответствующими метками) для каждого поля ввода:
Шаг 2) Добавляем CSS:
* < box-sizing: border-box; >/* Добавляем отступы для контейнеров */ .container < padding: 16px; >/* Поля ввода на всю ширину */ input[type=text], input[type=password] < width: 100%; padding: 15px; margin: 5px 0 22px 0; display: inline-block; border: none; background: #f1f1f1; >input[type=text]:focus, input[type=password]:focus < background-color: #ddd; outline: none; >/* Переопределяем стиль по умолчанию для hr */ hr < border: 1px solid #f1f1f1; margin-bottom: 25px; >/* Стиль для кнопки регистрации */ .registerbtn < background-color: #4CAF50; color: white; padding: 16px 20px; margin: 8px 0; border: none; cursor: pointer; width: 100%; opacity: 0.9; >.registerbtn:hover < opacity:1; >/* Добавляем синий цвет для текста ссылок */ a < color: dodgerblue; >/* Задаем серый фон и центрируем текст секции "войти" */ .signin
Создание формы регистрации
Создайте простую форму регистрации как на изображении ниже:
- Цвет фона страницы #f8f8f8;
- Размер формы 320px, внутренний отступ 15px, фон #fff;
- Цвет границ input #ccc;
- Цвет фона кнопки #1cbc11;
- Цвет фона кнопки при наведении #14a20a;
Результат
Если хотите поделиться своим решением, используйте сайты типа codepen.io и оставляйте ссылку в комментарии
Обсуждение ( 7 )
Войдите или зарегистрируйтесь для того чтобы оставлять комментарии
Как сделать — Форму регистрации
Узнать, как создать адаптивную форму регистрации с помощью CSS.
Нажмите на кнопку, чтобы открыть форму регистрации:
Форма регистрации
Пожалуйста, заполните эту форму, чтобы создать учетную запись.
Пароль
Повторить пароль Запомнить меня
Создавая учетную запись, вы соглашаетесь с нашим Условия и конфиденциальность.
Регистрация
Создать форму регистрации
Шаг 1) Добавить HTML:
Используйте элемент для обработки входных данных. Вы можете узнать больше об этом в нашем учебнике PHP. Затем добавьте входные данные (с соответствующей меткой) для каждого поля:
Пример
Шаг 2) Добавить CSS:
Пример
/* Поля ввода полной ширины */
input[type=text], input[type=password] width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
>
input[type=text]:focus, input[type=password]:focus background-color: #ddd;
outline: none;
>
hr border: 1px solid #f1f1f1;
margin-bottom: 25px;
>
/* Установите стиль для всех кнопок */
button background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
>
/* Дополнительные стили для кнопки «Отмена» */
.cancelbtn padding: 14px 20px;
background-color: #f44336;
>
/* Поплавок отмена и кнопки регистрации и добавить равную ширину */
.cancelbtn, .signupbtn float: left;
width: 50%;
>
/* Добавить отступы к элементам контейнера */
.container padding: 16px;
>
/* Очистить поплавки */
.clearfix::after content: «»;
clear: both;
display: table;
>
/* Измените стили для кнопки отмены и кнопки регистрации на дополнительных маленьких экранах */
@media screen and (max-width: 300px) .cancelbtn, .signupbtn width: 100%;
>
>
Создать модальную форму регистрации
Шаг 1) Добавить HTML:
Используйте элемент для обработки входных данных. Вы можете узнать больше об этом в нашем учебнике PHP. Затем добавьте входные данные (с соответствующей меткой) для каждого поля:
Пример
times;
Форма регистрации
Пожалуйста, заполните эту форму, чтобы создать учетную запись.
Шаг 2) Добавить CSS:
Пример
*
/* Поля ввода полной ширины */
input[type=text], input[type=password] width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
>
/* Добавить цвет фона, когда входы получают фокус */
input[type=text]:focus, input[type=password]:focus background-color: #ddd;
outline: none;
>
/* Установите стиль для всех кнопок */
button background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
>
/* Дополнительные стили для кнопки «Отмена» */
.cancelbtn padding: 14px 20px;
background-color: #f44336;
>
/* Поплавок очистить и кнопки регистрации и добавить равную ширину */
.cancelbtn, .signupbtn float: left;
width: 50%;
>
/* Добавить отступы к элементам контейнера */
.container padding: 16px;
>
/* Модальный (фон) */
.modal display: none; /* Скрыто по умолчанию */
position: fixed; /* Оставаться на месте */
z-index: 1; /* Сидеть на вершине */
left: 0;
top: 0;
width: 100%; /* Полная ширина */
height: 100%; /* Полный высота */
overflow: auto; /* Включите прокрутку, если это необходимо */
background-color: #474e5d;
padding-top: 50px;
>
/* Модальное Содержание/Бокс */
.modal-content background-color: #fefefe;
margin: 5% auto 15% auto; /* 5% сверху, 15% снизу и по центру */
border: 1px solid #888;
width: 80%; /* Может быть больше или меньше, в зависимости от размера экрана */
>
/* Стиль горизонтальной линейки */
hr border: 1px solid #f1f1f1;
margin-bottom: 25px;
>
/* кнопка закрытия (x) */
.close position: absolute;
right: 35px;
top: 15px;
font-size: 40px;
font-weight: bold;
color: #f1f1f1;
>
.close:hover,
.close:focus color: #f44336;
cursor: pointer;
>
/* Снимите поплавки */
.clearfix::after content: «»;
clear: both;
display: table;
>
/* Измените стили для кнопки отмены и кнопки регистрации на дополнительных маленьких экранах */
@media screen and (max-width: 300px) .cancelbtn, .signupbtn width: 100%;
>
>
Совет: Вы также можете использовать следующий javascript для закрытия модального, щелкнув за пределами модального содержимого (а не только с помощью кнопки «x» или «отмена», чтобы закрыть его):
Пример
// Когда пользователь щелкает в любом месте за пределами модального, закройте его
window.onclick = function(event) if (event.target == modal) modal.style.display = «none»;
>
>
Совет: Зайдите на наш учебник HTML Форма, чтобы узнать больше о формах HTML.
Совет: Зайдите на наш учебник CSS Форма, чтобы узнать больше о том, как стилизовать элементы формы.
Форма регистрации
Создайте без использования таблиц форму регистрации, представленную на рис. 1. Ширина обрамляющей рамки и серого поля внизу с кнопкой «Зарегистрироваться» резиновая, и меняется в зависимости от ширины окна браузера. Форма должна корректно работать в IE7, IE8, IE9, Firefox 3, Safari 5, Opera 10, Opera 11, Chrome 6 и старше.
Рис. 1. Форма регистрации
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные задачи
- TEX
- Отступы между блоков
- Андроид в тени
- Ссылка как кнопка
- Вложенные списки
- Форма регистрации
- Объединение ячеек таблицы
- Обязательные поля формы
- Цвет и фон в таблице
- Асуанская плотина
- Батарейка
- Заголовки