Нові елементи HTML5, здатні підняти ваш вебсайт на новий рівень

26

Від автора: HTML5 – сама нова версія мови HTML, і загальновизнано найцікавіша. У цій статті я вибрав нові елементи HTML5, здатні підняти ваш вебсайт на новий рівень.

Поля введення До а і електронної пошти

HTML5 представив нові типи введення даних, серед яких url та електронна пошта email. Вони дають нам можливість писати більш семантично правильний код і полегшити заповнення форми на мобільних пристроях шляхом відображення спеціальних кнопок (на кшталт кнопок @ або .com) в залежності від типу введення даних.

Ось атрибут url в дії:

А також атрибут email. Також, будь ласка, зверніть увагу на атрибут pattern, про який я буду писати нижче.

Шаблони regexp для валідації форм

До появи HTML5 при використанні в своєму вебсайті форми вам доводилося застосовувати JavaScript для створення системної валідації. Тепер з допомогою HTML5 і атрибуту pattern можна призначити для валідації даних шаблон регулярного виразу.

Для валідації адрес електронної пошти використовується наступний фрагмент коду:

Цей – для надійних паролів:

А цей – для валідації телефонних номерів:

Контекстні меню в HTML5

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

На час написання цієї статті елемент contextmenu сумісний тільки з Firefox, тому будемо сподіватися, що інші браузери незабаром теж стануть його застосовувати.

Yes, this section right here

Джерело/Демоверсія: http://speckyboy.com/2013/02/13/quick-tip-the-html5

Відео HTML5 з альтернативою Flash’у

Одна з грандіозних нових можливостей HTML5, безумовно, його здатність програвати відео-файли без потреби у застосуванні flash’а. Хоча, так як більш старі браузери несумісні з відео HTML5, вам потрібно забезпечити альтернативу Flash». На цьому прикладі видно, як вставити в HTML5 відео mp4 і ogv, застосувавши альтернативу Flash’у для більш старих браузерів.

Нові елементи HTML5, здатні підняти ваш вебсайт на новий рівень

Автозаповнення в HTML5 з допомогою списку даних

За допомогою елемента datalist HTML5 дає можливість створювати список даних для автозаповнення поля вводу. Дуже зручно!

Джерело/Демоверсія: http://davidwalsh.name/datalist

Приховані елементи і використання HTML5

HTML5 є атрибут hidden, що дозволяє приховати окремий елемент, як ви це зробили б у CSS за допомогою display:none.

Елемент з автофокусом

Атрибут autofocus дозволяє створити фокус на окремому елементі. Корисно для пошукових систем, таких як домашня сторінка google.com.

Попередня вибірка в HTML5

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

Наведений нижче приклад показує попередню вибірку зображення:

Програвання аудіофайлів з допомогою HTML5

HTML5 може програвати відео, як ми вже переконалися і, звичайно, так само може програвати аудіофайли, такі як популярний формат mp3. В якості прикладу тут наведено мінімалістичний, але функціонуючий аудіоплеєр.

Play
Pause
Volume Up
Volume Down

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