×

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

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

Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

  • Рубрики
  • Слайдер статей
  • Тест сайта
  • Подписка
  • Сайдбар
  • Прокрутка вверх
  • Как сделать сайт с нуля своими руками (вводная часть)

    1. Причины создания пошаговой инструкции по разработке самописного сайта
    2. Тема создаваемого сайта
    3. В чем будет заключаться монетизация
    4. Функционал
    5. Этапы создания
    6. Текущее состояние создаваемого сайта

    Здравствуйте уважаемый посетитель!

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

    Причем чтобы такой интернет-ресурс был создан не на каком-нибудь стандартном шаблоне бесплатной СMS (Content management system - система управления контентом) типа WordPress, Drupal, Joomla и т.п., а заточенный под себя, с возможностью обеспечить ему должную безопасность и реализовать все свои индивидуальные потребности.

    Часто такие сайты, созданные под конкретные задачи на основе языка разметки веб-страниц HTML, стилей CSS и других инструментов веб-программирования (PHP, JavaScript и т.п.), называют самописными.

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

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

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

  • Текущее состояние создаваемого сайта

    1. Проверка при малых разрешениях экрана
    2. Проверка при больших разрешениях экрана
    3. Проверка на выделенном домене

    Здравствуйте уважаемый посетитель!

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

    Для этого предусмотрена возможность оценивать его работу в двух вариантах: с использованием зеркала сайта на поддомене текущего ресурса и на реальном интернет-ресурсе, размещенном на выделенном домене "avtobezugona.ru.

    Следует отметить, что первый вариант, предусматривающий использование зеркала сайта, позволяет наглядно оценить его работу при различных разрешениях экрана в диапазоне от 320px до 1920px. Что очень удобно для проверки адаптации во всем допустимом диапазоне.

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

Самописный сайт своими руками!

Текущее состояние создаваемого сайта

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

Где в дополнительных материалах можно бесплатно скачать исходные файлы сайта с таблицами MySQL.

Вы здесь: Главная → Сборник статей → Формы → Создаем форму регистрации


Автор: / Дата:

Создаем форму регистрации

Здравствуйте уважаемый посетитель!

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

Следует отметить, что основное внимание здесь будет уделено вопросам создания HTML-элементов и валидации заполнения полей формы на стороне клиента.

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

Исключением будет являться лишь проверка на идентичность первичного и повторного ввода пароля. Которую мы сделаем позднее с помощью соответствующего скрипта.

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

Содержание


  • Формируем элементы формы регистрации
  • Проверяем валидацию формы на стороне клиента
  • Исходные файлы сайта

Формируем элементы формы регистрации


Создадим в форме регистрации, обычно используемые в этих случаях, поля "Имя", "Логин" "E-mail", "Пароль" и "Подтвердите пароль".

Для этого в качестве HTML-элементов будем использовать теги: <input> предназначенный для создания полей ввода и <label> - метку для поля ввода.

№ пп Имя поля Назначение элемента Элемент Тип элемента
1 Имя Метка label
2 Поле ввода input text
3 Логин Метка label
4 Поле ввода input text
5 E-mail Метка label
6 Поле ввода input email
7 Пароль Метка label
8 Поле ввода input password
7 Подтвердите пароль Метка label
9 Поле ввода input password

Рис.1 Соответствие HTML-элементов в форме регистрации

При этом к некоторым элементам добавим дополнительные блоки-обвертки <div>, использование которых позволит упростить оформление элементов, выполнив стилизацию аналогично предыдущим разделам.

В итоге, получим вариант HTML-кода формы онлайн заказа, дополненный элементами раздела регистрации, как показано в следующей таблице (вновь созданные элементы выделены более светлым фоном).

Используемые здесь элементы <input> и <label> ранее нами уже применялись, поэтому повторно их рассматривать не имеет смысла. А вот, что касается атрибутов тега <input>, определяющих параметры полей регистрации, несмотря на то, что с некоторыми уже приходилось встречаться, на них все же стоит остановиться поподробней.

  • Атрибут type является основным атрибутом элемента <input>, который определяет его тип. В данном случае используются три его варианта: text (поз.81,91), предназначено для текстового поля, email (поз.85) - для адреса электронной почты и password (поз.100, 108) - для ввода пароля.
    Последнее - это тоже поле, предусматривающее ввод текста. Но в отличие от обычного текстового, такой вариант обеспечивает, что все вводимые символы будут показываться звездочками. И применяется такой тип именно для полей ввода пароля, чтобы никто не смог подглядеть вводимый пароль.
  • Универсальный атрибут title здесь применен для описания содержимое элемента (поз.81,91,100) в виде всплывающей подсказки, которая появляется при наведении на него курсора.
    Так для поля "Имя" (поз.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).
    Для поля же "Подтвердите пароль" (поз.108) необходимость применения атрибута отсутствует по другой причине. Связанно это с тем, с помощью JavaScript-скрипта будет проводиться проверка на идентичность повторного ввода И если комбинация символов при воде пароля не будет совпадать, то форма отправляться не будет. В связи с чем для успешной отправки формы это поле в любом случае должно быть заполнено.
  • Атрибут placeholder выводит подсказывающий текст, который обычно отображается серым цветом и исчезает при наборе текста.
    В данном случае это применено для полей ввода пароля. Для поля "Пароль" (поз.100) подсказывающий текст - "Введите пароль", а для подтверждения пароля (поз.108) - "Повторите пароль".
    Следует отметить, что применение этого атрибута придает элементам дополнительную информативность. И при желании форму можно немного упростить. Например, для таких полей можно вообще не использовать элемент метки <label>. Либо, просто указать в нем пустое значение &nbsp;, как в нашем случае сделано для поля подтверждения пароля (поз.105).

