×
Закрытие
5
×

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

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

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

Статья сборника Как установить графический редактор GIMP

Перейти к статье

Устанавливаем графический редактор GIMP

  1. Выбор графического редактора
  2. Устанавливаем программу GIMP
  3. Устанавливаем Руководство пользователя

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

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

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

Кроме того здесь можно будет посмотреть, как в этот редактор добавить встроенное "Руководство пользователя", а также приведен бесплатный видеокурс, где можно поближе с ним познакомиться.

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

    Cайт на практическом примере

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

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

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

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


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

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

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

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

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

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

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

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

    Содержание


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

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


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

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

    № пп Имя поля Назначение элемента Элемент Тип элемента
    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-элементов в форме регистрации

    При этом к некоторым элементам добавим дополнительные блоки-обвертки

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

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

    kak-sozdat-formu-registracii_1

    Рис.2 HTML-код формы онлайн заказа с разделом регистрации

    Используемые здесь элементы и

    • Атрибут type является основным атрибутом элемента , который определяет его тип. В данном случае используются три его варианта: 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) - "Повторите пароль".
      Следует отметить, что применение этого атрибута придает элементам дополнительную информативность. И при желании форму можно немного упростить. Например, для таких полей можно вообще не использовать элемент метки

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

    скриншот 77

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

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


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

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

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

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

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

    С уважением,


    Комментарии


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

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