Создание привлекательной формы. Часть 1

Создание привлекательной формы

От автора: тема веб-форм, на мой взгляд, довольно актуальна. Практически на любом сайте сейчас можно найти форму. Даже на одностраничниках зачастую имеется форма обратной связи. Что уж говорить о больших сайтах, на них формы представлены во всем их многообразии — это и контактные формы, формы отзывов, формы авторизации, всевозможные опросы и голосования и т.д.

В данном уроке мы с Вами шаг за шагом создадим привлекательную форму для отзывов. Итак, приступим…

План урока:

    1. Введение.

    2. Разметка.

    3. Стилевое оформление формы.

    4. Массив стран за пару минут с помощью регулярного выражения.

Детали учебника

Тема: CSS, PHP

Сложность: Средняя

Урок: Видео версия (.mp4)

Время: 00:56:32

Размер архива: 113 Mb

автор

Автор: Андрей Кудлай

Зовут меня Андрей Кудлай. Родом я из Украины, живу в Днепропетровске. Веб-программированию учился сам. Неплохо знаю HTML, CSS, PHP. Немного разбираюсь в JavaScript’e — в свободное время как раз занимаюсь его изучением.

скачать исходникискачать урок

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

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

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

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

<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. Пржде всего, возьмем фоновый цвет из оригинала:

body{
	background: #F6F9F9;
}

Теперь избавимся от эффекта прыгающих полей и выравняем их. Для этого зададим меткам (теги label) фиксированную ширину и добавим обтекание:

.form label{
	width: 180px;
	float: left;
}

Также изменим цвет текста:

.form label{
	width: 180px;
	float: left;
	color: #999;
}

Ну и установим фиксированную ширину для всех полей формы (input, textarea):

.form input{
	width: 400px;
}

.form textarea{
	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;
}

Результат уже вполне неплох. У полей красивые скругленные рамки и текст не прилегает к границам полей:

Теперь добавим тень к полям формы, а также установим градиентный фон для них (фоновую картинку с нужным градиентом можете нарисовать сами либо воспользоваться моей):

.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 p{
	margin-bottom: 20px;
}

Немного опустим вниз метки полей:

.form label{
	width: 180px;
	float: left;
	color: #999;
	padding-top: 5px;
}

И, по желанию, несколько правил для кнопки формы:

.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;
}

Вот и все, стилевое оформление готово. Результат получился довольно привлекательный:

И итоговый файл стилей:

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 — буквально пару строк кода и динамичный список со множеством стран готов.

Но, чтобы вывести этот список, нужен некий массив стран в таком формате:

$countries = array("Австралия", "Австрия", ...);

Я такого массива не встречал… хотя не очень то и искал :) Зато я встречал выпадающие списки стран. Кстати, можно было бы скопировать целиком код выпадающего списка себе на страницу… но мне такое решение не нравится абсолютно. Значит нужно взять только страны из готового кода и заполнить массив. Задача ясна и в ее реализации нам помогут регулярные выражения.

Итак, у нас есть код списка стран:

<option value="Австралия">Австралия</option>
<option value="Австрия">Австрия</option>
...
<option value="Япония">Япония</option>

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

[^"]+("[^"]+").*

И на выходе получаем нужный результат. Все довольно просто и быстро.

Осталось скопировать и поместить полученные страны в массив:

$countries = array("Россия", "Украина", "Австралия", "Австрия", ... "Япония");

Теперь просто пройдемся по массиву и выведем страны в список:

<label for="country">Страна:</label>
<select name="country" id="country">
	<?php foreach($countries as $country): ?>
	<option value="<?=$country?>"><?=$country?></option>
	<?php endforeach; ?>
</select>

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

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

Удачи Вам и до новых встреч!

Проверка формы без перезагрузки с помощью JavaScript

Прямо сейчас посмотрите курс по организации динамической работы с формами!

Смотреть курс

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (10)

  1. Семён

    Уважаемый! Андрей Кудлай.

    Впервую очередь я хотел бы поблагадарить Вас
    за Гигантскую работу по созданию видео-уроков
    по Веб-программированию.
    Во вторых:
    Я делаю Блог по Вашему Видео-урокам «Супер-блог»,на первых 5 уроков не было проблем вообще, а 6 уроке «Добавление комментарий» с
    кодом большая проблема для меня;

    $name = trim(mysql_real_escape_string(mb_substr($_POST['name'],0,20,’UTF-8′)));
    $comment = trim(mysql_real_escape_string(mb_substr($_POST['comment'],0,1000,’UTF-8′)));

    Выдаёт всегда ощибку; Fatal error: Call to undefined function mb_substr()
    что я не так делаю, подскажите пожалуйста,
    может ещё есть варианты.

    С уважением Семен.

    • Андрей Кудлай

      Семен, спасибо за благодарность :)
      По поводу ошибки… судя по всему, на хостинге попросту не установлена библиотека для работы с мультибайтовыми функциями, потому то интерпретатор и не знает такую функцию. Попросите хостера установить соответствующую библиотеку либо, как один из вариантов, используйте функцию substr() с указанием удвоенного количества символов.
      Семен, в дальнейшем лучше такие вопросы задавать на нашем форуме ;)

  2. Татьяна

    как сделать с фото форму? чтобы ее отсылать на почту?

  3. Семён

    Извините! Андрей я буду иметь ввиду!!!
    Если можно поясните пожалуйста «с указанием удвоенного количества символов».
    Я пока на Денвере работаю, до Хостинга ещё не дошёл.

    Спасобо!

    • Андрей Кудлай

      Удвоенное — это значит, что если Вы хотите обрезать строку в кодировке UTF-8 до 20 символов, то используя функцию substr() указываете, вместо 20, 40 символов. В итоге обрезанная строка получится длиной 20 символов. Есть, правда, нюанс… это касается только кириллицы… если же строка будет латинницей, то строка окажется длиной в 40 символов.
      Также можно попробовать воспользоваться альтернативной функцией iconv_substr().
      Вообще странно, что на Денвере не работают мультибайтные функции. Можно попробовать исправить этот момент, но это уже, как и второй вариант, если хотите, решим на форуме.

  4. Евгенний

    Форма без каптчи — не форма, а дырка. Спасибо конечно за урок но…

    • Андрей Кудлай

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

  5. Марат

    Так и не понял как выводить страны(

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree