Создание регистрационной формы html

Example

This is the example code for the article Your first HTML form.

A simple form

HTML Content

form action="/my-handling-form-page" method="post"> div> label for="name">Name:label> input type="text" id="name" name="user_name" /> div> div> label for="mail">E-mail:label> input type="email" id="mail" name="user_email" /> div> div> label for="msg">Message:label> textarea id="msg" name="user_message">textarea> div> div class="button"> button type="submit">Send your messagebutton> div> form> 

CSS Content

form  /* Just to center the form on the page */ margin: 0 auto; width: 400px; /* To see the limits of the form */ padding: 1em; border: 1px solid #ccc; border-radius: 1em; > div + div  margin-top: 1em; > label  /* To make sure that all label have the same size and are properly align */ display: inline-block; width: 90px; text-align: right; > input, textarea  /* To make sure that all text field have the same font settings By default, textarea are set with a monospace font */ font: 1em sans-serif; /* To give the same size to all text field */ width: 300px; -moz-box-sizing: border-box; box-sizing: border-box; /* To harmonize the look & feel of text field border */ border: 1px solid #999; > input:focus, textarea:focus  /* To give a little highligh on active elements */ border-color: #000; > textarea  /* To properly align multiline text field with their label */ vertical-align: top; /* To give enough room to type some text */ height: 5em; /* To allow users to resize any textarea vertically It works only on Chrome, Firefox and Safari */ resize: vertical; > .button  /* To position the buttons to the same position of the text fields */ padding-left: 90px; /* same size as the label elements */ > button  /* This extra margin represent the same space as the space between the labels and their text fields */ margin-left: 0.5em; > 

Result

Found a content problem with this page?

Источник

Register

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

How To Create a Register Form

Step 1) Add HTML:

Use a element to process the input. You can learn more about this in our PHP tutorial. Then add inputs (with a matching label) for each field:

Example

Register

Please fill in this form to create an account.

Step 2) Add CSS:

Example

/* Add padding to containers */
.container padding: 16px;
>

/* Full-width input fields */
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;
>

/* Overwrite default styles of hr */
hr border: 1px solid #f1f1f1;
margin-bottom: 25px;
>

/* Set a style for the submit/register button */
.registerbtn background-color: #04AA6D;
color: white;
padding: 16px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
>

/* Add a blue text color to links */
a color: dodgerblue;
>

/* Set a grey background color and center the text of the «sign in» section */
.signin background-color: #f1f1f1;
text-align: center;
>

Tip: Go to our HTML Form Tutorial to learn more about HTML Forms.

Tip: Go to our CSS Form Tutorial to learn more about how to style form elements.

Источник

Как сделать — Форму регистрации

Узнать, как создать адаптивную форму регистрации с помощью 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;

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

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

---

Email

Шаг 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 Форма, чтобы узнать больше о том, как стилизовать элементы формы.

Источник