После того, как вновь сформированные элементы регистрации мы добавим в форму онлайн заказа, находящуюся в файле "poluchit-skidku.php" каталога "articles", можно открыть соответствующую страницу "Получить скидку" и посмотреть что у нас получилось.

Для увеличения / уменьшения размера изображения кликните по картинке
Вновь сформированные элементы регистрации

Рис.3 Вновь сформированные элементы регистрации

Как видно на скриншоте, все новые элементы добавлены. Однако, их размер и расположение на странице пока не соответствует типовому внешнему виду остальных элементов формы.

Обусловлено это тем, что на данный момент новые элементы отображаются браузером в соответствии со стилевыми свойствами, назначенными по умолчанию. Для того, чтобы это исправить необходимо их оформить, подобно тому, как мы это делали ранее в статье Стилизуем элементы формы с помощью CSS.

В итоге после выполненных преобразований получим окончательный вид формы онлайн заказа с добавленным разделом регистрации (с соответствующим CSS-кодом можно ознакомиться в файле "main.css", который можно найти в разделе Исходные файлы сайта).

Для увеличения / уменьшения размера изображения кликните по картинке
Созданные элементы регистрации после оформления стилями CSS

Рис.4 Созданные элементы регистрации после оформления стилями CSS

Как видно, все нужные элементы созданы и приняли соответствующий внешний вид. При этом заданы все необходимые условия заполнения полей формы.

А теперь проверим как будут функционировать заданные фильтры, определяющие условия заполнения полей ввода.

Проверяем валидацию формы на стороне клиента


Ранее при создании элементов формы для формирования различных фильтров мы использовали определенные атрибуты <input>. И сейчас посмотрим, как они будут функционировать, а именно: будет ли блокироваться отправка формы при невыполнении условий заполнения полей, и как это будет отображаться на странице.

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

Сначала создадим ситуацию, когда одно из обязательных для заполнения полей оказалось пустым. В этом случае заведомо оставим поле незаполненным, элемент которого был дополнен атрибутом required. В данном случае выберем для этого поле "Логин".

Результат такой проверки приведен на следующем скриншоте.

Для увеличения / уменьшения размера изображения кликните по картинке
Проверка отправки формы с пустым обязательным полем

Рис.5 Проверка отправки формы с пустым обязательным полем

Как видно, вариант с незаполненным полем, которое определено как обязательное для заполнения, отрабатывается должным образом, а именно: форма не отправляется (блокируется), а в браузере отображается проблемное поле и вид ошибки.

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

В нашей форме данный атрибут применен для полей "Имя", "Логин" и "Пароль". Для проверки возьмем, к примеру, поле "Имя", в элементе которого регулярное выражение задано в виде [А-Яа-яЁё]{3,}. Что означает, что в данном поле должна быть введена комбинация символов, состоящая из заглавных и прописных букв русского алфавита и содержать не менее 3 символов.

Мы же сейчас заполним это поле, используя не русские, а латинские буквы. После чего попробуем отправить форму.

Для увеличения / уменьшения размера изображения кликните по картинке
Проверка отправки формы с неправильно заполненном полем

Рис.6 Проверка отправки формы с неправильно заполненном полем

На скриншоте видно, что и этот вариант ошибки с некорректным вводом, формой отрабатывается.

И последнее, что мы проверим, это работоспособность определения некорректного ввода адреса электронной почты.

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

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

Для увеличения / уменьшения размера изображения кликните по картинке
Проверка отправки формы с некорректно заполненном полем E-mail

Рис.7 Проверка отправки формы с некорректно заполненном полем E-mail

В результате, форма снова заблокировалась с выдачей возникшей ошибки. Что говорит о нормальном функционировании подобного рода проверок.


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

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

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

Исходные файлы сайта


Знак папкиИсходные файлы сайта с обновлениями, которые были сделаны в данной статье, можно скачать из прилагаемых дополнительных материалов:

  • Файлы каталога www
  • Таблицы базы данных MySQL

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

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

Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

С уважением, Николай Гришин


Комментарии


Если у Вас возникли вопросы, или есть какие-либо пожелания по представлению материала, либо заметили какие-нибудь ошибки, а быть может просто хотите выразить свое мнение, пожалуйста, оставьте свои комментарии. Такая обратная связь очень важна для возможности учитывать в дальнейшем мнение посетителей.

Буду Вам за это очень признателен!

comments powered by HyperComments