Создаем форму регистрации
Здравствуйте уважаемый посетитель!
Сегодня создадим форму регистрации, предназначенную для ввода данных аккаунта при выполнении онлайн заказа. В результате чего, с помощью логина и пароля клиенты смогут входить в личный кабинет для получения информации об оформленных заказах. Поэтому в нашем случае элементы регистрации можно рассматривать в качестве одного из разделов ранее созданной формы онлайн заказа.
Следует отметить, что основное внимание здесь будет уделено вопросам создания HTML-элементов и валидации заполнения полей формы на стороне клиента.
При этом для всех полей, за малым исключением, применять инструменты валидации будем используя широкие возможности HTML5. В сравненим с предыдущими версиями HTML, когда для этих целей приходилось заниматься составлением на JavaScript различных скриптов, теперь этот вопрос решается куда проще. В чем на практике мы сможем убедиться.
Исключением будет являться лишь проверка на идентичность первичного и повторного ввода пароля. Которую мы сделаем позднее с помощью соответствующего скрипта.
Что касается стилизации элементов с помощью стилей CSS, то здесь мы этот вопрос рассматривать не будем. Так как об этом достаточно подробно рассказывалось в предыдущей статье на примере элементов других разделов формы онлайн заказа. И повторяться, наверное, не стоит.
- Формируем элементы формы регистрации
- Проверяем валидацию формы на стороне клиента
- Исходные файлы сайта
Формируем элементы формы регистрации
Создадим в форме регистрации, обычно используемые в этих случаях, поля «Имя», «Логин» «E-mail», «Пароль» и «Подтвердите пароль».
Для этого в качестве HTML-элементов будем использовать теги: <input> предназначенный для создания полей ввода и <label> — метку для поля ввода.
| № пп | Имя поля | Назначение элемента | Элемент | Тип элемента |
| 1 | Имя | Метка | label | |
| 2 | Поле ввода | input | text | |
| 3 | Логин | Метка | label | |
| 4 | Поле ввода | input | text | |
| 5 | Метка | label | ||
| 6 | Поле ввода | input | ||
| 7 | Пароль | Метка | label | |
| 8 | Поле ввода | input | password | |
| 7 | Подтвердите пароль | Метка | label | |
| 9 | Поле ввода | input | password |
Рис.1 Соответствие HTML-элементов в форме регистрации
При этом к некоторым элементам добавим дополнительные блоки-обвертки <div>, использование которых позволит упростить оформление элементов, выполнив стилизацию аналогично предыдущим разделам.
В итоге, получим вариант HTML-кода формы онлайн заказа, дополненный элементами раздела регистрации, как показано в следующей таблице (вновь созданные элементы выделены более светлым фоном).
kak-sozdat-formu-registracii_1Рис.2 HTML-код формы онлайн заказа с разделом регистрации
Используемые здесь элементы <input> и <label> ранее нами уже применялись, поэтому повторно их рассматривать не имеет смысла. А вот, что касается атрибутов тега <input>, определяющих параметры полей регистрации, несмотря на то, что с некоторыми уже приходилось встречаться, на них все же стоит остановиться поподробней.
- Атрибут type является основным атрибутом элемента <input>, который определяет его тип. В данном случае используются три его варианта: text (поз.81,91), предназначено для текстового поля, email (поз.85) — для адреса электронной почты и password (поз.100, 108) — для ввода пароля.
Последнее — это тоже поле, предусматривающее ввод текста. Но в отличие от обычного текстового, такой вариант обеспечивает, что все вводимые символы будут показываться звездочками. И применяется такой тип именно для полей ввода пароля, чтобы никто не смог подглядеть вводимый пароль.
Так для поля «Имя» (поз.81) при наведении курсора будет появляться подсказка с текстом «Имя должно быть на русском и содержать не менее 3 символов». Для других полей — аналогично.- Атрибут pattern устанавливает шаблон ввода (поз.81,91,100). Для этого в его значении указывается регулярное выражение, в соответствии с которым необходимо будет вводить данные в поле. При этом, если присутствует этот атрибут, то при неправильно заполненном поле форма отправляться не будет.
В данном случае для поля «Имя» (поз.81) регулярным выражением определено условие использования только заглавных и прописных букв русского алфавита в количестве не менее 3-ех. Для поля «Логин» (поз.91) — цифр и букв латинского алфавита в количестве не менее 3-ех. А для поля «Пароль» (поз.100) — как и в предыдущем случае, но только в количестве символов не менее 6-ти.
Следует отметить, что данный атрибут довольно часто используется в формах, так как позволяет значительно снизить вероятность допущения ошибок при заполнении полей. Поэтому следует стараться максимально использовать его возможности.
В нашей форме онлайн заказа помимо элементов, предназначенных для регистрации, этот атрибут можно применить и в других разделах. Например, в разделе заполнения данных об автомобиле, можно также его включить в элемент поля «6 цифр VIN-кода» со значением регулярного выражения в виде [0-9]{6}. Что будет определять возможность заполнения только цифрами в количестве, равном 6-ти символов (поз.34). - Атрибут required устанавливает, что поле обязательно для заполнения. В случае, если оно окажется пустым, то форма не отправится с выдачей соответствующего сообщения. В данном случае это касается полей «Имя» (поз.81), «Логин» (поз.91) и «Пароль» (поз.100).
Что касается остальных, то для «E-mail» (поз.85) атрибут отсутствует, так как это поле необязательно для заполнения. О чем информирует соответствующее примечание (поз.87). - Атрибут placeholder выводит подсказывающий текст, который обычно отображается серым цветом и исчезает при наборе текста.
В данном случае это применено для полей ввода пароля. Для поля «Пароль» (поз.100) подсказывающий текст — «Введите пароль», а для подтверждения пароля (поз.108) — «Повторите пароль».
Следует отметить, что применение этого атрибута придает элементам дополнительную информативность. И при желании форму можно немного упростить. Например, для таких полей можно вообще не использовать элемент метки <label>. Либо, просто указать в нем пустое значение , как в нашем случае сделано для поля подтверждения пароля (поз.105).
После того, как вновь сформированные элементы регистрации мы добавим в форму онлайн заказа, находящуюся в файле «poluchit-skidku.php» каталога «articles», можно открыть соответствующую страницу «Получить скидку» и посмотреть что у нас получилось.
Для увеличения / уменьшения размера изображения кликните по картинке
Рис.3 Вновь сформированные элементы регистрации
Как видно на скриншоте, все новые элементы добавлены. Однако, их размер и расположение на странице пока не соответствует типовому внешнему виду остальных элементов формы.
Обусловлено это тем, что на данный момент новые элементы отображаются браузером в соответствии со стилевыми свойствами, назначенными по умолчанию. Для того, чтобы это исправить необходимо их оформить, подобно тому, как мы это делали ранее в статье Стилизуем элементы формы с помощью CSS.
В итоге после выполненных преобразований получим окончательный вид формы онлайн заказа с добавленным разделом регистрации (с соответствующим CSS-кодом можно ознакомиться в файле «main.css», который можно найти в разделе Исходные файлы сайта).
Для увеличения / уменьшения размера изображения кликните по картинке
Рис.4 Созданные элементы регистрации после оформления стилями CSS
Как видно, все нужные элементы созданы и приняли соответствующий внешний вид. При этом заданы все необходимые условия заполнения полей формы.
А теперь проверим как будут функционировать заданные фильтры, определяющие условия заполнения полей ввода.
Проверяем валидацию формы на стороне клиента
Ранее при создании элементов формы для формирования различных фильтров мы использовали определенные атрибуты <input>. И сейчас посмотрим, как они будут функционировать, а именно: будет ли блокироваться отправка формы при невыполнении условий заполнения полей, и как это будет отображаться на странице.
Для этого заполним все поля формы корректно за исключением одной, в которой поочередно с имитируем разного рода ошибки. А затем, отдельно для каждого случая, попытаемся отправить форму, нажимая на кнопку «отправить».
Сначала создадим ситуацию, когда одно из обязательных для заполнения полей оказалось пустым. В этом случае заведомо оставим поле незаполненным, элемент которого был дополнен атрибутом required. В данном случае выберем для этого поле «Логин».
Результат такой проверки приведен на следующем скриншоте.
Для увеличения / уменьшения размера изображения кликните по картинке
Рис.5 Проверка отправки формы с пустым обязательным полем
Как видно, вариант с незаполненным полем, которое определено как обязательное для заполнения, отрабатывается должным образом, а именно: форма не отправляется (блокируется), а в браузере отображается проблемное поле и вид ошибки.
В следующей проверке посмотрим, будет ли функционировать фильтр по корректному вводу символов. Для этого выберем какое-нибудь поле, в элемент которого включен атрибут pattern. Как ранее отмечалось, его значением является регулярное выражение, определяющее условие заполнения поля.
В нашей форме данный атрибут применен для полей «Имя», «Логин» и «Пароль». Для проверки возьмем, к примеру, поле «Имя», в элементе которого регулярное выражение задано в виде [А-Яа-яЁё]{3,}. Что означает, что в данном поле должна быть введена комбинация символов, состоящая из заглавных и прописных букв русского алфавита и содержать не менее 3 символов.
Мы же сейчас заполним это поле, используя не русские, а латинские буквы. После чего попробуем отправить форму.
Для увеличения / уменьшения размера изображения кликните по картинке
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | #wrapper h2 {
font-size: 48px;
color: rgb(6, 106, 117);
padding: 2px 0 10px 0;
font-family: 'FranchiseRegular','Arial Narrow',Arial,sans-serif;
font-weight: bold;
text-align: center;
padding-bottom: 30px;
}
/** Только webkit браузеры поодерживают background-clip:text; */
#wrapper h2 {
background:
-webkit-repeating-linear-gradient(-45deg,
rgb(18, 83, 93) ,
rgb(18, 83, 93) 20px,
rgb(64, 111, 118) 20px,
rgb(64, 111, 118) 40px,
rgb(18, 83, 93) 40px);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
#wrapper h2:after {
content: ' ';
display: block;
width: 100%;
height: 2px;
margin-top: 10px;
background:
-moz-linear-gradient(left, rgba(147,184,189,0) 0%,
rgba(147,184,189,0.8) 20%,
rgba(147,184,189,1) 53%,
rgba(147,184,189,0.8) 79%,
rgba(147,184,189,0) 100%);
background:
-webkit-gradient(linear, left top, right top,
color-stop(0%,rgba(147,184,189,0)),
color-stop(20%,rgba(147,184,189,0.8)),
color-stop(53%,rgba(147,184,189,1)),
color-stop(79%,rgba(147,184,189,0.8)),
color-stop(100%,rgba(147,184,189,0)));
background:
-webkit-linear-gradient(left, rgba(147,184,189,0) 0%,
rgba(147,184,189,0.8) 20%,
rgba(147,184,189,1) 53%,
rgba(147,184,189,0.8) 79%,
rgba(147,184,189,0) 100%);
background:
-o-linear-gradient(left, rgba(147,184,189,0) 0%,
rgba(147,184,189,0.8) 20%,
rgba(147,184,189,1) 53%,
rgba(147,184,189,0.8) 79%,
rgba(147,184,189,0) 100%);
background:
-ms-linear-gradient(left, rgba(147,184,189,0) 0%,
rgba(147,184,189,0.8) 20%,
rgba(147,184,189,1) 53%,
rgba(147,184,189,0.8) 79%,
rgba(147,184,189,0) 100%);
background:
linear-gradient(left, rgba(147,184,189,0) 0%,
rgba(147,184,189,0.8) 20%,
rgba(147,184,189,1) 53%,
rgba(147,184,189,0.8) 79%,
rgba(147,184,189,0) 100%);
} |
Форма авторизации на HTML | WebShake.RU
Всем привет. Итак, мы изучили несколько элементов для создания форм. Пришло время объединить наши знания для решения задачи побольше. Давайте создадим самую простую форму для авторизации на сайте. Для этого нам необходимы два поля, делаем и привязываем к ним подписи.
Первое поле – для логина, второе – для пароля. И вот со вторым не все так просто. Поскольку на текущий момент оно представляет собой просто поле для ввода текста.
Пример:
<form method="post" action="/login/">
<table>
<tr>
<td><label for="loginField">Логин</label></td>
<td><input type="text" name="login"></td>
</tr>
<tr>
<td><label for="passwordField">Пароль</label></td>
<td><input type="text" name="password"></td>
</tr>
</table>
</form>Результат в браузере:
Чтобы введенный в нем текст заменялся на звездочки, как это принято для поля такого типа, необходимо сделать одно простое действие. А именно, осуществить замену значения атрибута type на password:
<input type="password" name="password">Результат:
Кнопка отправки формы
Ну, вот. Наша форма уже почти готова. Теперь, чтобы завершить ее создание, необходимо сделать кнопку, которой будет осуществляться отправка формы. Задача решается с применением тега <input> с типом submit.
Если на кнопке должна присутствовать какая-то надпись, то ее можно сделать, используя атрибут value. Задавать имя кнопке или нет – на ваше усмотрение, но если вы это сделаете, то сервер будет получать это имя, а также значение кнопки.
Пример:
<input type="submit" value="Войти">Как правило, в имени кнопки отправки формы есть потребность тогда, когда у формы есть несколько кнопок, каждая из которых выполняет определенное действие. Благодаря этому сервер, получая от браузера имя и значение кнопки, понимает, на какую именно кнопку нажал пользователь и что, соответственно, необходимо выполнить.
В итоге код нашей формы получится следующим:
<form method="post" action="/login/">
<table>
<tr>
<td><label for="loginField">Логин</label></td>
<td><input type="text" name="login"></td>
</tr>
<tr>
<td><label for="passwordField">Пароль</label></td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Войти"></td>
</tr>
</table>
</form>Результат в браузере:
Вот и получилась наша формочка авторизации на HTML. Если вам нужен бекенд для обработки этих данных, то вам нужен урок из курса PHP система авторизации с помощью cookie на PHP. Если же вы сейчас только изучаете HTML, то просто переходите к следующему уроку.
Коллекция из 15+ красивых форм регистрации и авторизации
Не будет преувеличением сказать, что более половины всех существующих сайтов имеют форму для авторизации или регистрации. При желании, можно модернизировать, улучшить любую форму. Достаточно знать HTML, CSS и немного JavaScript.
Сегодня хотел поделиться своей подборкой красивых форм. Они могут стать прекрасным стартом для создания ваших, оригинальных web-элементов. В эту коллекцию попали наиболее удачные на мой взгляд формы. Они просты для установки, имеют большое разнообразие «свистелок», легко впишутся в адаптивную верстку, и просто эффектно смотрятся. Представленные формы соответствуют разным стилям: плоские, объемные, и ряд других. Все же, лучше один раз увидеть, чем 100 раз услышать.
Nice dark sign in form
Красивая форма регистрации в красно-желтых цветах. За счет использования градиента и теней, создается ощущение объема.Демо
Скачать
Red Login Form
Необычность этой формы заключается в круглой кнопке.Демо
Скачать
Log in/Sign up screen animation
Login Form on HTML5
Форма авторизации в виде стопки листов бумаги.Демо
Скачать
Material Compact Login Animation
Sign In
Interactive Sign Up Form
Пошаговая форма регистрации. Хорошо смотрится с анимацией переходов.Демо
Скачать
Fancy Forms
LogIn Form
DailyUI Challenge 001
Красивая фора с полупрозрачным фоном.Демо
Скачать
Sign Up Form UI
Login Form — Modal
Log In Form CSS 2017
Sign In/Up Form Transitions
Authorization badge
Apple Login Form
А какая форма понравилась вам?
Как сделать форму в HTML
В наше время сложно представить сайт без форм. Думаем, что Вы с ними сталкивались и ранее, просто не знали, как именно они называются. В качестве примера наиболее популярных форм можно привести регистрацию пользователя, окно отправки сообщения на форуме или письма и так далее. Основная задача форм – это отправление данных со страницы на сервер. И формы крайне необходимы.
На стороне сервера формы чаще всего обрабатываются с помощью PHP.
Создание формы осуществляется с применением тега <form>, который является парным. А уже внутри него происходит размещение полей формы.
Тег <form> имеет два атрибута, которые являются весьма важными.
Атрибут action. С его помощью указывается адрес или URL, по которому происходит отправка формы.
Атрибут method. С его помощью указывается метод отправки формы.
Вот так это выглядит на практике:
<form action="https://yandex.ru/search/" method="get">
...
</form>Отправка формы, как правило, осуществляется с помощью методов get или post. По умолчанию, когда не задействован атрибут method, будет применяться get.
Суть метода get заключается в отправке данных формы в строке запроса. Это позволяет видеть их в адресной строке браузера. Размещены такие данные после знака вопроса.
Пример выглядит так: https://yandex.ru/search/?text=php
Мы рекомендуем применять метод get, когда речь идет о поисковых формах. Это дает возможность пользователю видеть в строке браузера ссылку на результаты поиска. Что немаловажно, если он хочет с кем-то ими поделиться.
Что же касается метода post, он использует тело HTTP-запроса для отправки данных. Метод актуален в тех случаях, когда нужно передать немало информации, а вот в ссылке на результат работы с информацией необходимости нет. Например, этот метод уместен при редактировании личного профиля на сайте.
Текстовое поле ввода
Многие поля форм создаются с использованием тега input. Это одиночный тег, который имеет два обязательных атрибута:
type — данный атрибут задает тип поля;
name — данный атрибут задает имя поля.
От типа поля зависит его поведение и отображение. Наиболее популярный тип – text, то есть – текстовое поле.
Имя поля следует задавать с той целью, чтобы данные на сервере обрабатывались корректно. Как правило, чаще всего имя поля делают уникальным в рамках формы. Но из этого правила есть определенные исключения. Имя поля должно состоять исключительно из латинских букв и цифр.
Давайте создадим свою простейшую форму, которая будет формировать поисковый запрос в Яндекс:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Форма поиска в Яндексе</title>
</head>
<body>
<form action="https://yandex.ru/search/">
<input type="text" name="text">
<input type="submit" value="Найти в Яндексе">
</form>
</body>
</html>Форма будет выглядеть так:
Теперь, когда мы нажмём на кнопку, мы попадём на страницу поиска в Яндексе:
А в адресной строке будет следующее:
https://yandex.ru/search/?text=PHP
Таким образом, мы передали содержимое поля с именем text в параметр text на странице поиска в Яндексе.
Более подробно обо всём этом мы поговорим в следующих уроках.