Тег <input>

Атрибуты

• Глобальные атрибуты
• accept - подсказка для ожидаемого типа файла для типа file
• alt - альтернативный текст для кнопки-изображения
• autocomplete - управление автозаполнением поля (off или on)
• autofocus - автоматический фокус при загрузке страницы
• checked - выбор флажка или переключателя
• dirname - параметр направления текста
• disabled - отключен ли элемент формы
• form - связывает элемента с формой
• formaction - URL для обработки формы
• formenctype - тип кодирования при отправке формы
• formmethod - метод HTTP для отправки формы
• formnovalidate - управление проверкой валидации
• formtarget - контекст отправки формы
• height - высота элемента
• list - список вариантов автозаполнения
• max - максимальное значение
• maxlength - максимальная длина значения
• min - минимальное значение
• minlength - минимальная длина значения
• multiple - отправка нескольких значений
• name - имя элемента формы
• pattern - шаблон для проверки соответствия при валидации
• placeholder - подсказка для заполнения
• readonly - доступ только для чтения
• required - поле обязательно для заполнения
• size - размер элемента управления
• src - пусть до изображения
• step - допустимый шаг значения
• type - тип элемента формы
• value - значение элемента формы
• width - ширина элемента

• Текстовое поле

  По умолчанию элемент <input> представляет собой универсальное текстовое поле, что также соответствует значению его типа text:

• Варианты кнопок

  Элемент <input> можно использовать и для создания кнопок:

  • button - кнопка без действия
  • submit - кнопка для отправки данных
  • reset - кнопка для сброса данных

• Кнопка-изображение

  Если стандартная кнопка нас не устраивает, мы можем заменить ее на кнопку-изображение. Создается она при помощи типа image. Такая кнопка ведет себя как обычное изображение и даже имеет аналогичные атрибуты:

  • src, чтобы указать путь до изображения
  • и alt, чтобы задать альтернативный текст

  Кроме того, такая кнопка дополнительно передает на сервер координаты точки, на которую нажал пользователь:

• Специализированные поля

  Элемент <input> позволяет создавать множество специализированных полей для разных случаев, например:

  • password - поле для ввода пароля, значения которого срывается за символами звездочек
  • email - поле для E-mail адреса
  • tel - поле для ввода телефонного номера
  • url - поле для ввода URL-адреса
  • search - поле поиска с элементом крестика для сброса
  • color - поле для выбора цвета

  Использование правильного типа позволит лучше взаимодействовать с вашей формой, например, предоставлять пользователю оптимальную клавиатуру на мобильных устройствах. Кроме этого, поля email и url будут проверять введенные данные на соответствие указанному типу:

• Работа с числами

  Для работы с числовыми значениями существует два типа:

  • number - поле с дополнительными стрелочками
  • range - ползунок

  Оба эти элемента поддерживают атрибуты min и max, чтобы задать допустимый диапазон значений, а также атрибут step для задания шага изменения значения:

• Дата и время

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

  • date - поле для выбора даты
  • time - поле для выбора времени
  • datetime-local - Поле для выбора даты и времени
  • week - порядковый номер недели и год
  • month - номер месяца и год

  При клике на такие поля браузер предоставляет специальные интерфейсы для выбора значения, например, календарь:

• Загрузка файлов

  Для загрузки файлов также используется элемент <input>, но уже с типом file. Такое поле преобразуется в специальную кнопку, при клике на которую пользователь сможет выбрать файлы со своего компьютера. Для передачи файла на сервер форма должна иметь метод post, а также специальный тип кодирования multipart/form-data:

• Флажки и переключатели

  Элемент <input> с типом checkbox создает специальный флажок, который может находиться в одном из двух состояний - отмечен или не отмечен. Если флажок не был отмечен, то он не передает на сервер никаких данных. Чаще всего такой элемент используется для получения согласия от пользователя.

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

• Скрытое поле

  И последний тип, который мы сейчас рассмотрим - это тип hidden, который позволяет создавать скрытые поля. Такие поля не имеют визуального представления, но также позволяют передавать данные. Чаще всего их используют для передачи некоторой служебной информации:

  • идентификатора пользователя в интернет-магазине
  • артикула заказанного товара
  • названия страницы или формы, откуда был отправлен запрос
  • и т.д.