Все интерактивные элементы html

Содержание

Использование CSS для форматирования интерактивных элементов управления в мобильных разработках
Интерактивные элементы HTML
Формы в мобильных приложениях
HTML 5 Интерактивные элементы
Комментарии ( 8 ):

Использование CSS для форматирования интерактивных элементов управления в мобильных разработках

Аннотация: Интерактивные элементы HTML. Формы в мобильных приложениях. Надписи. Новые типы ввода данных в HTML5. Использование CSS для форматирования списков. Навигационные списки. Использование рисунков для навигации. Списки select. Форматирование переключателей, флажков и кнопок.

Интерактивные элементы HTML

Одной из наиболее важных функций мобильных приложений является их способность взаимодействовать с человеком. В HTML для этого существуют теги отображения на странице интерактивных элементов управления — списков, кнопок, текстовых полей и других активизируемых пользователем элементов управления. С их помощью пользователь может предоставлять мобильному приложению тот или иной вид информации. Эта информация может обрабатываться двумя способами — непосредственно на мобильном устройстве посредством сценариев JavaScript, код которых включается в разметку страницы, или путем отправки данных на веб- сервер для их дальнейшей обработки серверным сценарием. Во всех случаях для этих целей используются интерактивные элементы управления HTML . Краткое их обозрение приведено в Табл. 9.1:

Таблица 9.1.

Элемент управления	HTML-элемент	Описание
Однострочное текстовое поле		Выводит однострочное текстовое поле для ввода текста. Если для атрибута type указано значение password, вводимые пользователем символы отображаются в виде звездочек (*) или маркеров-точек (●)
Многострочное текстовое поле	.	Текстовое поле, в которое можно ввести несколько строчек текста
Флажок		Выводит поле флажка, который можно установить или очистить
Переключатель		Выводит переключатель — элемент управления в виде небольшого кружка, который можно включить или выключить. Обычно создается группа переключателей с одинаковым значением атрибута name, вследствие чего можно выбрать только один из них
Кнопка		Выводит стандартную кнопку, активизируемую щелчком мыши. Кнопка типа submit всегда собирает информацию с формы и отправляет ее для обработки. Кнопка типа image делает то же самое, но позволяет вместо текста на кнопке вставить изображение. Кнопка типа reset очищает поля формы от введенных пользователем данных. А кнопка типа button сама по себе не делает ничего. Чтобы ее нажатие выполняло какое-либо действие, для нее нужно добавить сценарий JavaScript
Список		Выводит список, из которого пользователь может выбирать значения. Для каждого значения списка добавляется элемент

Рассмотрим особенности форматирования этих элементов посредством таблиц стилей.

Формы в мобильных приложениях

HTML — формы существовали с самых ранних времен языка HTML , и с тех пор они практически не изменились. Реализуются они тегами

, внутрь которых помещаются интерактивные элементы управления . Элемент

удерживает вместе эти элементы управления , которые также называются полями. В случае отправки данных на сервер , он сообщает браузеру, куда отправлять данные после нажатия пользователем кнопки отправки, предоставляя URL в атрибуте action тега . Но если работа с данными будет выполняться на мобильном устройстве клиента посредством сценария JavaScript, то для атрибута action можно просто указать значение # . При организации общения с пользователем, когда ввод данных отсутствует, например, в случае навигации (см. далее пример со сменой изображений), тег использовать не нужно.

Пример тега с передачей данных на сервер :

Источник

HTML 5 Интерактивные элементы

В HTML 5 появились несколько различных интерактивных элементов, которые позволяют изменять страницу без её перезагрузки, что очень полезно для создания динамических сайтов.

Вот список интерактивных элементов появившихся в HTML 5:

Элемент menu в HTML 5 является достаточно любопытным, в том плане, что он был ещё в более старых версиях языка HTML, но потом был признан устаревшим, и вот в HTML 5 он неожиданно вернулся вновь.

Элемент menu содержит элементы command (подобно списку и его элементам), каждый из которых способен запускать определённое действие.

Соответственно, атрибут label отвечает за заголовок команды, а атрибут onclick обрабатывает событие «Щелчок мыши«. Здесь при нажатии, например, по метке «Первая команда» выскочит окно, в котором будет написано: «Первая команда«. Благодаря элементам menu и command можно легко делать различные панели инструментов, интересную навигацию по сайту и тому подобное.

Элемент datagrid представляет собой таблицу данных, но, в отличии от обычных таблиц, элемент datagrid может легко обрабатываться пользователями, например, они смогут добавлять и удалять строки и столбцы, сортировать их или сворачивать. Вот пример использования элемента datagrid:

Имя	Фамилия	Зарплата
Василий	Васильев	15000
Иван	Иванов	20000

Также вместо таблицы дочерним элементом datagrid может быть, например, элемент select. Главный смысл этого элемента, что создаётся массив с данными из дочерних элементов, и это может быть либо таблица, либо даже обычный список.

Элемент details используется для указания информации, которая не является обязательной к показу. Различные браузеры по-разному будут обрабатывать данный элемент. Например, какой-нибудь браузер сделает просто сноску, а другой браузер сделает всплывающую подсказку. Пример использования элемента details ниже:

Вот и все нововведения в HTML 5 относительно интерактивных элементов.

Создано 21.05.2010 12:09:13

Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Кнопка:
Она выглядит вот так:
Текстовая ссылка:
Она выглядит вот так: Как создать свой сайт
BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 8 ):

По моему «Иван» с «Ивановым» местами надо поменять

Источник