Input type number

В HTML5 появилось специальное поле <input> с атрибутом type="number" для вода чисел. Рассмотрим его возможности.

Для поля доступны следующие атрибуты:

Атрибут Описание
step Шаг изменения значения
max Максимальное значение
min Минимальное значение
placeholder Подсказка
readonly Только для чтения
disabled Заблокирован
list Связка со списком опций datalist по id
required Обязательный для заполнения
29.09.2020, обновлено 08.10.2020

Комментарии 1

Международный Фонд Апсны Международный Фонд Апсны
17 декабря 2020 в 15:58
0
Спасибо за очень полезный урок Мало где такое объяснение встретишь.Но я никак не могу решить, как реализовать ваше решение в Друпал 8.В шаблоне формы input.html.twig?Меня интересует пример №8 Стилизация кнопок.Как применить имеющийся у вас пример к существующему полю input number?Как например прописать этот код в теме сайта? <div class="number">
<button class="number-minus" type="button" onclick="this.nextElementSibling.stepDown(); this.nextElementSibling.onchange();">-</button>
<input type="number" min="0" value="1" readonly>
<button class="number-plus" type="button" onclick="this.previousElementSibling.stepUp(); this.previousElementSibling.onchange();">+</button>
</div>

, чтобы добавить комментарий.

Другие публикации

CSS стили для атрибута placeholder можно задать через псевдокласс ::placeholder и вендорными префиксами для разных браузеров.
2261
+1
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
10712
+13
Несколько примеров как изменить внешний вид чекбоксов с помощью CSS, изображений и немного JS.
11635
+2
jQuery UI Slider – гибкий плагин, который позволяет создать элементы интерфейса в виде ползунков в различных вариантах.
525
0
Очень часто разработчики забывают про печатную версию сайта, поэтому можно встретить такой результат на бумаге...
9362
+2
Примеры, приведенные ниже позволят ограничить ввод символов в текстовые поле. Например, можно ограничить количество...
124
0