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

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

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

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

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

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

Теперь приступим к стилевому оформлению созданной формы. Создадим файл стилей — style.css — и подключим его в блоке тегов HEAD. Пржде всего, возьмем фоновый цвет из оригинала:

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

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

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

Взглянем на промежуточный результат:

Уже приятнее, но до оригинала еще далековато. Добавим правил для текстовой области, которыми установим максимальную/минимальную ее ширину и межстрочный интервал:

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

Отлично, чекбокс готов:

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Вот теперь действительно неплохо:

Но пока что форма выглядит «неживой». Давай исправим это и добавим правила, которые будут применены при наведении на поле формы и при фокусе, также затемним немного границы поля:

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

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

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

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

Осталось выделить звездочки, обозначающие обязательность заполнения полей:

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

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

И, напоследок, давайте добавим в выпадающий список страны мира. Пока что мы поместили всего 2 страны. Всего же — более 200 стран. Добавлять каждую отдельную страну в список было бы долго и неэффективно. Гораздо быстрее и проще выводить страны средствами PHP — буквально пару строк кода и динамичный список со множеством стран готов.

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

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

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

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

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

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

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Проверка формы без перезагрузки с помощью 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 class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree