В сегодняшнем уроке мы создадим красивую форму для регистрации на сайте.
Facebook содержит много интересных дизайнерских ходов и решений. Для многих зарубежных пользователей Facebook является домом родным (в рунете Вконтакте и Одноклассники), и поэтому создатели подобных социальных сетей всегда стремятся к совершенству и прорабатывают мельчайшие детали, чтобы пользователю было максимально комфортно на сайте.
Давайте попробуем воссоздать форму регистрации Facebook.
XHTML
Мы начнем со скелета нашей формы:
<div id="div-regForm">
<div class="form-title">Sign Up</div>
<div class="form-sub-title">It's free and anyone can join</div>
<form id="regForm" action="submit.php" method="post">
<table>
<tbody>
<tr>
<td><label for="fname">First Name:</label></td>
<td><div class="input-container">
<input name="fname" id="fname" type="text" />
</div></td>
</tr>
<tr>
<td><label for="lname">Last Name:</label></td>
<td><div class="input-container">
<input name="lname" id="lname" type="text" />
</div></td>
</tr>
<tr>
<td><label for="email">Your Email:</label></td>
<td><div class="input-container">
<input name="email" id="email" type="text" />
</div></td>
</tr>
<tr>
<td><label for="pass">New Password:</label></td>
<td><div class="input-container">
<input name="pass" id="pass" type="password" />
</div></td>
</tr>
<tr>
<td><label for="sex-select">I am:</label></td>
<td>
<div class="input-container">
<select name="sex-select" id="sex-select">
<option value="0">Select Sex:</option>
<option value="1">Female</option>
<option value="2">Male</option>
</select>
</div>
</td>
</tr>
<tr>
<td><label>Birthday:</label></td>
<td>
<div class="input-container">
<select name="month">
<option value="0">Month:</option>
<?=generate_options(1,12,'callback_month')?>
</select>
<select name="day">
<option value="0">Day:</option>
<?=generate_options(1,31)?>
</select>
<select name="year">
<option value="0">Year:</option>
<?=generate_options(date('Y'),1900)?>
</select>
</div>
</td>
</tr>
<tr>
<td> </td>
<td><input type="submit" class="greenButton" value="Sign Up" />
<img id="loading" src="img/ajax-loader.gif" alt="working.." />
</td>
</tr>
</tbody>
</table>
</form>
<div id="error">
</div>
</div>
В самом начале создаем контейнер для формы с id div-regForm. Внутри данного контейнера мы будем размещать все элементы.
Далее создаем заголовки формы.
После этого идет непосредственно форма. Важно в данном примере, то что форма обрабатывается не собственными методами, а с помощью AJAX. Так что нам все равно какой метод передачи данных мы напишем в форме.
У каждого поля существует элемент label.
Еще у нас есть кнопка "запуска" :) + скрытое изображение, которое появляется только при нажатии на кнопку, и сигнализирует нам о том, что форма обрабатывается.
Последний блок - это блок для ошибок. По умолчанию он также спрятан.
CSS
Теперь настало время превратить скелет в красивое тело с помощью стилей :):
/* Page styles */
body,h1,h2,h3,p,td,quote,small,form,input,ul,li,ol,label{
margin:0px;
padding:0px;
}
body{
margin-top:20px;
font-family:Arial, Helvetica, sans-serif;
color:#51555C;
height:100%;
font-size:11px;
}
/* Form styles */
input,select{
padding:3px;
color:#333333;
border:1px solid #96A6C5;
margin-top:2px;
width:200px;
font-size:11px;
}
select{
width:auto;
padding:2px;
}
.formline{
padding:3px;
}
label{
font-size:11px;
text-align:right;
}
table{
width:300px;
}
td{
font-size:11px;
}
.input-container{
padding:1px;
}
#div-regForm,.registered{
border:3px solid #eeeeee;
padding:15px;
background:url(img/bg.jpg) repeat-x #cbd4e4;
color:#203360;
margin:30px auto 40px auto;
width:400px;
}
.form-title,
.form-sub-title{
font-size:20px;
font-family:"Lucida Grande",Tahoma,Verdana,Arial,sans-serif;
font-size:20px;
font-weight:bold;
}
.form-sub-title{
font-weight:normal;
padding:6px 0 15px 0;
}
.greenButton{
width:auto;
margin:10px 0 0 2px;
padding:3px 4px 3px 4px;
color:white;
background-color:#589d39;
outline:none;
border:1px solid #006600;
font-weight:bold;
}
.greenButton:active{
background-color:#006600;
padding:4px 3px 2px 5px;
}
#loading{
left:10px;
position:relative;
top:3px;
visibility:hidden;
}
#error{
background-color:#ffebe8;
border:1px solid #dd3c10;
padding:7px 3px;
text-align:center;
margin-top:10px;
visibility:hidden;
}
PHP
Теперь давайте взглянем на код PHP:
function generate_options($from,$to,$callback=false)
{
$reverse=false;
if($from>$to)
{
$tmp=$from;
$from=$to;
$to=$tmp;
$reverse=true;
}
$return_string=array();
for($i=$from;$i<=$to;$i++)
{
$return_string[]='
<option value="'.$i.'">'.($callback?$callback($i):$i).'</option>
';
}
if($reverse)
{
$return_string=array_reverse($return_string);
}
return join('',$return_string);
}
function callback_month($month)
{
return date('M',mktime(0,0,0,$month,1));
}
/* and here is how we use it (taken from our XHTML code above):
generate_options(1,31); // generate days
generate_options(date('Y'),1900); // generate years, in reverse
generate_options(1,12,'callback_month'); // generate months
*/
Давайте попробуем разобраться в коде.
В функции generate_options присутствуют параметры $from и $to. Они отвечают за диапазон вариантов, которые будут сгенерированы (дни, месяцы и года в нашем примере). Кроме этого, там же присутсвует необязательный параметр $callback, который выполняет функцию обратного вызова.
В функции мы определяем $reverse как false. Если мы используем функцию следующим образом: generate_options(1,31) мы генерируем серию элементов выбора и выдаем их в том же порядке. Если мы поменяем расположение параметров, на выходе будет то же самое, но в обратном порядке.
Именно это мы и делаем в 5-й строке. Мы проверяем в обратном ли порядке диапазон $from и $to и определяем $reverse как true. Но в то же время, мы меняем их значения для использования во время нормальной генерации.
Далее мы заполняем массив $return_string сгенерированными вариантами.
Эту часть перевел как смог :) Очень трудно было правильно подобрать русские слова :). Прошу прощения за эту часть :)
jQuery
После того, как мы покончили с внешним оформлением, нам необходимо передать информацию скрипту обработки.
В шапке документа подключаем фреймворк:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
Остальной код находится в файле script.js:
$(document).ready(function(){
$('.greenButton').click(function(){
register();
});
$('#regForm').submit(function(e) {
register();
e.preventDefault();
});
});
function register()
{
hideshow('loading',1);
error(0);
$.ajax({
type: "POST",
url: "submit.php",
data: $('#regForm').serialize(),
dataType: "json",
success: function(msg){
if(parseInt(msg.status)==1)
{
window.location=msg.txt;
}
else if(parseInt(msg.status)==0)
{
error(1,msg.txt);
}
hideshow('loading',0);
}
});
}
function hideshow(el,act)
{
if(act) $('#'+el).css('visibility','visible');
else $('#'+el).css('visibility','hidden');
}
function error(act,txt)
{
hideshow('error',act);
if(txt) $('#error').html(txt);
}
В данном коде отображена вся простота использования метода $.ajax - всего несколько строк кода нам необходимо для отправки всех полей формы в файл submit.php методом POST.
Как же нам определить, правильно ли заполнена форма, и куда перенаправлять пользователя?
За это все отвечает файл submit.php:
// we check if everything is filled in
if(empty($_POST['fname']) || empty($_POST['lname']) || empty($_POST['email']) || empty($_POST['pass']))
{
die('{status:0,txt:"All the fields are required"}');
}
// is the sex selected?
if(!(int)$_POST['sex-select'])
{
die('{status:0,txt:"You have to select your sex"}');
}
// is the birthday selected?
if(!(int)$_POST['day'] || !(int)$_POST['month'] || !(int)$_POST['year'])
{
die('{status:0,txt:"You have to fill in your birthday"}');
}
// is the email valid?
if(!(preg_match("/^[\.A-z0-9_\-\+]+[@][A-z0-9_\-]+([.][A-z0-9_\-]+)+[A-z]{1,4}$/", $_POST['email'])))
die('{status:0,txt:"You haven\'t provided a valid email"}');
echo '{status:1,txt:"registered.html"}';
Тут мы проверяем наиболее типичные ошибки. Каждое сообщение, которое мы выводим, должно быть форматировано как объект javascript со свойствами status и txt.
Заметьте, что, возможно, Вам понадобится добавить новые поля в базу данных, создать сессии и добавить еще несколько проверок на правильность для своих нужд (в зависимости от целей использования формы).
Вот форма и готова!
Спасибо за внимание!