Сегодня решил запустить новый раздел "ДЛЯ САЙТА". В нем я буду выкладывать готовые решения для создания своих сайтов - это и формы, и всякого рода расширения для улучшения юзабилити сайта, готовые php скрипты, html , css и jquery. Чтобы улучшить обзор моих публикаций по категориям.
Сегодня хочу вам представить самые популярные и необходимые для всех сайтов формы, а именно форму регистрации. Такие формы есть на всех проектах и это не секрет для каждого. Эти формы вы видите на всех сайтах которые посещаете, а если вы решили создать свой сайт с ноля, то перед вами обязательно станет вопрос, а как их создать. И в этом надеюсь придти вам на помощь с готовыми решениями. Постараюсь максимально описать каждое предложение, показать на демо и дать возможность конечно скачать исходники. На подготовку таких статей уйдет конечно немало времени, но буду стараться делать максимально быстро и понятно. Больше ничего лишнего только необходимое. Поехали!
Форма регистрации для своего сайта.
Думаю именно форма регистрации станет в помощь многим начинающим программистам php, сегодня сделал обзор интернета по запросу красивая форма регистрации для своего сайта, и как вы думаете много, я таких нашел? Конечно не одного. Но может это и к лучшему, я могу дать ее вам первый. Каждое поле с описанием, можно сказать даже с конкретным описанием действий которые необходимо произвести дабы зарегистрироваться на сайте. Вот примерно такого типа форму мы с вами сегодня и создадим для начала.
Код HTML
<table width="100%" border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="bdrform_tabl">
<form class="formreg" action="обработчик.php" method="post" enctype="multipart/form-data">
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="bdr_w">
<tbody><tr valign="top">
<td colspan="5"><span class="serdop">Внимание! Поля, отмеченные знаком
<span class="zvzd">*</span> – обязательны для заполнения</span>
</td>
</tr>
<tr>
<td colspan="5" class="bt1">
<strong>Личные данные:</strong>
</td>
</tr>
<tr valign="top">
<td>
<span class="zvzd">*</span>
</td>
<td width="23%">
Уникальное имя (логин):
</td>
<td width="38%">
//Поле ввода логина
<input name="login" id="login" type="text" class="fld" value=""></td>
<td> –</td>
<td width="39%">Выбранное Вами имя может состоять из букв латинского алфавита или
кириллицы различного регистра, цифр и знака минус (-), и должно быть длиной от 5
до 15 символов. Пример: (<em>Андрей Айдар</em>)
</td>
</tr>
<tr valign="top">
<td>
<span class="zvzd">*</span>
</td>
<td class="bt1">
Рабочий E-mail:
</td>
<td class="bt1">
//Поле ввода email
<input name="email" id="email" type="email" class="fld" value=""></td>
<td> –</td>
<td class="bt1">На этот почтовый адрес будет выслан пароль, если Вы его забудете.
Рекомендую заполнить это поле действительным адресом электронной почты,
на сайте проходит активация аккаунта через e-mail.
</td>
</tr>
<tr valign="top">
<td>
<span class="zvzd">*</span>
</td>
<td class="bt1">
Пароль:
</td>
<td class="bt1">
//Поле ввода пароля
<input name="password" type="password" id="pas1" class="fld"></td>
<td class="bt1" rowspan="2">
–
</td>
<td class="bt1" rowspan="2">
Пароль может состоять из букв латинского алфавита или кириллицы различного регистра,
цифр и любых специальных символов (
<span class="cr">~</span>, <span class="cr">!</span>, <span class="cr">@</span>,
<span class="cr">#</span>, <span class="cr">$</span>, <span class="cr">%</span>,
<span class="cr">^</span>, <span class="cr">&</span>, <span class="cr">*</span>,
<span class="cr">-</span>, <span class="cr">+</span>, <span class="cr">=</span>
и др.), и должен быть длиной от 6 до 15 символов.
</td>
</tr>
<tr valign="top">
<td>
<span class="zvzd">*</span>
</td>
<td>Повторите пароль:</td>
<td>
//Повторяем пароль
<input type="password" name="confirmpass" id="pas2" class="fld" value="">
</td>
</tr>
<tr>
<td colspan="5" class="bt1">
<strong>Мое изображение </strong>
</td>
</tr>
<tr valign="top">
<td></td>
<td>Выберите аватар.</td>
<td>
//Загрузка файлов
<input type="FILE" name="fupload" class="fld"></td>
<td colspan="2"> - Изображение должно быть формата jpg, gif или png:</td>
</tr>
<tr>
<td colspan="5" class="bt1"> <strong>Защита от спама </strong></td>
</tr>
<tr valign="top">
<td></td>
<td></td>
<td>
//Капча
<img src="/kcaptcha?<?php echo session_name()?>=<?php echo session_id()?>" border="0" id="capcha-image" alt="Включите изображения в браузере" title="Робот не пройдет">
</td>
<td colspan="2">– Если не виден код пожалуйста <a href="javascript:void(0);" onclick="document.getElementById('capcha-image').src='/kcaptcha?
<?php echo session_name()?>=<?php echo session_id()?>' + Math.random();">обновите</a>
</td>
</tr>
<tr valign="top">
<td><span class="zvzd">*</span></td>
<td>Число на картинке:</td>
<td>
//Поле ввода кода капчи
<input style="margin-bottom:16px;" name="keystring" id="keystring" type="text" class="fld">
</td>
<td> –</td>
<td>Введите число, изображенное на картинке для защиты от автоматических регистраций.
</td>
</tr>
<tr>
<td colspan="5" align="center">
//И собственно сама кнопка отправки или регистрации
<input type="submit" value="Зарегистрировать имя" id="btnbk_reg">
</td>
</tr>
</tbody></table>
</form>
//Скрытое поле для отображения ошибок (Валидация формы)
<div id="messenger"></div>
</td></tr></tbody></table>
Теперь давайте посмотрим, что из этого вышло.
Давайте немного опишу наши действия и необходимость того или иного поля для регистрации на сайте. Как видите из примера мы создали очень обширную форму регистрации с самыми необходимыми и популярными полями ввода регистрационных данных для сайта с регистрацией. Для каждого не секрет, что регистрация на сайте в наше время очень популярна и придает социальных функций для вашего сайта и много других преимуществ которые вы и установили для зарегистрированных пользователей своего ресурса. И так разбираем.
1. Обязательно предупреждаем пользователя, что поля отмеченные звездочкой (*)обязательны для заполнения. Зачем это нужно? А нужно это для того чтобы будущий пользователь знал какие поля вы обязательно должны заполнить и не ушли раньше времени с сайта так и не зарегистрировавшись.
2. Ну конечно это имя уникальное имя логин которое будет использоваться на сайте.
3. Рабочий email адрес электронной почты, на который придет письмо с подтверждением о регистрации или для дальнейшей работы, например рассылки новостей или какой либо другой информации необходимой для зарегистрированных пользователей.
4. Пароль, а куда без него.
5. Подтверждение пароля для проверки правильности ввода.
6. Аватар если вы используете например систему комментирования материала на вашем сайте, то аватар - изображение пользователя будет подставлено к его комментариям или иным размещенным материалам вашего ресурса. Это поле не обязательно но добавит интерактивности и более лучшему оформлению страниц.
7. И наконец последнее поле ввода защитного поля (капчи). Такого рода капчу для сайта, я уже описывал ранее как сделать. Зачем нужна капча при регистрации? А без нее никак, ведь наш интернет наполнен миллионами спам ботов которые так и хотят, попасть на ваш сайт и накидать чего нибудь ненужного вам и вашим постоянным посетителям. Уникальная защита предотвратит попаданию на ваш сайт такого рода мошенников. Конечно на сайте построенном на кмс такого сделать не так просто без знаний языков веб-программирования, а для своего сайта если вы читаете этот материал, значит хотите сами сделать свой сайт и правильно делаете.
8. Последний елемент формы регистрации, без него никуда, конечно кнопка отправки, обычная простая кнопка.
Немного объяснил, что куда и зачем, а мы идем далее. Создадим стили для формы, я вам дам свои стили, а вы можете менять кто как хочет подстраивать под свой дизайн и так далее.
Код CSS
.bdrform_tabl {
background-color: whiteSmoke;
padding: 14px 16px 16px 18px;
border: 1px solid #DFDFDF;
border-radius: 10px;
}
form {
display: block;
margin-top: 0em;
}
//Класс для звезды
.zvzd {
padding-right: 5px;
font: 22px Arial,Helvetica;
color: #D30B15;
}
table#bdr_w td.bt1 {
border-top: 1px solid
white;
}
table#bdr_w td {
padding-bottom: 8px;
padding-top: 8px;
}
.formreg td {
height: 35px;
padding: 0 4px 6px 0;
}
// Скрытый блок для отображения ошибок ввода
#messenger {
width: 90%;
margin: 5px 0px;
padding: 5px;
border: #F06 dotted 1px;
background: #F7CAE0;
border-radius: 7px;
display: none;
}
Вот такой вот код красивой формы регистрации получился у меня. Давайте двигаться далее и разберем каждое поле по отдельности. Это просто шаблон готовой формы регистрации, делать обработчик наверное нет необходимости, хотя все для него подготовлено.
Первое поле ввод имени или так называемого логина для сайта
Код HTML
<input name="login" id="login" type="text" class="fld" value="">
Ето инпут тип которого текст, присвоен идентификатор и класс. Желательно когда прописываете код для своего сайта, для каждого елемента, будь то поле ввода, блок, такблица или другой елемент страници - всегда указывайте класс и идентификатор. Это пригодится вам обязательно, ведь когда вы создаете сайт сами, то сначала получится что-то простенькое, а уже потом вы начнете изучать jquery для улучшения юзабилити, и начнете улучшать дополнять свой проект. Отходя от темы - это был мой совет! Больше здесь ничего сложного нет идем далее.
Поле ввода email адреса
Код HTML
<input name="email" id="email" type="email" class="fld" value="">
Это также простой инпут тип которого только уже не текст, а email, также указан класс и идентификатор. Ничего сложного, но в HTML5, если при условии браузер поддерживает, то неправильный ввод адреса почты сработает даже на начальном этапе ввода, сам браузер выведет сообщение об ошибке.
Следующее поле пароль и повторение пароля для сравнения, рассмотрим их вместе поля одинаковые по типу, то не вижу смысла описывать их отдельно.
Код HTML
<input name="password" type="password" id="pas1" class="fld">
// Проверка правильности ввода пароля
<input type="password" name="confirmpass" id="pas2" class="fld" value="">
Вот здесь уже тип (password) скрывает вводимые символы в поле, как соответственно и проверка пароля. Для чего и нужна проверка пароля на совпадение, а иначе никак символы срыты.
Следующее поле загрузки файла на сервер, уже интересней и сложней. Хочу предупредить сразу когда создаем форму, а мы ее создали уже, обязательным атрибутом есть (enctype="multipart/form-data). Этот атрибут обязательно необходим при условии, что ваша форма предусматривает загрузку файлов на сервер - это для общего обозрения может кому помог.
Код HTML
<input type="FILE" name="fupload" class="fld">
Здесь конечно тип будет (type="FILE") Который дает знать браузеру, что нужно открыть окно виндовс для выбора файла. Кнопка обзор создана автоматичесски. Внимание будте осторожны с такими полями. Такого рода поля обязательно нужно аккуратно обрабатывать обработчиком. Ведь загрузить могут что угодно, здесь конечно нужно будет поработать более всего, ну об этом далее, скорее всего в следующей статье.
И наконец последнее поле ввода - это проверка ввода защитного кода с картинки сгенерированной php скриптом. Это просто поле ввода но всеравно рассмотрим конкретно и его подробно.
Код HTML
<input style="margin-bottom:16px;" name="keystring" id="keystring" type="text" class="fld">
Это конечно простое текстовое поле, в которое вводятся в моем случае цифры с картинки.
И в завершении как всегда обязательно стоит кнопка которая и завершает работу формы и передает на обработку скрипту введенные данные. Давайте вкратце рассмотрим как это выглядет в коде html
Код HTML
<input type="submit" value="Зарегистрировать имя" id="btnbk_reg">
Здесь конечно тип type=submit который и сообщает браузеру, что здесь должа быть кнопка для отправки данных формы.
На этом этапе и завершим наверное рассмотрение самого кода формы, далее конечно создадим обработчик, проверим скрипт на работоспособность, сделаем вывод ошибок без перезагрузки страници и всякие другие примочки для улучшения формы.