Сучасні форми на HTML5 і CSS3

19

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

Сучасні форми на HTML5 і CSS3Сучасні форми на HTML5 і CSS3

Крок 1: Формування уявлення про функціональність

Спочатку нам потрібно скласти концепцію того, як буде виглядати наша форма на HTML5, і як вона буде функціонувати. Для прикладу давайте створимо просту контактну форму, запитуючу у користувача наступну інформацію:

Ім’я

Адреса електронної пошти

Вебсайт

Повідомлення

Нам потрібно переконатися, що користувач вводить інформацію правильно. Щоб цього домогтися, застосуємо нові техніки валідації на стороні клієнта HTML5. А як щодо користувачів, у яких немає можливості використовувати форми HTML5? Можна просто застосувати валідацію з боку сервера, але наша стаття не про це.

Крок 2: Розробка форми

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

Сучасні форми на HTML5 і CSS3

Бачите, нашу форму складають наступні елементи:

Заголовок
Позначення обов’язкових для заповнення полів

Назви полів вводу

Поля введення даних
Текст-заповнювач

Підказки до полів

Кнопка «Надіслати (Submit)

Тепер, коли ви визначили, які елементи складають нашу форму, можна створювати розмітку.

Крок 3: Первинний код HTML

HTML5 Contact Form

Аж до цього моменту HTML-файл у браузері поки порожній. Це – просто початковий код сторінки HTML5.

Крок 4: Форма HTML

Давайте створимо форму HTML (залишимо метод action поки порожнім, так як перевірка даних на стороні сервера в цьому підручнику не розкривається):

Крок 5: Елементи форми HTML

Для отримання організованого і структурованого контенту своєї форми, обернем її елементи (label, input і т. д.) в список. Так що почнемо ми з створення заголовка форми і першого елемента input:

  • Contact Us

    * Denotes Required Field

  • Name:

Сучасні форми на HTML5 і CSS3

Підказки для полів форми

