Тег input
Создание сайта на CMS WordPress: обучение и хостинг
← Перейти к списку тегов

ТЕГ <INPUT>

Тег <input> используется для создания элементов формы. Эти элементы могут различаться в зависимости от атрибута type.

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

Синтаксис

<input type="">

Атрибуты

Атрибут Описание
accept Определяет типы файлов, которые принимает сервер (только для типа "file"). Возможные значения:
  • file_extension
  • audio/*
  • video/*
  • image/*
  • media_type
align Определяет выравнивание входного изображения (только для типа "image"). Возможные значения:
  • left
  • right
  • top
  • middle
  • bottom
autocomplete Указывает, должен ли элемент включать автозаполнение. Возможные значения:
  • on
  • off
autofocus Указывает, что элемент input должен автоматически получать фокус при загрузке страницы.
checked Указывает, что элемент должен быть предварительно выбран при загрузке страницы (для типов "checkbox" и "radio").
dirname Указывает, что направление текста будет отправлено на сервер.
disabled Указывает на то, что элемент отключен и пользователь не может с ним взаимодейтсвовать.
form Указывает к какой форме относится элемент. Значением атрибута должен быть id формы из того же документа. Этот атрибут позволяет размещать элементы формы не только внутри неё, но и в любом месте на странице.
formaction Указывает куда будут отправлены данные формы. Если атрибут определён, то он перепишет атрибут action родительской формы.
formenctype Определяет, как данные формы должны быть закодированы перед отправкой на сервер. Возможные значения:
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain
formmethod Если кнопка имеет тип "submit", атрибут определяет HTTP метод, который браузер использует, для отправки формы. Возможные значения:
  • get
  • post
formnovalidate Указывает, что данные формы не будут валидироваться при отправке. Если атрибут определён, то он не перепишет атрибут action родительской формы.
formtarget Указывает на то, где будет отображаться ответ после отправки формы.
  • _self будет отображаться в текущем окне браузера
  • _blank будет отображаться в новом окне браузера
  • _parent будет отображаться в родительской вкладке. Если родительской вкладки нет, то параметр будет вести себя как _self
  • _top будет отображаться в окне высшего уровня. Если окна высшего уровня нет, то параметр будет вести себя как _self
height Определяет высоту элемента (только для типа image)
list Относится к элементу <datalist>, который содержит предопределенные параметры для элемента <input>. Значением атрибута должен id элемента <datalist> из того же документа.
max Определяет максимальное значение для элемента.
maxlength Задает максимально допустимое количество символов в элементе.
min Определяет минимальное значение для элемента.
multiple Указывает, что пользователь может ввести более одного значения в элементе.
name Определяет имя элемента.
pattern Определяет регулярное выражение, с которым проверяется значение элемента.
placeholder Определяет краткую подсказку, которая описывает ожидаемое значение элемента.
readonly Устанавливает, что элемент не может изменяться пользователем.
required Указывает на то, что пользователь должен выбрать значение для того чтобы отправить форму.
size Определяет ширину элемента.
src Определяет адрес изображения (для типа image).
step Определяет шаг приращения для числовых полей.
type Определяет тип элемента. Возможные значения:
  • button
  • checkbox
  • color
  • date
  • datetime-local
  • email
  • file
  • hidden
  • image
  • month
  • number
  • password
  • radio
  • range
  • reset
  • search
  • submit
  • tel
  • text
  • time
  • url
  • week
value Определяет значение элемента.
width Определяет ширину элемента в пикселях (только для типа image).

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

Песочница

Код в песочнице можно редактировать и видеть результат в реальном времени:

<input type="text" placeholder="Текстовое поле">
<hr>
<label><input type="radio" name="radios" >Выбор 1</label>
<label><input type="radio" name="radios" >Выбор 2</label>
<hr>               
<label><input type="checkbox" >Выбор 1</label>
<label><input type="checkbox" >Выбор 2</label>
HTML
← Перейти к списку тегов