Элементы для ввода чисел

Элементы для ввода чисел

Coursme
14 мин.
30 янв. 2024

Для ввода числовых значений часто применяется элемент <input> с атрибутом type="number". Этот элемент предоставляет ряд настроек, таких как минимальное и максимальное допустимые значения, а также шаг изменения.

Важно использовать эти параметры для лучшего контроля над вводом.

Пример числового поля

<label for="age">Возраст: </label>
<input type="number" step="1" min="1" max="100" value="10" id="age" name="age"/>

Добавление списка значений

Для удобства пользователя можно прикрепить к числовому полю список значений (datalist). Это обеспечивает предварительный выбор из определенного диапазона.

Пример с datalist:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Числовое поле в HTML5</title>
    </head>
    <body>
        <form>
            <p>
                <label for="price">Цена: </label>
                <input type="number" list="priceList"
                    step="1000" min="3000" max="100000" value="10000" id="price" name="price"/>
            </p>
            <p>
                <button type="submit">Отправить</button>
            </p>
        </form>
        <datalist id="priceList">
            <option value="15000" />
            <option value="20000" />
            <option value="25000" />
        </datalist>
    </body>
</html>

Интерактивный ползунок

Элемент <input> с атрибутом type="range" представляет собой ползунок, который позволяет выбирать значения на шкале. Этот элемент особенно полезен, например, при настройке параметров с использованием ползунков.

Пример ползунка:

<label for="price">Цена:</label> 
1<input type="range" step="1" min="0" max="100" value="10" id="price" name="price"/>100

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

Заключение

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

Назад
Следующий урок
Комментарии
Чтобы оставлять комментарии — надо авторизоваться
Комментариев еще нет
Будьте первым
Главная
Курсы
Блог
Меню