Главная страница   /   13. Настройка input элемента (Руководство по HTML5

Руководство по HTML5

Руководство по HTML5

Адам Фриман

13. Настройка input элемента

В предыдущей главе я показал вам базовое использование элемента input, который представляет просто текстовое поле, куда пользователь может вводить данные. Проблема тут заключается в том, что пользователь может ввести любые данные. В некоторых ситуациях это все работает отлично, но в других случаях вам может потребоваться определенный вид данных. В таких случаях вы можете настроить элемент input для сбора данных от пользователей различными способами. Можно настроить элемент input при помощи атрибута type, для которого в HTML5 существуют 23 различные значения. После того как вы выбрали нужное значения type, у вас появляется доступ к дополнительным атрибутам. В общей сложности для элемента input есть 30 атрибутов, и многие из них могут быть использованы только с определенными значениями type. В этой главе я объясню различные типы и связанные с ними атрибуты. В таблице 13-1 представлено краткое содержание этой главы.

Таблица 13-1: Краткое содержание главы
Задача Решение Листинг
Установить размер и вместимость элемента input. Использовать атрибуты size и maxlength 13-1
Установить начальное значение для элемента input или подсказку на то, какие потребуются данные . Использовать атрибуты size и maxlength 13-2
Предоставить пользователю предлагаемые значения. Использовать элемент datalist и атрибут list элемента input 13-3
Создать "только для чтения" или отключенные элементы input. Использовать атрибуты disabled и readonly 13-4
Скрыть символы, которые вводит пользователь. Использовать тип password элемента input 13-5
Создать кнопки при помощи элемента input. Использовать типы submit, reset или button элемента input. 13-6
Ограничить пользователя числовым значением. Использовать тип number элемента input. 13-7
Ограничить пользователя диапазоном числовых значений. Использовать тип range элемента input. 13-8
Ограничить пользователя ответом верно/неверно (true/false) Использовать тип checkbox элемента input. 13-9
Ограничить пользователя определенным числом вариантов. Использовать тип radio элемента input. 13-10
Ограничить пользователя определенным форматом строки. Использовать типы email, tel или url элемента input. 13-11
Ограничить пользователя временем или датой Использовать типы datetime, datetime-local, date, month, time или week элемента input. 13-12
Ограничить пользователя выбором цвета. Использовать тип color элемента input. 13-13
Ограничить пользователя вводом данным для поиска. Использовать тип search элемента input. 13-14
Создать элемент input, который не отображается пользователю. Использовать тип hidden элемента input. 13-15
Создать кнопки с рисунками для отправки формы. Использовать тип image элемента input. 13-16
Загрузить файл на сервер. Использовать тип file элемента input и установить кодировку для формы на multipart/form-data. 13-17

13.1. Использование элемента input для ввода текста

13.2. Использование элемента input для ввода пароля

13.3. Использование элемента input для создания кнопок

13.4. Использование элементов input для ограничения ввода данных

13.5. Использование элемента input для получения поисковых терминов

13.6. Использование элемента input для создания скрытых данных

13.7. Использование элемента input для создания кнопок с изображениями и карт

13.8. Использование элемента input для загрузки файлов

13.9. Резюме