Настройка 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 |
Использование элемента input для ввода текста
Использование элемента input для ввода пароля
Использование элемента input для создания кнопок
Использование элементов input для ограничения ввода данных
Использование элемента input для получения поисковых терминов
Использование элемента input для создания скрытых данных
Использование элемента input для создания кнопок с изображениями и карт
Использование элемента input для загрузки файлов
