Головні новини
Ви тут: Головна / css / Покращення форм в html 5

Покращення форм в html 5



Очевидні проблеми із старими формами

У HTML4-форм є відомі проблеми:

  • Для установки фокусу на першому елементі форми треба писати шматок js’а.
  • Щоб забити дефолтне значення в елементі, необхідно написати фрагмент js-коду.
  • Для вибору кольору або календаря треба тягти якусь відому компоненту, або щось писати самому.
  • Навіть установка обов’язкових полів валідації вимагають JavaScript-механізмів.

Ці та багато інших, завдань вирішують розширення в HTML 5. Погано, що ще далеко не всі браузери підтримують html 5. Тим не менш, різні покращення можна застосовувати без проблем.

Установка фокуса в елементах форми при завантаженні сторінки

Раніше для автоматичного фокусування на елементі форми (напр., логіні у формі авторизації) доводилося писати якось так:

<input name="login" id="form-login">
<script type="text/javascript">
    document.getElementById('form-login').focus();
</script>

Тепер все простіше і зрозуміліше:

<input id="form-login" type="text" autofocus="" name="login" />

Автофокус: (Демонстрація автофокусу, перейти вгору сторінки )

Значення-підказки (placeholder)

У деяких випадках (напр., у полі пошукової форми) хочеться вказати значення, яке має зникати при фокусуванні на даному полі. Раніше робили так:

<input id="form-query" type="text" name="query" value="пошук по сайту" onfocus="this.value =''" onblur="this.value ='пошук по сайту'" />

Тепер вже можна робити інакше, через атрибут placeholder. Ще й значення за замовчуванням не буде передаватися на сервер, це бонус.

<input name="query" id="form-query" value="" placeholder="пошук по сайту">

Placeholder: 

Колір і календар

Колись для вибору кольору (компонент color picker) і календаря застосовувалися якісь в міру громіздкі бібліотеки. Приклади наводити не буду, їх легко нагуглити. Тепер же все зручніше і компактніше:

<input name="color" id="form-color" value="#FFFFFF" type="color"> 
<input name = "date" id = "form-date" value = "2011-01-01" type = "date">

Вибір кольору: 

Календар: 

Валідація

Про валідацію в HTML5 можна сказати те, що з’явилися додаткові штуки для спрощення цього процесу на клієнті. І якщо навіть у браузері вони не підтримали, у вас завжди ж є ще й надійна серверна валідація, правда?

Як зараз можна валідувати:

<input name="email" id="form-email" value="" type="email">
<input name="tel" id="form-tel" value="" type="tel" pattern="\d{10}">
<input id="postcode" name="postcode" type="number" min="000000" max="999999" value="123456" maxlength="6">

Email:
Телефон: 
Поштовий індекс: 



Автор Володимир Гривінський



Залишити коментар

Ваша електронна адреса не буде опублікована.

Вгору
UA TOP Bloggers