Type range можно ли опустить атрибуты – Спаренный range input с двумя ползунками. Есть ли варианты получше чем в теле вопроса?

HTML5 input type range — ползунок и его оформление

Ползунок особенно полезен для форм, в которых существуют три условия:

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

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

Пример использования range

<label for=weight>Громкость</label>
<input type=range id=weight min=10 value=10 max=2000 step=100>

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

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

Установка, Доступность И Признаки

На базовом уровне у входа ползунка должно быть по крайней мере три признака: min(самое низкое принятое число), max (самое высокое) и value ( начальное значение). Поля формы должны были связать элементы лейбла, означая, что у диапазона должен также быть признак id в большинстве случаев. Давайте использовать пример регулировки громкости:

Для примера рассмотрим создание поля формы input type range для регулировки громкости.

<label for=fader>Уровень громкости</label>
<input type=range min=0 max=5 value=3 id=fader>

Примечание, у ползунка есть несколько характерных особенностей:

Кнопка ползунка «хватается», поскольку она перемещается. По умолчанию эти пункты моментального изменения соответствуют местоположению целых чисел в диапазоне. Когда выставлено, кнопка может быть перемещена с/вниз клавишами курсора, точно так же как ввод числа. (Не все браузеры поддерживают это все же). Степень ползунка не изменяется согласно значения max; вместо этого, это регулируется, изменяя ширину элемента в CSS. Относительно положение выбраного числа будет подставлено в value на это изменение.

Поведение установленной кнопки ползунка может быть особенно запутывающим, когда минимум и максимум относительно близки. Как пример, хочу предоставить ползунок микшера объема между 0 и 1:

<input type=range min=0 max=1 value=1 id=fader>

Кнопка теперь может выбирать значение без промежуточных положений. Решение состоит в том, чтобы ввести больше степени детализации при использовании значения атрибута шага: «step»

<input type=range min=0 max=1 value=1 id=fader step=".05">

Примечание, что точно так же как ввод числа, шаг может использоваться, чтобы позволить только определенные целые числа в диапазоне: можно принять только четные числа между min и max, устанавливая step=2, например. Также отметьте, что использование коротких путей HTML5 ограничивается в этом случае: следует использовать кавычки вокруг чисел как 0.5 для примера, чтобы все работало правильно. Ценность в выставлении шага заставляет ползунок выбрать число с плавающей запятой, и является самым прекрасным уровнем контроля. Но мы то не имеем возможности видеть, а какое именно мы значение выбрали. Давайте прибегним к маленькой хитрости и добавим немного javascript, и посмотрим диапазон чисел который мы выбираем перетаскивая ползунок вверх или вниз.

Рассмотрим пример

<label for=fader>Volume</label>

<input type=range min=0 max=100 value=50 id=fader step=1 onchange="outputUpdate(value)">

<output for=fader id=volume>50</output>

<script>

function outputUpdate(vol) {

  document.querySelector('#volume').value = vol;

}

</script>

Примечание: браузер firefox — не поддерживает автоматичесский подхват значений поля range, а именно число которое подставилось в value значение формы, до того пока вы не бросите ползунок. Это конечно недостаток браузера.

Вертикальное расположение ползунка

Присвоение вертикального положения ползунку будет иногда иметь смысл: большинство пользователей думает об расположении как и «вертикально», например, а не от стороны к стороне. Разумное расположение состоит в том, что использование, преобразования CSS вращали бы элемент правильно, но это не будет работать как ожидалось. Для валидации и адаптации поля формы range используем css позиционирование для таких браузеров:

В Firefox это — slider-vertical;

В Webkit это — CSS: — -webkit-appearance:

И для IE, есть довольно отличное решение: writing-mode: bt-lr;

Объединение всех трех произвело бы следующее:

input.vertical { -webkit-appearance: slider-vertical;  writing-mode: bt-lr; }
<input type=range min=0 max=100 value=50 class=vertical orient=vertical>

Результат Вы видите в правой части параграфа

Моделирование Ползунка

Вид ползунка может быть настроено полностью в CSS, используя множество псевдоотборщиков:

input[type=range], ::-moz-range-track, ::-ms-track {
-webkit-appearance: none;
background-color: #3f91e5;
width: 250px;
height:20px;
}

В этом пункте может быть настроена кнопка ползунка:

