Створення привабливої форми. Частина 1

14

Від автора: тема веб-форм, на мій погляд, досить актуальна. Практично на будь-якому сайті можна знайти форму. Навіть на одностраничниках найчастіше є форма зворотного зв’язку. Що вже говорити про великих сайтах, на них форми представлені у всьому їх різноманітті — це і контактні форми, форми відгуків, форми авторизації, різноманітні опитування та голосування і т. д.

У даному уроці ми з Вами крок за кроком створимо привабливу форму для відгуків. Отже, приступимо…

Створення привабливої форми. Частина 1Створення привабливої форми. Частина 1

Форми відгуків, як правило, мають досить велику кількість полів. Користувачам просто лінь заповнювати такі великі форми. І ось тут необхідно якось стимулювати користувачів заповнити таку форму. У якості стимулу може виступати оригінальність форми або її красива подача.

Зовсім недавно мені довелося створити одну таку форму для нашого сайту. Знайти її можна на сторінці Відгуків. На мій недосвідчений погляд форма вийшла досить привабливою і, головне, живої, що реагує на дії користувача:

Створення привабливої форми. Частина 1

У цьому уроці ми спробуємо крок кроком створити схожу форму тільки з трохи меншою кількістю полів.

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

* Прізвище:

* Ім’я:

По батькові:

* Email:

Альтернативні Email:

Країна:
Австралія
Австрія

* Відгук:

* Не заперечую проти публікації мого відкликання на сайті в рекламних цілях:

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

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

Створення привабливої форми. Частина 1

Тепер приступимо до стильового оформлення створеної форми. Створимо файл стилів — 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;
}

Поглянемо на проміжний результат:

Створення привабливої форми. Частина 1

Вже приємніше, але до оригіналу ще далеченько. Додамо правил для текстової області, якими встановимо максимальне/мінімальне її ширину і інтервал між рядками:

.form textarea{
width: 400px;
max-width: 400px;
min-width: 400px;
line-height: 150%;
}

Тепер займемося чекбоксів внизу форми. Нам необхідно, щоб текст мітки розташовувався в один рядок і був праворуч від чекбокса. Для цього скасуємо обтікання у даної мітки і задамо автоматичну ширину поля чекбокса:

.confirm{
float: none !important;
}
.form input[type=»checkbox»]{
width: auto;
}

Відмінно, чекбокс готовий:

Створення привабливої форми. Частина 1

Приступимо до найцікавішого — додамо привабливості полям форми. Насамперед, встановимо значення внутрішнього відступу і стилі рамки:

.form input, .form textarea, .form-select{
padding: 9px;
border: 1px solid #E5E5E5;
border-radius: 5px;
}

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

Створення привабливої форми. Частина 1

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

.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

Але поки що форма виглядає «неживий». Давай виправимо це і додамо правила, які будуть застосовані при наведенні на поле форми і при фокусі, також затемним трохи межі поля:

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

Ось і все, стильове оформлення готово. Результат вийшов досить привабливий:

Створення привабливої форми. Частина 1

І підсумковий файл стилів:

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(«Австралія», «Австрія», …);

Я такого масиву не зустрічав… хоча не дуже то і шукав Створення привабливої форми. Частина 1 Зате я зустрічав випадаючі списки країн. До речі, можна було б скопіювати цілком код випадаючого списку собі на сторінку… але мені таке рішення не подобається абсолютно. Значить потрібно взяти тільки країни з готового коду і заповнити масив. Завдання ясна і в її реалізації нам допоможуть регулярні вирази.

Отже, у нас є код списку країн:

Австралія
Австрія

Японія

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

[^»]+(«[^»]+»).*

І на виході отримуємо потрібний результат. Все досить просто і швидко.

Створення привабливої форми. Частина 1

Залишилося скопіювати і помістити отримані країни в масив:

$countries = array(«Росія», «Україна», «Австралія», «Австрія», … «Японія»);

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

Країна:

Як бачимо, завдяки регулярним виразам, вся операція зайняла у нас лічені хвилини. До речі, регулярні вирази можна використовувати не тільки на сайті, але і в повсякденній роботі — тому підтвердженням поточний приклад. Завдяки регулярним виразам можна організовувати складний пошук файлів, можливості якого надає практично будь-редактор (з популярних, наприклад, Notepad++). Тому, якщо тема регулярних виразів Вам цікава, то обов’язково пишіть нам і ми створимо за нею цілий курс.

На цьому завдання поточного уроку можна вважати виконаними. У наступному уроці ми створимо спеціальний скрипт, який перевіряє заповнення обов’язкових полів форми.

Удачі Вам і до нових зустрічей!