В HTML 5 появились несколько различных интерактивных элементов, которые позволяют изменять страницу без её перезагрузки, что очень полезно для создания динамических сайтов .
В HTML 5 появились несколько различных интерактивных элементов, которые позволяют изменять страницу без её перезагрузки, что очень полезно для создания динамических сайтов.
Вот список интерактивных элементов появившихся в HTML 5:
1) menu.
2) command.
3) datagrid.
4) details.
Элемент menu в HTML 5 является достаточно любопытным, в том плане, что он был ещё в более старых версиях языка HTML, но потом был признан устаревшим, и вот в HTML 5 он неожиданно вернулся вновь.
Элемент menu содержит элементы command (подобно списку и его элементам), каждый из которых способен запускать определённое действие.
<html>
<head>
</head>
<body>
<menu>
<command label="Первая команда"/>
<command label="Вторая команда"/>
</menu>
</body>
</html>Соответственно, атрибут label отвечает за заголовок команды, а атрибут onclick обрабатывает событие "Щелчок мыши". Здесь при нажатии, например, по метке "Первая команда" выскочит окно, в котором будет написано: "Первая команда". Благодаря элементам menu и command можно легко делать различные панели инструментов, интересную навигацию по сайту и тому подобное.
Элемент datagrid представляет собой таблицу данных, но, в отличии от обычных таблиц, элемент datagrid может легко обрабатываться пользователями, например, они смогут добавлять и удалять строки и столбцы, сортировать их или сворачивать. Вот пример использования элемента datagrid:
<html>
<head>
</head>
<body>
<datagrid>
<table>
<tr>
<td>Имя</td>
<td>Фамилия</td>
<td>Зарплата</td>
</tr>
<tr>
<td>Василий</td>
<td>Васильев</td>
<td>15000</td>
</tr>
<tr>
<td>Иван</td>
<td>Иванов</td>
<td>20000</td>
</tr>
</table>
</datagrid>
</body>
</html>Также вместо таблицы дочерним элементом datagrid может быть, например, элемент select. Главный смысл этого элемента, что создаётся массив с данными из дочерних элементов, и это может быть либо таблица, либо даже обычный список.
Элемент details используется для указания информации, которая не является обязательной к показу. Различные браузеры по-разному будут обрабатывать данный элемент. Например, какой-нибудь браузер сделает просто сноску, а другой браузер сделает всплывающую подсказку. Пример использования элемента details ниже:
<html>
<head>
</head>
<body>
<p>
Основное повествование <details>Детали...</details>
</p>
</body>
</html>Вот и все нововведения в HTML 5 относительно интерактивных элементов.