::-webkit-slider-thumb, ::-moz-range-thumb, ::-ms-thumb {{
  -webkit-appearance: none;
  background-color: #666;
  width: 10px;
 height: 20px;
 }

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

Возможности HTML5 учитывает особенно умную особенность:подключение элемента к datalist с числовыми значениями через выбор из списка создаст ряд вариантов вдоль бара ползунка с положением каждого нажатия, определенного выбором в datalist.

Например, изменение нашего аудио контроля:

<label for=fader>Volume</label>
<input type=range min=0 max=100 value=50 id=fader step=20 list=volsettings>
<datalist id=volsettings>
<option>0</option>
<option>20</option>
<option>40</option>
<option>60</option>
<option>80</option>
<option>100</option>
</datalist>

На этой ноте завершу сегодняшнюю публикацию. Надеюсь материал станет вам полезным. Есть вопросы пожалуйста задавайте в комментариях, я всегда всем отвечаю.

Кроссбраузерное оформление для HMTL5 элемента input с типом range

От автора: Ползунок выбора диапазона (range) является одним из новых типов у элемента input, представленных в спецификации HTML5. Данный тип позволяет осуществить выбор какого-то числового значения в указанном диапазоне. Браузерами предусмотрено отображение данного типа в виде слайдера с ползунком. Это очень интуитивный элемент пользовательского интерфейса, который очень часто встречается в приложениях. Мы можем передвигать ползунок вправо или влево, чтобы выбрать нужное значение в рамках заданного диапазона.

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

Рекомендую также прочитать статью: Создание и оформление HTML5 индикатора выполнения (progress bar)

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Для браузеров Chrome, Safari и Opera

Браузеры Safari и Opera работают на «движке» Webkit. И хотя разработчики браузера Chrome приняли решение перейти на собственный «движок» Blink, на данный момент у данных браузеров много общего.

Webkit предоставляет легкий способ стилизовать любой тип элемента input, включая range. Для начала мы можем выбрать нужный элемент input с помощью селектора атрибутов и отключить стили, заданные по умолчанию в Webkit/Chrome, указав значение none для свойства -webkit-appearance.

input[type=range] { -webkit-appearance: none }

После этого мы можем задавать все, что угодно, например, границы, цвет фона, скругление углов и т.д.

.input[type=range] { -webkit-appearance: none; width: 100%; border-radius: 8px; height: 7px; border: 1px solid #bdc3c7; background-color: #fff; }

На следующем примере видно, что только ползунок (handlebar) остался незатронутым в результате указания стилей.

Чтобы и к нему тоже можно было применять стили, нам необходимо использовать псевдо-элемент ::-webkit-slider-thumb, имеющийся только у Webkit, и точно также удалить исходные стили с помощью свойства -webkit-appearance. Вот так:

input[type=’range’]::-webkit-slider-thumb { -webkit-appearance: none; background-color: #ecf0f1; border: 1px solid #bdc3c7; width: 20px; height: 20px; border-radius: 10px; cursor: pointer; }

Таким способом мы можем стилизовать элемент input с типом range для браузеров на «движке» Webkit. Стили, которые мы прописали, должны работать для браузеров Chrome и Safari, а также для последней версии Opera. Однако, они не окажут никакого эффекта в браузерах Firefox и Internet Explorer, т.к. у них другие «движки». Но мы знаем, что нужно делать, чтобы исправить эту ситуацию.

Для браузера Firefox

Попытка прописать стили прямо для селектора input[type=’range’] окажется неудачной в случае с Firefox. Вместо этого нам необходимо использовать псевдо-элементы ::-moz-range-track и ::-moz-range-thumb, характерные только для Firefox.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Псевдо-элемент ::-moz-range-track позволит изменить полосу диапазона, а псевдо-элемент ::-moz-range-thumb — ползунок.

.firefox input[type=range]::-moz-range-track { border-radius: 8px; height: 7px; border: 1px solid #bdc3c7; background-color: #fff; } .firefox input[type=range]::-moz-range-thumb { background: #ecf0f1; border: 1px solid #bdc3c7; width: 20px; height: 20px; border-radius: 10px; cursor: pointer; }

Мы использовали точно такие же стили. Посмотрите, что получилось в Firefox. Результат должен быть очень похож на то, что мы увидели в браузерах на «движке» Webkit.

Для браузера Internet Explorer

Internet Explorer отображает элемент input с типом range далеко не так, как все остальные браузеры. Чтобы было легче понять, я нарисовал диаграмму, показывающую из каких частей формируется элемент input данного типа.

(Прим. пер.: lower fill – нижняя заливка, tick – отметка, handle bar – ползунок, upper fill – верхняя заливка)

IE также отображает всплывающую подсказку (tooltip), отображающую устанавливаемое значение во время перемещения ползунка.

Каждую из этих частей элемента input мы можем оформить с помощью псевдо-элементов ::-ms-fill-lower, ::-ms-fill-upper, ::-ms-thumb, ::-ms-ticks и ::-ms-tooltip, имеющихся только в IE. Здесь мы будем использовать те же стили, как и для браузера Firefox и браузеров на «движке» Webkit.

input[type=»range»]::-ms-fill-lower, input[type=»range»]::-ms-fill-upper { background: transparent; } input[type=»range»]::-ms-track { border-radius: 8px; height: 7px; border: 1px solid #bdc3c7; background-color: #fff; } input[type=»range»]::-ms-thumb { background-color: #ecf0f1; border: 1px solid #bdc3c7; width: 20px; height: 20px; border-radius: 10px; cursor: pointer; }

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

Мы легко можем убрать отметки, добавив для элемента input параметр step=»any». Однако, сделать ползунок полностью видимым не представляется возможным. Это, как если бы для элемента input было задано свойство overflow со значением hidden, но это нельзя было бы исправить, изменив значение свойства overflow на visible. Я до сих пор пытаюсь выяснить, почему так происходит. Если вам удалось решить эту проблему, поделитесь, пожалуйста, своим решением в комментариях.

В заключение

В заключение хотелось бы сказать, что элемент input с типом range — это довольно хорошо изменяемый элемент. К сожалению, каждый браузер стремится отобразить его по-своему, поэтому нам приходится писать больше кода, чтобы это исправить. Я надеюсь, что в будущем появится стандарт, который сгладит данные различия. Я также даю ссылку на демо-пример ползунка выбора диапазона, созданного в данной статье, и ссылку на исходники.

Автор: Thoriq Firdaus

Источник: http://www.hongkiat.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Ползунок html+css

Здравствуйте уважаемые начинающие веб-мастера. Ещё один Оригинальный эффект CSS.

Сейчас будем делать красивый ползунок для сайта. Простой-то ползунок сделать просто. Достаточно ввести в html код тег input с атрибутом type=»range», как любой браузер поймёт, что на экране нужно вывести ползунок.

Вот пожалуйста, вставляем в любом месте

<input type="range">

И получаем там же

Невзрачненько. Чтоб сделать этот бегунок красивым, можно применить css, но не всё так просто. Дело в том, что каждый браузер отображает бегунок по своему.

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

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

Далее я Вам дам несколько вариантов кода с объясняющими комментариями, и Вы методом научного тыка и матерного слова (самый результативный метод), сможете поработать в Notepad ++ над внешним видом бегунка.

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

Итак, код красивого бегунка:

А вот и он сам, работает, можно подвигать:

Ещё один пример, в котором линия, по которой двигается бегунок, является индикатором.

Код:

Результат, так же рабочий:

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

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

Желаю творческих успехов.

Перемена

Мужчина упал с десятого этажа, и не разбился. Так целиком и похоронили.

Страница из блоков < < < В раздел > > > Вращающийся куб-баннер CSS

Рекомендую: Бесплатные HTML шаблоны на русском от TemplateMonster

улучшенные возможности, новые типы полей и атрибуты

HTML-формы являются элементами управления, которые применяются для сбора информации от посетителей веб-сайта.

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

Для получения и обработки данных форм используются языки веб-программирования, такие как PHP, Perl.

До появления HTML5 веб-формы представляли собой набор нескольких элементов <input type="text">, <input type="password">, завершающихся кнопкой <input type="submit">. Для стилизации форм в разных браузерах приходилось прилагать немало усилий. Кроме того, формы требовали применения JavaScript для проверки введенных данных, а также были лишены специфических типов полей ввода для указания повседневной информации типа дат, адресов электронной почты и URL-адресов.

HTML5-формы решили большинство этих распространенных проблем благодаря наличию новых атрибутов, предоставив возможность изменять внешний вид элементов форм за счет CSS3.

Создание HTML5-формы

1. Элемент <form>

Основу любой формы составляет элемент <form>...</form>. Он не предусматривает ввод данных, так как является контейнером, удерживая вместе все элементы управления формы – поля. Атрибуты этого элемента содержат информацию, общую для всех полей формы, поэтому в одну форму нужно включать поля, объединенные логически.

2. Группировка элементов формы

Элемент <fieldset>...</fieldset> предназначен для группировки элементов, связанных друг с другом, разделяя таким образом форму на логические фрагменты.

Каждой группе элементов можно присвоить название с помощью элемента <legend>, который идет сразу за тегом <fieldset>. Название группы проявляется слева в верхней границе <fieldset>. Например, если в элементе <fieldset> хранится контактная информация:

<form>
  <fieldset>
    <legend>Контактная информация</legend>
    <p><label for="name">Имя <em>*</em></label><input type="text"></p>
    <p><label for="email">E-mail</label><input type="email"></p>
  </fieldset>
<p><input type="submit" value="Отправить"></p>
</form>

3. Создание полей формы

Элемент <input> создает большинство полей формы. Атрибуты элемента отличаются в зависимости от типа поля, для создания которого используется этот элемент.

С помощью css-стилей можно изменить размер шрифта, тип шрифта, цвет и другие свойства текста, а также добавить границы, цвет фона и фоновое изображение. Ширина поля задается свойством width.

4. Текстовые поля ввода

Элемент <textarea>...</textarea> используется вместо элемента <input type="text">, когда нужно создать большие текстовые поля. Текст, отображаемый как исходное значение, помещается внутрь тега. Размеры поля устанавливаются при помощи атрибутов cols – размеры по горизонтали, rows – размеры по вертикали. Высоту поля можно задать свойством height. Все размеры считаются исходя из размера одного символа моноширинного шрифта.

5. Раскрывающийся список

Списки дают возможность расположить большое количество пунктов компактно. Раскрывающиеся списки создаются при помощи элемента <select>...</select>. Они позволяют выбрать одно или несколько значений из предложенного множества. По умолчанию в поле списка отображается его первый элемент.

Для добавления в список пунктов используются элементы <option>...</option>, которые располагаются внутри <select>.

Для систематизации списков применяется элемент <optgroup>...</optgroup>, который создает заголовки в списках.

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

6. Надписи к полям формы

Надписи к элементам формы создаются с помощью элемента <label>...</label>. Существует два способа группировки надписи и поля. Если поле находится внутри элемента <label>, то атрибут for указывать не нужно.

<!-- с указанием атрибута for -->
<label for="comments">Когда вы последний раз летали на самолете?</label>
<textarea></textarea>

<!-- без атрибута for -->
<p><label>Кошка<input type="checkbox"></label></p>

7. Кнопки

Элемент <button>...</button> создает кликабельные кнопки. В отличие от кнопок, созданных <input> (<input type="submit"></input>, <input type="image">, <input type="reset">, <input type="button">), внутрь элемента <button> можно поместить контент — текст или изображение.

Для корректного отображения элемента <button> разными браузерами нужно указывать атрибут type, например, <button type="submit"></button>.

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

8. Флажки и переключатели в формах

Флажки в формах задаются с помощью конструкции <input type="checkbox">, а переключатель — при помощи <input type="radio">.

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

Элемент <label> применяется при реализации выбора с помощью переключателей и флажков. Можно выбрать нужный пункт, просто щелкая кнопкой мыши на тексте, связанном с ним. Для этого нужно поместить <input> внутрь элемента <label>.

Атрибут type | htmlbook.ru

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

Описание

Сообщает браузеру, к какому типу относится элемент формы.

Синтаксис

<input type="button|checkbox|file|hidden|image|password|radio|reset|submit|text">

<input type="button|checkbox|file|hidden|image|password|radio|reset|submit|text" />

Обязательный атрибут

Да

Значения

В табл. 1 перечислены возможные значения атрибута type и получаемый вид поля формы.

В HTML5 добавлены новые значения, представленные в табл. 2.

Поддержка этих значений браузерами показана в табл. 3.

Значение по умолчанию

text

Пример 1

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег input, атрибут type</title>
 </head>
 <body>  
 
  <form action="input10.php">
   <p><input type="radio" name="drink" value="rad1"> Пиво<Br>
   <input type="radio" name="drink" value="rad2"> Чай<Br>
   <input type="radio" name="drink" value="rad3"> Кофе</p>
   <p><input type="image" src="images/imgbutton.gif"></p>
  </form>

 </body>
</html>

Пример 2

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег input, атрибут type</title>
 </head>
 <body>   
  <form>
  <p>Введите число от 1 до 10</p>
  <p><input type="range" min="1" max="10"></p>
  </form>
 </body>
</html>