Какой тип ввода определяет ползунок

Ползунок

Ползунок предназначен для ввода чисел в указанном диапазоне, но в отличие от поля имеет другой интерфейс и применяется в тех случаях, когда не особенно важно указывать точное значение. На рис. 1 продемонстрирован вид ползунка в разных браузерах.

Вид ползунка

Рис. 1. Вид ползунка в браузерах

Синтаксис создания ползунка следующий.

Здесь min — минимальное число в диапазоне (по умолчанию 0), max — максимальное число (по умолчанию 100), step — шаг изменения чисел (по умолчанию 1), value — текущее значение. По умолчанию value вычисляется по формуле:

Если значение max меньше, чем значение min , то value равно min .

Атрибуты не являются обязательными, их можно опустить, в таком случае они принимают значения по умолчанию.

Независимо от минимального и максимального числа ширина ползунка остаётся одинаковой.

Сами ползунки редко применяются в «чистом» виде, поскольку не обеспечивают необходимую обратную связь с пользователем, а вот в сочетании с JavaScript это становится мощным и удобным элементом интерфейса. В примере 1 с помощью ползунка изменяется размер изображения, такая возможность часто используется в различных фотогалереях.

Пример 1. Использование ползунка

HTML5 IE 10 Cr Op Sa Fx

    Ползунок function sizePic() Размер рисунка:

В данном примере при управлении ползунком срабатывает событие oninput , которое вызывает функцию sizePic . Эта функция изменяет размер изображения в зависимости от установленного пользователем значения ползунка. Тем самым ширина картинки при желании уменьшается или наоборот, увеличивается. Результат примера при крайнем значении ползунка в браузере Chrome показан на рис. 2.

Управление шириной картинки с помощью ползунка

Рис. 2. Управление шириной картинки с помощью ползунка

Старые версии браузеров, которые не поддерживают значение range для атрибута type , отображают поле формы как текстовое.

Атрибут type HTML тега input

Атрибут type определяет тип элемента ввода.

Тип по умолчанию — text.

Этот атрибут не является обязательным, однако лучше всегда определять его.

Атрибут type для тега поддерживается всеми основными браузерами, тем не менее не все браузеры корректно работают со всеми его значениями.

В HTML5 для атрибута type были добавлены следующие новые значения: color, date, datetime, datetime-local, month, week, time, email, number, range, search, tel, url.

Синтаксис атрибута

Значения атрибута

Значение Описание

button Обычная кнопка (как правило используется для запуска скриптов Javascript).

checkbox Флажки, которые позволяют выбрать более одного варианта из предложенных.

color Добавлен в HTML5.
Виджет для выбора цвета.

date Добавлен в HTML5.
Поле выбора календарной даты.

datetime Добавлен в HTML5.
Указание даты и времени.

datetime-local Добавлен в HTML5.
Указание местной даты и времени.

email Добавлен в HTML5.
Для адресов электронной почты.

file Поле для ввода имени файла, который пересылается на сервер.

hidden Скрытое поле, которое не отображается на странице.

image Поле с изображением. При нажатии на рисунок данные формы отправляются на сервер.

month Добавлен в HTML5.
Выбор месяца.

number Добавлен в HTML5.
Ввод чисел.

password Текстовое поле, в котором все символы показываются звездочками. Предназначено для того, чтобы никто не подглядел вводимый пароль.

radio Переключатели. Используются, когда следует выбрать один вариант из нескольких предложенных.

range Добавлен в HTML5.
Ползунок для выбора чисел в указанном диапазоне.

reset Кнопка сброса данных в исходные значения.

search Добавлен в HTML5.
Поле поиска.

submit Кнопка отправки данных формы на сервер.

tel Добавлен в HTML5.
Для телефонных номеров.

text Текстовое поле. Значение по умолчанию.

time Добавлен в HTML5.
Для времени.

url Добавлен в HTML5.
Для веб-адресов.

week Добавлен в HTML5.
Выбор недели.

Пример использования атрибута

HTML форма с двумя разными элементами ввода — текстовое поле и кнопка отправки данных на сервер:

Значение range

Тип range (от англ. «range» ‒ «диапазон, спектр») создаёт ползунок.

Внешний вид

‒ ползунок;

‒ фокус;

‒ наведение курсора.

Примечание

В большинстве браузеров по умолчанию ручка ползунка всегда находится посередине.

Поддержка браузерами

Спецификация

Верс. Раздел

HTML

2.0 ~~Input Field: INPUT~~

3.2 ~~INPUT text fields, radio buttons, check boxes, .~~

4.01 ~~17.4.1 Control types created with INPUT~~

5.0 4.10.5.1.10 Range state (type=range)

5.1 4.10.5.1.13. Range state (type=range)

XHTML

1.0 ~~Extensible HyperText Markup Language~~

1.1 ~~Extensible HyperText Markup Language~~

Сопутствующие атрибуты

autocomplete Автозаполнение значения (положения) ползунка. autofocus Автоматческая фокусировка на ползунке после полной загрузки страницы. disabled Блокировка ползунка.

disabled=»disabled»

form Присоединение ползунка к форме. list Создание дополнительных меток на шкале ползунка.

max Указывает, максимальное значение ползунка.

Значение по умолчанию: « 100 ».

min Указывает, минимальное значение ползунка.

Значение по умолчанию: « 0 ».

name Присваивает имя ползунку. step Устанавливает интервал увеличения значения (перемещения) ползунка.

Значение по умолчанию: « 1 ».

value Указывает числовое значение ползунка, отправляемое на сервер или используемое сценариями.

Примечание: Данный атрибут должен иметь значение, являющееся допустимым числом с плавающей точкой.

min=»0″ max=»10″ value=»8″

Тип элемента управления «Ползунок»

