Input type number

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

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

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

Комментарии 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
CSS стили для атрибута placeholder можно задать через псевдокласс ::placeholder и вендорными префиксами для разных браузеров.
4319
+2
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
20462
+22
Стилизация Checkbox
Несколько примеров как изменить внешний вид чекбоксов с помощью CSS, изображений и немного JS.
35648
+4
jQuery UI Slider
jQuery UI Slider – гибкий плагин, который позволяет создать элементы интерфейса в виде ползунков в различных вариантах.
5902
+3
Печать HTML страниц
Очень часто разработчики забывают про печатную версию сайта, поэтому можно встретить такой результат на бумаге...
24513
+6
Как ограничить ввод данных в текстовое поле
Примеры, приведенные ниже позволят ограничить ввод символов в текстовые поле. Например, можно ограничить количество...
11119
+2