Ползунок
Ползунок предназначен для ввода чисел в указанном диапазоне, но в отличие от поля имеет другой интерфейс и применяется в тех случаях, когда не особенно важно указывать точное значение. На рис. 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 , отображают поле формы как текстовое.
Значение range
Тип range (от англ. «range» ‒ «диапазон, спектр») создаёт ползунок.
Внешний вид
‒ ползунок;
‒ фокус;
‒ наведение курсора.
Примечание
В большинстве браузеров по умолчанию ручка ползунка всегда находится посередине.
Поддержка браузерами
Спецификация
| Верс. | Раздел |
|---|---|
| HTML | |
| 2.0 | |
| 3.2 | |
| 4.01 | |
| 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 | |
| 1.1 | |
Сопутствующие атрибуты
autocomplete Автозаполнение значения (положения) ползунка. autofocus Автоматческая фокусировка на ползунке после полной загрузки страницы. disabled Блокировка ползунка.
disabled=»disabled»
form Присоединение ползунка к форме. list Создание дополнительных меток на шкале ползунка.
max Указывает, максимальное значение ползунка.
Значение по умолчанию: « 100 ».
min Указывает, минимальное значение ползунка.
Значение по умолчанию: « 0 ».
name Присваивает имя ползунку. step Устанавливает интервал увеличения значения (перемещения) ползунка.
Значение по умолчанию: « 1 ».
value Указывает числовое значение ползунка, отправляемое на сервер или используемое сценариями.
Примечание: Данный атрибут должен иметь значение, являющееся допустимым числом с плавающей точкой.
min=»0″ max=»10″ value=»8″
Новые типы input в HTML5 формах
Обратите внимание: на данный момент (Ноябрь 2011) новые типы input поддерживаются полностью только в браузерах Opera 11+ и Chrome 12+.
- input type=email определяет поле, которые должно содержать email адрес. Значение введенное в поле автоматически проверяется перед отправкой на сервер.
- input type=url определяет поле, которое должно содержать url адрес. Значение введенное в поле автоматически проверяется перед отправкой на сервер.
- input type=tel определяет поле для ввода телефонного номера. С помощью атрибута pattern Вы может установить формат принимаемого телефонного номера. Формат задается с помощью регулярных выражений.
- input type=number определяет поле, которое должно содержать числа. Вы можете ограничивать диапазон принимаемых чисел с помощью атрибутов min (минимальное допустимое число) и max (максимальное допустимое число). С помощью атрибута step Вы можете задать шаг допустимых чисел (к примеру если шаг равен 2, то в поле могут вводиться числа 0,2,4,6 и т.д.)
- input type=range определяет поле, которые может содержать значения в определенном интервале. Отображается как ползунок, который можно перетаскивать мышкой. Вы можете ограничивать диапазон принимаемых чисел с помощью атрибутов min (минимальное допустимое число) и max (максимальное допустимое число). С помощью атрибута step Вы можете задать шаг допустимых чисел (к примеру если шаг равен 2, то в поле могут вводиться числа 0,2,4,6 и т.д.)
- input type=search определяет поле поиска (может использоваться например для создания поиска по сайту).
' /> -[0-9]-[0-9]' />
Быстрый просмотр
Новые элементы в HTML5 формах
Обратите внимание: на данный момент (Ноябрь 2011) новые элементы форм поддерживаются полностью только в браузерах Firefox 4+ и Opera 10.50+.
- datalist позволяет привязать список к полям формы. Значения списка будут выводится как поисковые подсказки во время ввода информации в поле связанное с ним.
- keygen позволяет генерировать открытые и закрытые ключи, которые используются для безопасной связи с сервером.
- output может использоваться для вывода различной информации. С помощью атрибута for можно указать связанные поля.
Какой тип ввода определяет ползунок
Многогранный тег позволяет создавать поля ввода, кнопки, переключатели и другие интерактивные элементы.
Время чтения: 9 мин
Открыть/закрыть навигацию по статье
Контрибьюторы:
- Светлана Коробцева ,
- Валерий Махнюк ,
- Егор Могилей
Обновлено 12 января 2022
Кратко
Скопировать ссылку «Кратко» Скопировано
Тег позволяет создавать интерактивные элементы на сайте — поле для ввода текста, кнопка, ползунок, переключатель и другие.
Пример
Скопировать ссылку «Пример» Скопировано
Создадим поле для ввода текста в одну строчку и ограничим количество допустимых символов в нём:
type="text" name="name" required minlength="4" maxlength="8" size="10">label for="name">Введите название (от 4 до 8 символов):label> input type="text" id="name" name="name" required minlength="4" maxlength="8" size="10" >
Как понять
Скопировать ссылку «Как понять» Скопировано
— это контейнер для интерактивных элементов, с помощью которых пользователь может ввести данные, что-то выбрать, поставить галочку или нажать кнопку.
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Если хочется, чтобы введённые или выбранные в данные отправились на сервер, нужно поместить этот тег в либо связать этот элемент с формой через атрибут id .
Атрибут type определяет, какой вид примет элемент и какую функцию будет выполнять: например, для создания поля с паролем мы напишем type = «password» , чтобы сделать переключатель — type = «radio» , а для создания кнопки — type = «button» .
Благодаря огромному количеству вариантов и функций, которые задаются через type и другие атрибуты, стал одним из самых полезных и сложных тегов в HTML.
Атрибуты
Скопировать ссылку «Атрибуты» Скопировано
К элементу можно применить все глобальные атрибуты.
type
Скопировать ссылку «type» Скопировано
type — тип элемента : текстовое поле, кнопка, флажки выбора и так далее. Если не указать его, то элемент будет обычным текстовым полем text в одну строку.
Типы для ввода данных разных форматов:
- text — поле для ввода текста в одну строку. Если попробовать вставить текст из нескольких абзацев, то они всё равно сложатся в одну строчку.
- email — поле для ввода имейла. Браузер проверит, есть ли в нём знак «@» и домен.
- search — поле для поиска.
- tel — поле для ввода номера телефона.
- url — поле для ввода URL-адреса.
- password — ввод пароля. По мере ввода символы будут меняться на звёздочки ***. Можно задать минимальное и максимальное количество символов с помощью атрибутов minlength и maxlength .
- number — ввод числа.
Типы для различных кнопок:
- submit — простая кнопка для отправки формы.
- button — обычная кнопка.
- image — кнопка «Отправить» в виде картинки. Чтобы задать адрес картинки, используйте атрибут src , а для альтернативного текста — атрибут alt . Чтобы скорректировать размер изображения в пикселях, используйте атрибуты height и width .
- reset — кнопка, которая сбрасывает всё, что пользователь ввёл в поля текущей формы ранее.
Типы для ввода дат:
- date — ввод даты без времени: год, месяц и дата.
- datetime — local — ввод даты и времени в текущем часовом поясе, когда зоны UTC не указываются.
- month — ввод месяца и года, без указания часового пояса.
- week — ввод номера недели.
- time — ввод времени без указания часового пояса.
- checkbox — флажки, или чекбокс, с несколькими вариантами на выбор.
- radio — круглая кнопка-переключатель для выбора одного из нескольких вариантов.
- range — ползунок для выбора чисел из заданного диапазона.
- color — виджет для выбора цвета. Иногда его называют колорпикер (от английского colorpicker).
- file — выбор файла для отправки.
И отдельно стоит значение hidden . Поле ввода с этим значением атрибута type не видно на странице, но в то же время оно отправляет своё значение на сервер.
Большое преимущество установки правильного значения для type — в мобильных браузерах будет появляться «специальная» клавиатура, упрощающая и улучшающая пользовательский опыт. Так, для у пользователя отобразится клавиатура, содержащая лишь цифры и специальные символы, нужные для корректного ввода номера телефона. Пример такой клавиатуры можно увидеть на картинке ниже:
value
Скопировать ссылку «value» Скопировано
value — значение элемента , которое отправляется на сервер в формате «имя=значение». Имя задаётся атрибутом name , а значение — value . Например, .
- Если — кнопка ( ), то value будет надписью на ней. Значение value для кнопки ( ) не передаётся на сервер.
- Если — кнопка в виде картинки ( ), то value будет передано в виде двух значений координат нажатия относительно изображения имя . x и имя . y , где имя — это значение атрибута name .
- Если — текстовое поле ( ), то value задаст текст, который появится в этом поле при загрузке страницы. Пользователь сможет его удалить или отредактировать.
- Если вы вставляете флажок или переключатель ( ), то value задаст уникальное значение элемента, по умолчанию on .
Прочие атрибуты
Скопировать ссылку «Прочие атрибуты» Скопировано
- name — уникальное имя элемента. Обычно имя нужно, чтобы связать с формой и отправить данные на сервер.
- required — делает поле для ввода обязательным для заполнения. Пользователь не сможет нажать «Отправить», пока не введёт сюда данные. А если попробует, то браузер выведет сообщение о необходимости заполнить поле.
- disabled — отключает элемент. Пользователь не сможет, например, ввести текст или выбрать нужный параметр, а сам элемент будет отображаться в сером цвете, как неактивный.
- autocomplete — разрешает автозаполнение. Автозаполнение — это когда браузер предлагает сохранить, например, пароль или номер банковской карты, чтобы данные подставлялись при следующем входе. Подробнее можно прочитать в статье про autocomplete .
- autofocus — фокусируется на элементе сразу после загрузки страницы. Это значит, что пользователю не нужно специально нажимать на этот элемент, чтобы начать в нём что-то писать. В фокусе может быть только один элемент на странице. Но это не может быть элемент типа hidden .
- form — связывает отдельно стоящий элемент с формой. Для этого укажите в качестве значения имя идентификатора, который задан нужному тегу . Например, так form = «special — form» . Этот атрибут позволяет разместить в любом месте на странице за пределами . Если его не указать, элемент будет связан с ближайшей формой.
- list — связывает с элементом через его ID. В элементе указывают значения, которые пользователь может выбрать, когда вбивает текст в пустое поле. Допустим, вы ввели букву «М» в поле ввода города, и браузер предложил варианты из : «Москва», «Минск» и так далее. Этот атрибут не подходит для таких типов , как hidden , password , checkbox , radio , file и любых кнопок.
- readonly — не позволяет пользователю как-либо изменять элемент, оставляя его при этом рабочим. Применимо только для текстовых полей.
- step — указывает шаг, с которым будет изменяться значение поля. Задаётся в числовом формате и работает с любым из перечисленных типов: number , range , date и datetime — local .
- min , max — указывают минимальные и максимальные числовые значения соответственно для полей с типами number и range . Минимальные и максимальные значения даты в формате ГГГГ — ММ — ДД для полей с типами date и datetime — local .
- size — указывает ширину поля для ввода в символах.
- placeholder — это короткая подсказка (слово или фраза), предназначенная для помощи пользователю при вводе данных, когда поле для ввода пустует.
- pattern — задаёт регулярное выражение, по которому проверяется значение элемента .
- multiple — указывает, что пользователь может выбрать больше одного значения.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Чтобы даже те, кто использует специальные средства для чтения с экрана (скринридеры), могли точно понять, что делает тот или иной , используйте этот тег в паре с label .
Ещё пример
Скопировать ссылку «Ещё пример» Скопировано
Вот так будет выглядеть простая форма, собранная из нескольких элементов . Мы поместили их все в контейнер , чтобы данные, которые введёт пользователь, можно было отправить на сервер:
Текстовое поле в одну строчку: Радиокнопки: Вариант 1 Вариант 2 Вариант 3 Большое текстовое поле: form name="test" method="post" action="input1.php"> label> Текстовое поле в одну строчку: input type="text" size="40"> label> fieldset> Радиокнопки: label class="radio-label"> input type="radio" name="browser" value="ie" id="ie"> Вариант 1 label> label class="radio-label"> input type="radio" name="browser" value="opera" id="opera"> Вариант 2 label> label class="radio-label"> input type="radio" name="browser" value="firefox" id="firefox"> Вариант 3 label> fieldset> label> Большое текстовое поле: textarea name="comment" cols="40" rows="3">textarea> label> div> input type="reset" value="Очистить"> input type="submit" value="Отправить"> div> form>
На практике
Скопировать ссылку "На практике" Скопировано
Дока Дог советует
Скопировать ссылку "Дока Дог советует" Скопировано
�� У есть несколько полезных CSS-псевдоклассов. Например, может иметь разные стили в обычном, сфокусированном и выключенном виде. А если между этими видами добавлять анимацию, можно сделать даже красиво. Например, как поля в Bootstrap, когда ты нажимаешь на , он начинает плавно подсвечиваться обводкой.
�� Если вы используете или , можно сами инпуты вообще скрыть: переключение будет работать при нажатии на лейбл. Так можно сделать очень красивые чекбоксы и радиокнопки на чистом CSS. Например, я как-то сделал чекбоксы на сайте в стиле классических переключалок из iOS.