В этом разделе содержатся сведения о поддержке microsoft модель автоматизации пользовательского интерфейса для типа элемента управления Slider.

Ползунок — это составной элемент управления с кнопками, которые позволяют пользователю задать числовой диапазон или выбрать из набора элементов.

В следующих разделах определяются необходимые модель автоматизации пользовательского интерфейса древовидной структуры, свойств, шаблонов элементов управления и событий для типа элемента управления Slider. Требования к модель автоматизации пользовательского интерфейса применяются ко всем элементам управления ползунка, в которых платформа пользовательского интерфейса интегрируется модель автоматизации пользовательского интерфейса поддержку типов элементов управления и шаблонов элементов управления.

В этом разделе содержатся следующие подразделы.

Типичная древовидная структура

Соответствующие свойства

Обязательные шаблоны элементов управления

Обязательные события

Связанные темы

Типичная древовидная структура

В следующей таблице представлен типичный элемент управления и представление содержимого дерева модель автоматизации пользовательского интерфейса, относящееся к элементам управления ползунок, и описывается, что может содержаться в каждом представлении. Дополнительные сведения о дереве модель автоматизации пользовательского интерфейса см. в разделе Общие сведения о дереве модель автоматизации пользовательского интерфейса.

Ползунок

Button (2 или 4)

Большой палец (1)

ListItem (0 или более)

Ползунок

ListItem (0 или более)

Соответствующие свойства

В следующей таблице перечислены модель автоматизации пользовательского интерфейса свойства, значение или определение которых особенно важно для элементов управления ползунка. Дополнительные сведения о свойствах модель автоматизации пользовательского интерфейса см. в разделе Извлечение свойств из элементов модель автоматизации пользовательского интерфейса.

Свойство модели автоматизации пользовательского интерфейса Значение Примечания

UIA_AutomationIdPropertyId См. примечания. Значение этого свойства должно быть уникальным среди всех одноранговых элементов в необработанном представлении дерева модель автоматизации пользовательского интерфейса.

UIA_BoundingRectanglePropertyId См. примечания. Внешний прямоугольник, содержащий весь элемент управления.

UIA_ClickablePointPropertyId См. примечания. Большинство элементов управления ползунок должны возвращать ошибку UIA_E_NOCLICKABLEPOINT , так как весь ограничивающий прямоугольник элемента управления ползунок занят дочерними элементами управления.

UIA_ControlTypePropertyId Slider Это значение одинаково для всех инфраструктур.

UIA_IsContentElementPropertyId TRUE Элемент управления ползунок всегда включается в представление содержимого дерева модель автоматизации пользовательского интерфейса.

UIA_IsControlElementPropertyId TRUE Элемент управления ползунок всегда включается в представление элемента управления дерева модель автоматизации пользовательского интерфейса.

UIA_IsKeyboardFocusablePropertyId См. примечания. Если элемент управления может получать фокус клавиатуры, он должен поддерживать это свойство. Дочерние элементы (кнопки и большой палец) элемента управления ползунок никогда не должны находиться в фокусе. Фокус всегда должен оставаться на самом элементе управления ползунок.

UIA_LabeledByPropertyId См. примечания. Если с элементом управления связана статическая текстовая метка, это свойство должно предоставлять ссылку на этот элемент управления. Если элемент управления text является подкомпонентом другого элемента управления, для него не будет задано свойство LabeledBy .

UIA_LocalizedControlTypePropertyId См. примечания. Локализованная строка, соответствующая типу элемента управления Slider . Значение по умолчанию — «ползунок» для en-US или english (США).

UIA_NamePropertyId См. примечания. Имя элемента управления ползунок обычно создается из статической текстовой метки. Если нет статической текстовой метки, разработчик приложения должен назначить значение свойства Name .

Обязательные шаблоны элементов управления

В следующей таблице перечислены шаблоны элементов управления модель автоматизации пользовательского интерфейса, которые должны поддерживаться всеми элементами управления ползунка. Дополнительные сведения о шаблонах элементов управления см. в разделе UI Automation Control Patterns Overview.

Шаблон элемента управления/свойство шаблона Поддержка/значение Примечания

IRangeValueProvider Зависит Ползунок должен поддерживать шаблон элемента управления RangeValue , если для содержимого можно задать значение в числовом диапазоне.

ISelectionProvider Зависит Ползунок должен поддерживать шаблон элемента управления «Выбор «, если содержимое представляет одно значение из дискретного набора параметров. Если шаблон элемента управления Selection поддерживается, соответствующий выбор должен представляться как один или несколько дочерних элементов списка ползунка.

IValueProvider Зависит Ползунок должен поддерживать шаблон элемента управления Значение , если содержимое представляет одно значение из дискретного набора параметров.

Обязательные события

В следующей таблице перечислены события модель автоматизации пользовательского интерфейса, которые должны поддерживаться ползунками. Дополнительные сведения о событиях см. в разделе UI Automation Events Overview.

Событие модель автоматизации пользовательского интерфейса Примечания

UIA_AutomationFocusChangedEventId

UIA_BoundingRectanglePropertyId событие изменения свойства.

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

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

UIA_RangeValueValuePropertyId событие изменения свойства. Если элемент управления поддерживает шаблон элемента управления RangeValue , он должен поддерживать это событие.

UIA_Selection_InvalidatedEventId Если элемент управления поддерживает шаблон элемента управления Selection , он должен поддерживать это событие.

UIA_StructureChangedEventId

UIA_ValueValuePropertyId событие изменения свойства. Если элемент управления поддерживает шаблон элемента управления «Значение» , он должен поддерживать это событие.

Связанные темы

Основные понятия

Похожие публикации:

Loom for chrome что это

Как html перевести в php

Как сделать в макросе подразделы

Что такое блок схема в программировании