От автора: тема веб-форм, на мой взгляд, довольно актуальна. Практически на любом сайте сейчас можно найти форму. Даже на одностраничниках зачастую имеется форма обратной связи. Что уж говорить о больших сайтах, на них формы представлены во всем их многообразии — это и контактные формы, формы отзывов, формы авторизации, всевозможные опросы и голосования и т.д.
В данном уроке мы с Вами шаг за шагом создадим привлекательную форму для отзывов. Итак, приступим…
Формы отзывов, как правило, имеют довольно большое количество полей. Пользователям часто попросту лень заполнять такие большие формы. И вот тут необходимо как то стимулировать пользователей заполнить такую форму. В качестве стимула может выступать оригинальность формы или ее красивая подача.
Совсем недавно мне пришлось создать одну такую форму для нашего сайта. Найти ее Вы можете на странице Отзывов. На мой неискушенный взгляд форма получилась довольно привлекательной и, главное, живой, реагирующей на действия пользователя:
В этом уроке мы попробуем шаг шагом создать похожую форму только с немного меньшим количеством полей.
Итак, начнем, как всегда, с разметки. Создадим все необходимые поля формы:
|
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 |
<form method="post" action="" class="form"> <p> <label for="lastname"><span class="formTextRed">*</span> Фамилия:</label> <input type="text" name="lastname" id="lastname" /> </p> <p> <label for="firstname"><span class="formTextRed">*</span> Имя:</label> <input type="text" name="firstname" id="firstname" /> </p> <p> <label for="middlename">Отчество:</label> <input type="text" name="middlename" id="middlename" /> </p> <p> <label for="email"><span class="formTextRed">*</span> Email:</label> <input type="text" name="email" id="email" /> </p> <p> <label for="emailAlt">Альтернативные Email:</label> <input type="text" name="emailAlt" id="emailAlt" /> </p> <p> <label for="country">Страна:</label> <select name="country" id="country"> <option value="Австралия">Австралия</option> <option value="Австрия">Австрия</option> </select> </p> <p> <label for="comment"><span class="formTextRed">*</span> Отзыв:</label> <textarea rows="10" name="comment" id="comment"></textarea> </p> <p> <input type="checkbox" name="confirm" id="confirm" /> <label for="confirm" class="confirm"><span class="formTextRed">*</span> Не возражаю против публикации моего отзыва на сайте в рекламных целях:</label> </p> <p class="submit"> <input type="submit" value="Отправить" /> </p> </form> |
Давайте немного пройдемся по разметке. В форме имеются обязательные поля — возле них мы поставили символ звездочки. Также в форме присутствует выпадающий список с пока что лишь двумя странами, в то время как в оригинальной форме таких стран больше двух сотен. В конце урока мы найдем оригинальное решение, позволяющее создать такой список без плагиата кода буквально за пару минут.
Итак, можем взглянуть на текущий результат. Пока что форма выглядит обыденно и непривлекательно:
Теперь приступим к стилевому оформлению созданной формы. Создадим файл стилей — style.css — и подключим его в блоке тегов HEAD. Пржде всего, возьмем фоновый цвет из оригинала:
|
1 2 3 |
body{ background: #F6F9F9; } |
Теперь избавимся от эффекта прыгающих полей и выравняем их. Для этого зададим меткам (теги label) фиксированную ширину и добавим обтекание:
|
1 2 3 4 |
.form label{ width: 180px; float: left; } |
Также изменим цвет текста:
|
1 2 3 4 5 |
.form label{ width: 180px; float: left; color: #999; } |
Ну и установим фиксированную ширину для всех полей формы (input, textarea):
|
1 2 3 4 5 6 7 |
.form input{ width: 400px; } .form textarea{ width: 400px; } |
Взглянем на промежуточный результат:
Уже приятнее, но до оригинала еще далековато. Добавим правил для текстовой области, которыми установим максимальную/минимальную ее ширину и межстрочный интервал:
|
1 2 3 4 5 6 |
.form textarea{ width: 400px; max-width: 400px; min-width: 400px; line-height: 150%; } |
Теперь займемся чекбоксом внизу формы. Нам необходимо, чтобы текст метки располагался в одну строку и был справа от чекбокса. Для этого отменим обтекание у данной метки и зададим автоматическую ширину полю чекбокса:
|
1 2 3 4 5 6 7 |
.confirm{ float: none !important; } .form input[type="checkbox"]{ width: auto; } |
Отлично, чекбокс готов:
Приступим к самому интересному — добавим привлекательности полям формы. Прежде всего, установим значение внутреннего отступа и стили рамки:
|
1 2 3 4 5 |
.form input, .form textarea, .form select{ padding: 9px; border: 1px solid #E5E5E5; border-radius: 5px; } |
Результат уже вполне неплох. У полей красивые скругленные рамки и текст не прилегает к границам полей:
Теперь добавим тень к полям формы, а также установим градиентный фон для них (фоновую картинку с нужным градиентом можете нарисовать сами либо воспользоваться моей):
|
1 2 3 4 5 6 7 8 9 |
.form input, .form textarea, .form select{ padding: 9px; border: 1px solid #E5E5E5; border-radius: 5px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); background: #FFF url('bg.jpg') left top repeat-x; } |
Вот теперь действительно неплохо:
Но пока что форма выглядит «неживой». Давай исправим это и добавим правила, которые будут применены при наведении на поле формы и при фокусе, также затемним немного границы поля:
|
1 2 3 4 5 6 7 |
.form input:hover, .form textarea:hover, .form select:hover, .form input:focus, .form textarea:focus, .form select:focus{ border-color: #C9C9C9; box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); } |
Отлично! Вот теперь форма выглядит действительно живой. Осталось добавить несколько штрихов к оформлению, чтобы получить законченный результат. Увеличим отступы между полями формы:
|
1 2 3 |
.form p{ margin-bottom: 20px; } |
Немного опустим вниз метки полей:
|
1 2 3 4 5 6 |
.form label{ width: 180px; float: left; color: #999; padding-top: 5px; } |
И, по желанию, несколько правил для кнопки формы:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.form .submit input{ width: auto; background: #617798; color: #FFF; padding: 9px 15px; border: 0; font-size: 14px; cursor: pointer; } .form .submit input:hover{ background: #2B415E; } |
На самом деле кнопка нравилась мне и без новых правил… разве что уменьшить ее ширину… но и с новыми правилами она выглядит достойно. К тому же, на мой взгляд, кнопка все же должна хоть немного отличаться от остальных полей формы.
Осталось выделить звездочки, обозначающие обязательность заполнения полей:
|
1 2 3 |
.formTextRed{ color: red; } |
Вот и все, стилевое оформление готово. Результат получился довольно привлекательный:
И итоговый файл стилей:
|
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 66 67 68 69 |
body{ background: #F6F9F9; } .form p{ margin-bottom: 20px; } .form label{ width: 180px; float: left; color: #999; padding-top: 5px; } .form input{ width: 400px; } .form textarea{ width: 400px; max-width: 400px; min-width: 400px; line-height: 150%; } .confirm{ float: none !important; } .form input[type="checkbox"]{ width: auto; } .form input, .form textarea, .form select{ padding: 9px; border: 1px solid #E5E5E5; border-radius: 5px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); background: #FFF url('bg.jpg') left top repeat-x; } .form input:hover, .form textarea:hover, .form select:hover, .form input:focus, .form textarea:focus, .form select:focus{ border-color: #C9C9C9; box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); } .form .submit input{ width: auto; background: #617798; color: #FFF; padding: 9px 15px; border: 0; font-size: 14px; cursor: pointer; } .form .submit input:hover{ background: #2B415E; } .formTextRed{ color: red; } |
И, напоследок, давайте добавим в выпадающий список страны мира. Пока что мы поместили всего 2 страны. Всего же — более 200 стран. Добавлять каждую отдельную страну в список было бы долго и неэффективно. Гораздо быстрее и проще выводить страны средствами PHP — буквально пару строк кода и динамичный список со множеством стран готов.
Но, чтобы вывести этот список, нужен некий массив стран в таком формате:
|
1 |
$countries = array("Австралия", "Австрия", ...); |
Я такого массива не встречал… хотя не очень то и искал 🙂 Зато я встречал выпадающие списки стран. Кстати, можно было бы скопировать целиком код выпадающего списка себе на страницу… но мне такое решение не нравится абсолютно. Значит нужно взять только страны из готового кода и заполнить массив. Задача ясна и в ее реализации нам помогут регулярные выражения.
Итак, у нас есть код списка стран:
|
1 2 3 4 |
<option value="Австралия">Австралия</option> <option value="Австрия">Австрия</option> ... <option value="Япония">Япония</option> |
Из этого кода нам нужны кавычки и все содержимое между ними. Все остальное нам не нужно. Я воспользуюсь специальной утилитой, которая предоставляет очень удобные возможности для работы с регулярными выражениями. Регулярное выражение будет таким:
|
1 |
[^"]+("[^"]+").* |
И на выходе получаем нужный результат. Все довольно просто и быстро.
Осталось скопировать и поместить полученные страны в массив:
|
1 |
$countries = array("Россия", "Украина", "Австралия", "Австрия", ... "Япония"); |
Теперь просто пройдемся по массиву и выведем страны в список:
|
1 2 3 4 5 6 |
<label for="country">Страна:</label> <select name="country" id="country"> <?php foreach($countries as $country): ?> <option value="<?=$country?>"><?=$country?></option> <?php endforeach; ?> </select> |
Как видим, благодаря регулярным выражениям, вся операция заняла у нас считанные минуты. Кстати, регулярные выражения можно использовать не только на сайте, но и в повседневной работе — тому подтверждением текущий пример. Благодаря регулярным выражениям можно организовывать сложный поиск по файлам, возможности которого предоставляет практически любой редактор (из популярных, к примеру, Notepad++). Поэтому, если тема регулярных выражений Вам интересна, то обязательно пишите нам и мы создадим по ней целый курс.
На этом задачи текущего урока можно считать выполненными. В следующем уроке мы создадим клиентский скрипт, проверяющий заполнение обязательных полей формы.
Удачи Вам и до новых встреч!
Комментарии (10)