HTML <input> тег

  • Предыдущая страница <img>
  • Следующая страница <ins>

Определение и использование

<input> Тег определяет поле ввода, в котором пользователь может вводить данные.

<input> Элемент является одним из самых важных элементов форм.

<input> Элемент может быть отображен несколькими способами, в зависимости от параметр type.

Вот различные типы ввода:

  • <input type="button">
  • <input type="checkbox">
  • <input type="color">
  • <input type="date">
  • <input type="datetime-local">
  • <input type="email">
  • <input type="file">
  • <input type="hidden">
  • <input type="image">
  • <input type="month">
  • <input type="number">
  • <input type="password">
  • <input type="radio">
  • <input type="range">
  • <input type="reset">
  • <input type="search">
  • <input type="submit">
  • <input type="tel">
  • <input type="text">(по умолчанию)
  • <input type="time">
  • <input type="url">
  • <input type="week">

См. параметр typeДля просмотра примеров каждого типа ввода!

Пример

HTML-форма, содержащая три поля ввода; два текстовых поля и кнопку подтверждения:

<form action="/action_page.php">
  <label for="fname">Имя:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Фамилия:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Подтвердить">
</form>

Попробуйте сами

Советы и комментарии

Совет:Всегда используйте тег <label> для определения этикетки для следующих элементов:

<input type="text">
<input type="checkbox">
<input type="radio">
<input type="file">
<input type="password">

Атрибут

Атрибут Значение Описание
accept
  • Расширение файла
  • audio/*
  • video/*
  • image/*
  • Тип媒体

Указывает тип файла, который будет передан через загрузку файла.

Указывает, какие фильтры типов файлов могут быть выбраны пользователем из диалогового окна выбора файлов (только для type="file").
alt Текст Указывает альтернативный текст для изображения (только для type="image").
autocomplete
  • on
  • off
 Указывает, должен ли быть включен автоматический ввод для элемента <input>.
autofocus autofocus Указывает, должен ли элемент <input> автоматически получить фокус при загрузке страницы.
checked checked Указывает, должен ли элемент <input> быть предварительно выбран на загрузке страницы (для type="checkbox" или type="radio").
dirname inputname.dir Указывает направление текста, который будет передан.
disabled disabled Указывает, должен ли быть элемент <input> отключен.
form ID формы Указывает форму, к которой принадлежит элемент <input>.
formaction URL Указывает URL обработки файла ввода для передачи формы (для type="submit" и type="image").
formenctype
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain
 Определяет, как должны быть закодированы данные формы при их отправке на сервер (для type="submit" и type="image").
formmethod
  • get
  • post
 Определяет HTTP метод, используемый для отправки данных в URL действия (для type="submit" и type="image").
formnovalidate formnovalidate Определяет, что форму не следует проверять при отправке элемента формы.
formtarget
  • _blank
  • _self
  • _parent
  • _top
Название рамки 		Определяет, где будет отображаться полученный ответ после отправки формы (для type="submit" и type="image").
height Пиксели Определяет высоту элемента <input> (только для type="image").
list datalist_id Указывает на <datalist> элемент, содержащий предварительно определенные варианты для <input>.
max
  • число
  • Дата
 Определяет максимальное значение элемента <input>.
maxlength число Определяет максимальное количество символов, разрешенных для элемента <input>.
min
  • число
  • Дата
 Определяет минимальное значение элемента <input>.
minlength число Определяет минимальное количество символов, необходимых для элемента <input>.
multiple multiple Определяет, что пользователь может вводить несколько значений в элементе <input>.
name Текст Определяет имя элемента <input>.
pattern Регулярное выражение Определяет регулярное выражение для проверки значения элемента <input>.
placeholder Текст Определяет краткое подсказку о ожидаемом значении элемента <input>.
popovertarget ID элемента Определяет элемент всплывающего окна, который будет вызван (только для type="button").
popovertargetaction
  • hide
  • show
  • toggle
 Определяет, что произойдет с элементом всплывающего окна при нажатии на кнопку (только для type="button").
readonly readonly Определяет, что поле ввода является только для чтения.
required required Определяет, что перед отправкой формы необходимо заполнить поле ввода.
size число Определяет ширину элемента <input> (в единицах количества символов).
src URL URL, используемый для изображения кнопки отправки (только для type="image").
step
  • число
  • any
 Определяет интервал между законными числами в поле ввода.
type
  • button
  • checkbox
  • color
  • date
  • datetime-local
  • email
  • file
  • hidden
  • image
  • month
  • number
  • password
  • radio
  • range
  • reset
  • search
  • submit
  • tel
  • text
  • time
  • url
  • week
 Определяет тип элемента <input>, который будет отображаться.
value Текст Определяет значение элемента <input>.
width Пиксели Определяет ширину элемента <input> (только для type="image").

Глобальные атрибуты

<input> Тег также поддерживает Глобальные атрибуты в HTML.

Событийные атрибуты

<input> Тег также поддерживает Событийные атрибуты в HTML.

Стандартные настройки CSS

Нет.

Поддержка браузеров

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Поддержка Поддержка Поддержка Поддержка Поддержка

Связанные страницы

Учебник HTML:

Руководство по HTML DOM:

  • Предыдущая страница <img>
  • Следующая страница <ins>