Онлайновий довідник HTML

Логін Забули пароль?
Пароль Реєстрація
Гарячий пошук: PHP CSS SEO
Головна » Головна » Практика »

Нові можливості форм в HTML 5

Незважаючи на те, що HTML 5 вже досить давно використовується, багато хто ще не встиг ознайомитись з новими можливостями. Сьогодні я хочу розповісти починаючим ввебмайстрам про деякі речі HTML 5 при роботі з формами, які зроблять ваш сайт більш дружнім, семантичності і швидким.

1. Атрибут placeholder.

Подивіться на малюнок нижче, і згадайте як ми робили це раніше.



Текст, який повинен бути всередині поля, ставилося за допомогою атрибуту value. Але якщо для поля вказувався тип password, то всі символи, введені в поле, замінюються маркерами, а вебмайстрам доводилося використовувати додаткові скрипти. На сайті навіть ціла стаття була опублікована на цю тему.
А використовуючи HTML 5, досить лише вказати новий атрибут placeholder:
<input type="password" name="password" placeholder="Enter password"/>

2. Type=”email”.

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

iphone-type-email

Оскільки у користувачів iPhone невеликі екрани і маленька клавіатура, для символу @ або крапки вони повинні зайвий раз перемикати тип символів, що вводяться. Але тільки не в тому випадку якщо ви вкажете input type="email".

3.Type=”time”.

А також date, datetime, datetime-local, month і week - тобто все що має відношення до дати і часу. Скріншоти для кожного наводити не буду, лише скажу що розумний айфон і тут автоматично перемкне клавіатуру. А для комп'ютерів з'явиться зручне поле з вибором дати, дивіться самі:


Це зроблено за допомогою лише одного рядка:
<input type="datetime" name="datetime"/>

4.Type=”number”.

Гадаю, вам знайомі різні вибірки в інтернет магазинах або на дошках оголошень, коли потрібно підібрати товар або об'єкт за певними параметрах "від" і "до", наприклад за ціною. Як це робилося раніше? Десятки і навіть сотні рядків коду, потім налагодження "щоб у всіх браузерах працювало" ... Забудьте цей страшний кошмар.


Як і в попередньому прикладі, тут досить лише одного рядка:
<input type="number" name="number" value="00" min="1" max="10" step="1"/>

5. Псевдокласи valid та invalid.

Подивіться скріншот форми для коментування, зверніть увагу на неправильно заповнене поле email.

valid-invalid

Раніше для того щоб підказати користувачу, що поле заповнено некоректно, використовували величезні скрипти. З HTML 5 все набагато простіше - для різних типів полів ми можемо використовувати псевдокласи valid та invalid. Форма з прикладу змінює свій колір за допомогою лише двох рядків:
#commentform #email:invalid {background: #fdd;}
#commentform #email:valid {background: #dfd;}

Вказувати ці псевдокласи можна для будь-якого типу форм, передбачених в HTML 5.

А наостанок про сумне. Сумним у нас буде не тільки internet explorer, але й Firefox для деяких типів полів. Але якщо за розробників останнього можна не переживати - швидше за все він навчиться новим типам, то з Мікрософт до 9-ої версії включно ситуація не така райдужна. Тому гадаю, що кожен вебмайстер повинен вирішити, які технології використовувати - застарілі або перспективні.

Дана стаття доступна також на інших мовах:
English: New features of HTML5 form
Русский: Новые возможности формы в HTML 5

Якщо ви вважаєте цю статтю корисною, будь ласка, натисніть на одну з кнопок нижче - від vkontakte, facebook, tweeter, або google+, щоб про неї дізналися інші люди. Дякую!

Категорія: Практика
Опубліковано: 30.03.2013, Оновлено: : 4.11.2015 - 19:09 переглядів: 1243
 (Votes: 1)

Коментарі дозволені лише зареєстрованим користувачам.
Ми не байдужі

Валідація

Правильний CSS!

Valid XHTML 1.0 Transitional

Статистика

Сторінку згенеровано за 0.13 секунди, SQL-запитів: 8.

Copyright

© 2008-2012 webamator.org.ua & webamator.ru

Перепублікація матеріалів дозволяється за умови активного гіперпосилання на webamator.org.ua