Як видно з макета, ми збираємося зробити форматовані підказки для полів вводу електронного адресу «email» та веб-сайту «website». Тому додамо свої підказки під поля введення, де це потрібно, і призначимо їм клас, щоб можна було визначити їм стилі.

  • Email:
    Proper format email
  • Сучасні форми на HTML5 і CSS3

    Інші елементи input

    Рухаємося далі і створюємо інші елементи форми, не забуваючи про те, що потрібно обернути кожен розділ в елемент списку.

  • Website:
    Proper format «http://someaddress.com»
  • Message:
  • Submit Form
  • Сучасні форми на HTML5 і CSS3

    Крок 6: Додаємо атрибут placeholder

    Одне з перших удосконалень, які пропонує HTML5 для веб-форм (з якими ви, можливо, вже знайомі) – це здатність встановити текст-підказку. Він показується, коли поле введення або порожній, або знаходиться не у фокусі.

    Давайте додамо атрибут placeholder для всіх текстових тегів input. Це допоможе користувачеві зрозуміти, що потрібно ввести в кожне поле.

    Підказка: Призначте placeholder’у стилі

    Ось вам підказка: якщо потрібно визначити стилі тексту-підказці, до ваших послуг є префікси браузерів:

    :-moz-placeholder {
    color: blue;
    }
    ::-webkit-input-placeholder {
    color: blue;
    }

    В сучасних браузерах підтримка атрибуту placeholder налагоджено досить добре (крім IE9, на жаль). Якщо вам реально потрібно підтримувати його у всіх браузерах, можна подивитися вирішення проблеми в javascript.

    Крок 7: Основний CSS

    Щоб створити для форми якусь структуру, давайте додамо трохи основного CSS. Я прокоментую вам правила:

    Видаліть стиль :focus

    Webkit автоматично додає до input-ам стилі, коли ті знаходяться у фокусі. Так як ми будемо додавати власні стилі, стилі за замовчуванням потрібно скасувати:

    *:focus {outline: none;}

    Сучасні форми на HTML5 і CSS3

    Друкарські стилі

    Давайте визначимо елементів своєї форми друкарські стилі:

    body {font: 14px/21px «Lucida Sans», «Lucida Grande», «Lucida Sans Unicode», sans-serif;}
    .contact_form h2, .contact_form label {font-family:Georgia, Times, «Times New Roman’, serif;}
    .form_hint, .required_notification {font-size: 11px;}

    Сучасні форми на HTML5 і CSS3

    Стилі списку

    Давайте призначимо стилі елементів списку, щоб надати формі структуру:

    .contact_form ul {
    width:750px;
    list-style-type:none;
    list-style-position:outside;
    margin:0px;
    padding:0px;
    }
    .contact_form li{
    padding:12px;
    border-bottom:1px solid #eee;
    position:relative;
    }

    Сучасні форми на HTML5 і CSS3

    Крім того, додамо тонку рамку до верхнього і нижнього розділів форми. Виконати це можна, застосувавши селектори :first-child :last-child. Вони вибирають, як мається на увазі в їх назвах, перший та останній елементи списку ul.

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

    .contact_form li:first-child .contact_form li:last-child {
    border-bottom:1px solid #777;
    }

    Сучасні форми на HTML5 і CSS3

    Заголовок форми

    Призначимо стилі розділу заголовка своєї форми. Він включає тег заголовка повідомлення, яке інформує користувачів про те, що зірочка (*) означає поля, обов’язкові для заповнення.

    .contact_form h2 {
    margin:0;
    display: inline;
    }
    .required_notification {
    color:#d45252;
    margin:5px 0 0 0;
    display:inline;
    float:right;
    }

    Сучасні форми на HTML5 і CSS3

    Елементи input

    Давайте призначимо стилі основних елементів форми, тим, які призначені для збору інформації.

    .contact_form label {
    width:150px;
    margin-top: 3px;
    display:inline-block;
    float:left;
    padding:3px;
    }
    .contact_form input {
    height:20px;
    width:220px;
    padding:5px 8px;
    }
    .contact_form textarea {padding:8px; width:300px;}
    .contact_form button {margin-left:156px;}

    Сучасні форми на HTML5 і CSS3

    Тепер додамо кілька додаткових візуальних стилів CSS. Деякі з них видно тільки користувачам сучасних браузерів.

    .contact_form input, .contact_form textarea {
    border:1px solid #aaa;
    box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
    border-radius:2px;
    }
    .contact_form input:focus .contact_form textarea:focus {
    background: #fff;
    border:1px solid #555;
    box-shadow: 0 0 3px #aaa;
    }
    /* Button Style */
    button.submit {
    background-color: #68b12f;
    background: -webkit-gradient(linear, left, top, left bottom, from(#68b12f), to(#50911e));
    background: -webkit-linear-gradient(top, #68b12f, #50911e);
    background: -moz-linear-gradient(top, #68b12f, #50911e);
    background: -ms-linear-gradient(top, #68b12f, #50911e);
    background: -o-linear-gradient(top, #68b12f, #50911e);
    background: linear-gradient(top, #68b12f, #50911e);
    border: 1px solid #509111;
    border-bottom: 1px solid #5b992b;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    box-shadow: inset 0 1px 0 0 #9fd574;
    -webkit-box-shadow: 0 1px 0 0 #9fd574 inset ;
    -moz-box-shadow: 0 1px 0 0 #9fd574 inset;
    -ms-box-shadow: 0 1px 0 0 #9fd574 inset;
    -o-box-shadow: 0 1px 0 0 #9fd574 inset;
    color: white;
    font-weight: bold;
    padding: 6px 20px;
    text-align: center;
    text-shadow: 0 -1px 0 #396715;
    }
    button.submit:hover {
    opacity:.85;
    cursor: pointer;
    }
    button.submit:active {
    border: 1px solid #20911e;
    box-shadow: 0 0 10px 5px #356b0b inset;
    -webkit-box-shadow:0 0 10px 5px #356b0b inset ;
    -moz-box-shadow: 0 0 10px 5px #356b0b inset;
    -ms-box-shadow: 0 0 10px 5px #356b0b inset;
    -o-box-shadow: 0 0 10px 5px #356b0b inset;
    }

    Сучасні форми на HTML5 і CSS3

    Крок 8: Додаємо інтерактивність за допомогою CSS3

    Давайте додамо трохи інтерактивності. Ми змусимо вибраний в даний момент поле збільшуватися шляхом додавання відступу.

    .contact_form input:focus .contact_form textarea:focus { /* add this to the already existing style */
    padding-right:70px;
    }

    Тепер з допомогою CSS3 для браузерів підтримують зробимо збільшення поля гладким переходом.

    .contact_form input, .contact_form textarea { /* add this to the already existing style */
    -moz-transition: padding .25s;
    -webkit-transition: padding .25s;
    -o-transition: padding .25s;
    transition: padding .25s;
    }

    Сучасні форми на HTML5 і CSS3

    Крок 9: Атрибут required в HTML5

    Тепер настав час зайнятися довгоочікуваним: інструментами управління формою HTML5.

    Додавання атрибута required у будь-який елемент області введення тексту скаже браузеру, що перед відправкою форми потрібно ввести значення. Таким чином, форму можна надіслати, якщо потрібне поле залишилося незаповненим.

    Отже, продовжимо і додамо атрибут required у всі елементи своєї форми (тому що нам треба, щоб вони всі були заповнені).

    Крок 10: Стилі обов’язкових для заповнення полів

    Ви, можливо, помітите, що у візуальному плані від додавання атрибута required нічого не змінилося. Ми збираємося призначити стилі обов’язкових для заповнення полів за допомогою CSS. У цьому прикладі кожне поле в якості фонового зображення отримає червону зірочку. Щоб це зробити, нам потрібно спочатку додати padding праворуч input-а, де буде знаходитися фонове зображення (так буде попереджено накладення тексту, якщо запис виявиться довгою рядком):

    .contact_form input, .contact_form textarea {
    padding-right:30px;
    }

    Тепер скористаємося псевдоселектором CSS :required для того, щоб вибрати всі елементи форми з потрібним атрибутом. Я зробив в photoshop’е просту іконку з червоною зірочкою розміром 16×16 пікселів, яка послужить візуальним індикатором поля, обов’язкового до заповнення.

    input:required, textarea:required {
    background: #fff url(images/red_asterisk.png) no-repeat 98% center;
    }

    Сучасні форми на HTML5 і CSS3

    Що відбувається при відправці форми?

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

    Сучасні форми на HTML5 і CSS3

    У quirksmode можна подивитися підтримку поточним браузером атрибута required.

    Підказка:

    Насправді webkit призначити стилі повідомленням в полі-«міхурі» можна з допомогою такого:

    ::-webkit-validation-bubble-message {
    padding: 1em;
    }

    Крок 11: Розуміння нових атрибутів type і валідації на стороні клієнта в HTML5

    Валідація HTML5 працює у відповідності з атрибутом type, встановленому в полях форми. Роками HTML підтримував лише жменьку атрибутів type, таких, як type=»text», але у HTML5 є більше дюжини нових типів введення даних, включаючи електронну пошту і url, які ми і збираємося використовувати в своїй формі.

    Поєднуючи атрибути введення type з новим атрибутом required, тепер браузер здатний робити валідацію даних користувача на клієнтській стороні. Якщо браузер користувача не підтримуємо нові атрибути type, такі як type=»email», він просто за замовчуванням повернеться до type=»text». Дійсно, це досить забавно. По суті, у вас є зворотна сумісність з усіма браузерами в світі, ура!

    Так що відбувається, якщо браузер насправді підтримує нові атрибути type? Для браузерів десктопів візуально немає ніякої різниці (крім певної одними правилами CSS). Поле type=»text» виглядає точно так, як поле type=»email». Однак для браузерів мобільних пристроїв відносно інтерфейсу різниця є.

    Приклад: iPhone

    iPhone від Apple’а розпізнає типи форми і динамічно змінює екранну клавіатуру, надаючи необхідні по контексту символи. Наприклад, усі електронні адреси вимагають наступних символів: «@» і «.» І iPhone надає ці символи, коли у input-a задано відповідний тип.

    Сучасні форми на HTML5 і CSS3

    Крок 12: Зміна атрибутів type

    Поля нашої форми вже встановлені за промовчанням type=»text». Але тепер потрібно змінити атрибут типу в полях, призначених для електронної пошти та веб-сайту на відповідний тип HTML5.

    Крок 13: Валідація HTML5

    Як вже говорилося, валідація HTML5 заснована на атрибутах type і включена за замовчуванням. Для активації валідації форми ніякої особливої розмітки не потрібно. Якщо хочете її вимкнути, можете використати атрибут novalidate, як тут:

    Поле імені

    Погляньте на перше поле, яке запитує у користувача його ім’я. Як вже описувалося раніше, ми додали атрибут type=»text» і атрибут required. Вони інформують веб-браузер про те, що це обов’язкове поле і той повинен робити його валідацію як простого тексту. Так що, якщо користувач введе в нього щонайменше один символ, воно буде достовірним.

    Тепер ми створимо свій власний CSS для призначення стилів полями введення, вважаються браузером достовірними і недостовірними. Якщо пам’ятаєте, ми використовували :required у своєму CSS для визначення стилів всіх елементів вводу з обов’язковим атрибутом. Тепер нам можна призначити стилі обов’язковим до заповнення полів, достовірним чи ні, додавши в правила CSS :valid або :invalid.

    По-перше, давайте призначимо стилі недостовірним полів. У цьому прикладі нам потрібно визначити стилі форми як невалідні, коли та перебуває у фокусі. Ми додамо червону окантовку, червону тінь і створену в photoshop’е червону іконку для позначення невалидного поля.

    .contact_form input:focus:invalid, .contact_form textarea:focus:invalid { /* when a field is considered invalid by the browser */
    background: #fff url(images/invalid.png) no-repeat 98% center;
    box-shadow: 0 0 5px #d45252;
    border-color: #b03535
    }

    Сучасні форми на HTML5 і CSS3

    Тепер створимо правила, які окреслять достовірне полі. Додамо зелену облямівку, зелену тінь і зелену іконку з «галочкою», створену в photoshop е. Вони будуть застосовані до всіх валідним полів, незалежно від того, знаходяться ті у фокусі чи ні.

    .contact_form input:required:valid, .contact_form textarea:required:valid { /* when a field is considered valid by the browser */
    background: #fff url(images/valid.png) no-repeat 98% center;
    box-shadow: 0 0 5px #5cd053;
    border-color: #28921f;
    }

    Сучасні форми на HTML5 і CSS3

    Зараз, коли ми активізуємо поле форми, видно стилі в червоному кольорі, що означають невалидность. Як тільки в поле вводиться хоча б один символ, воно стає валідним, і відображають цей факт з’являються зелені стилі CSS.

    Поля електронної адреси і ДО а

    CSS-стилі і правила валідації вже застосовані до поля адреси електронної пошти, так як раніше ми вже встановили атрибути type і required.

    Крок 14: Представляємо атрибут HTML5 pattern

    Якщо для прикладу використовувати атрибут type=»email», то схоже, що більшість браузерів роблять валідацію цього поля як *@* (будь-який символ + символ «@» + будь-який символ). Це, звичайно, не дуже обмежує, однак запобігає введення користувачем прогалин або зовсім неправильних значень.

    У прикладі атрибута type=»url», схоже, що мінімальні вимоги більшості браузерів – це символ, за яким слідує двокрапка. Тому, якщо ви ввели «h:», те поле вважається валідним. Це не дуже-то допомагає, але дійсно запобігає введення користувачами невідповідної інформації, такої як їх електронний або домашня адреса. Тепер ви вже могли б дозволити більш точну валідацію щодо значень введення на стороні сервера; однак, ми збираємося поговорити про те, як це зробити в HTML5.

    Атрибут pattern

    Атрибут pattern бере регулярний вираз javascript’а. Це вираз, а не вираз браузера за замовчуванням, застосовується для валідації значення поля. Так що тепер наш HTML виглядає так:

    Тепер наше поле буде приймати тільки значення, що починаються з «http://» або «https://» і один додатковий символ. Ці регулярні шаблони виразу спочатку можуть збивати з пантелику, але як тільки ви витратите час на їх вивчення, форми ваші будуть відкриті цілого нового світу.

    Крок 15: Підказки до полям форми (CSS)

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

    .form_hint {
    background: #d45252;
    border-radius: 3px 3px 3px 3px;
    color: white;
    margin-left:8px;
    padding: 1px 6px;
    z-index: 999; /* hints stay above all other elements */
    position: absolute; /* allows proper formatting if hint is two lines */
    display: none;
    }

    Ми встановлюємо display:none, тому що нам потрібно показувати підказки тільки тоді, коли користувач фокусується на полі введення. Ми також за замовчуванням встановлюємо спливаючі підказки на червоний колір недостовірності, так як вони завжди вважаються невалидными, поки в них не буде введена правильна інформація.

    Застосування селектора ::before

    Тепер нам потрібно додати до блоків підказок маленький трикутник, який допоможе спрямовувати погляд і керувати ним. Це можна робити з використанням зображень, але в даному випадку ми зробимо все за допомогою одного лише CSS.

    Так як це – суто презентаційний елемент, який не є життєво важливим для функціональності сторінки, то додамо маленький трикутник, що вказує вліво, за допомогою псевдоселектора ::before. Це можна зробити за допомогою однієї з геометричних фігур unicode’а.

    Сучасні форми на HTML5 і CSS3

    Зазвичай ми б застосували формат HTML Unicode, щоб відобразити їх у своєму HTML (як на зображенні вгорі). Однак через використання селектора CSS ::before нам доведеться взяти відповідний трикутника escaped unicode із застосуванням правила content:»». Потім просто застосуємо позиціонування, щоб помістити його в потрібне місце.

    .form_hint::before {
    content: «\25C0»; /* трикутник, вказуючий вліво, в escaped unicode */
    color:#d45252;
    position: absolute;
    top:1px;
    left:-6px;
    }

    Застосування суміжного селектора +

    Нарешті, ми використовуємо суміжний селектор CSS для показу і приховування підказок до наших полях форми. Суміжний селектор (x + y) вибирає елемент, якому безпосередньо передує попередній елемент. Так як підказки для полів йдуть в нашому HTML відразу після полів введення, можна застосовувати цей селектор для показу/приховування спливаючих підказок.

    .contact_form input:focus + .form_hint {display: inline;}
    .contact_form input:required:valid + .form_hint {background: #28921f;} /* change form hint color valid when */
    .contact_form input:required:valid + .form_hint::before {color:#28921f;} /* change form hint arrow color valid when */

    Як видно з CSS, ми також встановили підказки до формі, щоб ті змінювали колір поряд з рамкою введення, коли поле валидно або невалидно.

    Крок 16: Відкиньтеся в кріслі і милуйтеся своєю чудовою формою HTML5

    Давайте, нарешті, розгляньте свій отриманий продукт!

    Сучасні форми на HTML5 і CSS3

    Укладення підручника «Створення та валідація форми на HTML5»

    Як ви бачите, нові властивості форм HTML5 дуже акуратні! Все назад сумісний, так що їх введення в ваш вебсайт нічого не порушить.

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