Html 5 інтерактивні елементи

Відео: HTML5 №2 Моделі контенту

HTML 5 Інтерактивні елементи

В HTML 5 з`явилися кілька різних інтерактивних елементів, які дозволяють змінювати сторінку без її перезавантаження, що дуже корисно для створення динамічних сайтів.

Ось список інтерактивних елементів з`явилися в HTML 5:

1) menu.

2) command.




3) datagrid.

4) details.

елемент menu в HTML 5 є досить цікавим, в тому плані, що він був ще в більш старих версіях мови HTML, але потім був визнаний застарілим, і ось в HTML 5 він несподівано повернувся знову.




елемент menu містить елементи command (Подібно до списку і його елементів), кожний з яких здатний запускати певну дію.

Відео: Edge Animate уроки: створення html5 банера. запис вебінару






onclick="alert(`Перша команда`)"label="Перша команда"/ Gt;
onclick="alert(`Друга команда`)"label="Друга команда"/ Gt;


Відповідно, атрибут label відповідає за заголовок команди, а атрибут onclick обробляє подія "клік миші". Тут при натисненні, наприклад, по мітці"перша команда"Вискочить вікно, в якому буде написано:"перша команда". Завдяки елементам menu і command можна легко робити різні панелі інструментів, цікаву навігацію по сайту тощо.

елемент datagrid являє собою таблицю даних, але, на відміну від звичайних таблиць, елемент datagrid може легко оброблятися користувачами, наприклад, вони зможуть додавати і видаляти рядки і стовпці, сортувати їх або згортати. Ось приклад використання елемента datagrid:








ім`я
Прізвище
Зарплата


Василь
Васильєв
15000


Іван
Іванов
20000




Також замість таблиці дочірнім елементом datagrid може бути, наприклад, елемент select. Головний сенс цього елемента, що створюється масив з даними з дочірніх елементів, і це може бути або таблиця, або навіть звичайний список.

елемент details використовується для вказівки інформації, яка не є обов`язковою до показу. Різні браузери по-різному будуть обробляти даний елемент. Наприклад, який-небудь браузер зробить просто виноску, а інший браузер зробить підказку. Приклад використання елементу details нижче:






Основне оповідання
Деталі ...


От і все нововведення в HTML 5 щодо інтерактивних елементів.

Поділися в соціальних мережах:

Схожі
Html 5 структурні елементиHtml 5 структурні елементи
Використання тега optgroup в htmlВикористання тега optgroup в html
Html 5 матеріалів мультимедіаHtml 5 матеріалів мультимедіа
Команда attribКоманда attrib
Стандартна модель подій в мові jаvascript.Стандартна модель подій в мові jаvascript.
Атрибут data- * в html5.Атрибут data- * в html5.
Html 5 що нового?Html 5 що нового?
Html 5 матеріалів рівня блокуHtml 5 матеріалів рівня блоку
Завантажити підручник по html 5Завантажити підручник по html 5
Html 5 матеріалів рівня текстуHtml 5 матеріалів рівня тексту
» » Html 5 інтерактивні елементи