Тег html input – Формы в html для сайта — теги form, input и их атрибуты | Создание сайтов и заработок в сети

Тег | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
3.0+ 1.0+ 4.0+ 1.0+ 1.0+ 1.0+ 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <input> является одним из разносторонних элементов формы и позволяет создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем. Главным образом <input> предназначен для создания текстовых полей, различных кнопок, переключателей и флажков. Хотя элемент <input> не требуется помещать внутрь контейнера <form>, определяющего форму, но если введенные пользователем данные должны быть отправлены на сервер, где их обрабатывает серверная программа, то указывать <form> обязательно. То же самое обстоит и в случае обработки данных с помощью клиентских приложений, например, скриптов на языке JavaScript.

Основной атрибут тега <input>, определяющий вид элемента — type. Он позволяет задавать следующие элементы формы: текстовое поле (text), поле с паролем (password), переключатель (radio), флажок (checkbox), скрытое поле (hidden), кнопка (button), кнопка для отправки формы (submit), кнопка для очистки формы (reset), поле для отправки файла (file) и кнопка с изображением (image). Для каждого элемента существует свой список атрибутов, которые определяют его вид и характеристики. Кроме того, в HTML5 добавлено еще более десятка новых элементов.

Синтаксис

HTML
<input атрибуты>
XHTML
<input атрибуты />

Атрибуты

accept
Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов.
accesskey
Переход к элементу с помощью комбинации клавиш.
align
Определяет выравнивание изображения.
alt
Альтернативный текст для кнопки с изображением.
autocomplete
Включает или отключает автозаполнение.
autofocus
Устанавливает фокус в поле формы.
border
Толщина рамки вокруг изображения.
checked
Предварительно активированный переключатель или флажок.
disabled
Блокирует доступ и изменение элемента.
form
Связывает поле с формой по её идентификатору.
formaction
Определяет адрес обработчика формы.
formenctype
Устанавливает способ кодирования данных формы при их отправке на сервер.
formmethod
Сообщает браузеру каким методом следует передавать данные формы на сервер.
formnovalidate
Отменяет встроенную проверку данных на корректность.
formtarget
Определяет окно или фрейм в которое будет загружаться результат, возвращаемый обработчиком формы.
list
Указывает на список вариантов, которые можно выбирать при вводе текста.
max
Верхнее значение для ввода числа или даты.
maxlength
Максимальное количество символов разрешенных в тексте.
min
Нижнее значение для ввода числа или даты.
multiple
Позволяет загрузить несколько файлов одновременно.
name
Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
pattern
Устанавливает шаблон ввода.
placeholder
Выводит подсказывающий текст.
readonly
Устанавливает, что поле не может изменяться пользователем.
required
Обязательное для заполнения поле.
size
Ширина текстового поля.
src
Адрес графического файла для поля с изображением.
step
Шаг приращения для числовых полей.
tabindex
Определяет порядок перехода между элементами с помощью клавиши Tab.
type
Сообщает браузеру, к какому типу относится элемент формы.
value
Значение элемента.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Не требуется.

Пример

HTML5IECrOpSaFx6

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег INPUT</title>
 </head>
 <body>

 <form name="test" method="post" action="input1.php">
  <p><b>Ваше имя:</b><br>
   <input type="text" size="40">
  </p>
  <p><b>Каким браузером в основном пользуетесь:</b><Br>
   <input type="radio" name="browser" value="ie"> Internet Explorer<Br>
   <input type="radio" name="browser" value="opera"> Opera<Br>
   <input type="radio" name="browser" value="firefox"> Firefox<Br>
  </p>
  <p>Комментарий<Br>
   <textarea name="comment" cols="40" rows="3"></textarea></p>
  <p><input type="submit" value="Отправить">
   <input type="reset" value="Очистить"></p>
 </form>

 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид элементов формы в браузере

Тег | HTML справочник

АтрибутЗначениеОписание
acceptfile_extension
audio/*
image/*
video/*
media_type
Задает типы файлов, которые сервер принимает (файлы, которые могут быть загружены для отправки на сервер). Атрибут используется только для <input type = "file">.
alignleft
right
top
middle
bottom
Не поддерживается в HTML5.
Определяет выравнивание ввода изображения (только для <input type = "image">).
alttextОпределяет альтернативный текст для изображений (только для <input type = "image">).
autocompleteon
off
tokens
Указывает должен ли элемент иметь автозаполнение (заполнение автоматически завершается в браузере). По умолчанию автозаполнение включено.
autofocusautofocusЛогический атрибут, который указывает, что элемент <input> должен автоматически получать фокус при загрузке страницы.
checkedcheckedЯвляется логическим атрибутом и указывает, что элемент должен быть предварительно выбран при загрузке страницы (только для <input type = "checkbox"> и <input type = "radio">).
disableddisabledЯвляется логическим атрибутом и указывает, что элемент должен быть отключен (недоступен для взаимодействия с пользователем).
formform_idЗадает форму (элемент <form>) к которой элемент управления принадлежит. В качестве значения должен выступать идентификатор формы (id) в этом же документе.
formactionURLУказывает URL файла, который будет обрабатывать (контролировать) входную информацию после отправки формы (только для <input type = "image"> и <input type = "submit">).
formenctypeapplication/x-www-form-urlencoded
multipart/form-data
text/plain
Определяет, как данные формы должны быть закодированы при передаче на сервер (только для <input type = "image"> и <input type = "submit">).
formmethodget
post
Определяет метод HTTP для отправки данных (только для <input type = "image"> и <input type = "submit">).
formnovalidate
formnovalidate
Указывает, что проверка данных на корректность, введенных пользователем в форму не производится (только для <input type = "submit">).
formtarget_blank
_self
_parent
_top
framename
При помощи атрибута мы задаём браузеру, где показать ответ, полученный после отправки формы (вкладка, текущее окно, или фрейм). По умолчанию установлено значение _self - отображает ответ в текущем окне. Атрибут используется только только для <input type = "image"> и <input type = "submit">.
heightpixelsЗадает высоту элемента (только для <input type = "image">).
listdatalist_idОпределяет список предопределенных вариантов, который будет предложен пользователю. Значение атрибута должно соответствовать идентификатору элемента <datalist>.
maxnumber
date
Определяет максимальное значение для элемента (значение может быть как числовым, так и в виде даты).
maxlengthnumberУказывает максимально допустимое количество символов в элементе. Только для элементов управления следующих типов: text, search, tel, url, email и password (остальные игнорируются).
minnumber
date
Определяет минимальное значение для элемента (значение может быть как числовым, так и в виде даты).
multiplemultipleУказывает, что пользователь может ввести более одного значения в элементе (только для <input type = "file"> и <input type = "email">). Является логическим атрибутом.
nametextЗадает имя для элемента <input>.
patternregexpЗадает регулярное выражение, которое сверяется со значением введёным в элементе. Синтаксис регулярного выражения соответствует языку JavaScript. Только для элементов управления следующих типов: text, search, tel, url, email и password (остальные игнорируются).
placeholdertextУказывает подсказку, которая описывает ожидаемое значение для ввода в элемент. Подсказка отображается в поле ввода до того, как пользователь вводит значение. Атрибут может быть использован с полями данных определенных типов (атрибут type) со значениями email, password, search, tel, text и url).
readonlyreadonlyЛогический атрибут, который указывает, что поле ввода доступно только для чтения.
requiredrequiredЛогический атрибут, который указывает, что поле ввода должно быть заполнено перед отправкой формы.
sizenumberОпределяет ширину для элемента (в символах). Только для элементов управления следующих типов: text, search, tel, url, email и password (остальные игнорируются). Значение по умолчанию 20 символов.
srcURLЗадаёт URL-адрес изображения, которое используется в качестве кнопки отправки (только для <input type = "image">).
stepnumberОпределяет размер "шага" для поля ввод. Например, если значение атрибута 2, то значение элемента управления будет иметь шаг 2 и увеличиваться, или уменьшаться на 2 (..-4,-2,0,2, 4..). Только для элементов управления следующих типов: number, range, tel, date, date, time, datetime-local, month, time и week (остальные игнорируются). Значение по умолчанию 1.
typebutton
checkbox
color
date
datetime
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week
Поле ввода принимает вид, в зависимости от применённого значения.
valuetextЗадает значение для элемента.
widthpixelsЗадает ширину элемента (только для <input type = "image">).

| HTML | WebReference

<input> (от англ. input — ввод) является одним из разносторонних элементов формы и позволяет создавать разные части интерфейса и обеспечивать взаимодействие с пользователем. Главным образом <input> предназначен для создания текстовых полей, различных кнопок, переключателей и флажков.

Основной атрибут <input>, определяющий вид элемента — type. Он позволяет задавать следующие элементы формы: текстовое поле (text), поле с паролем (password), переключатель (radio), флажок (checkbox), скрытое поле (hidden), кнопка (button), кнопка для отправки формы (submit), кнопка для очистки формы (reset), поле для отправки файла (file), кнопка с изображением (image) и др. Для каждого элемента существует свой список атрибутов, которые определяют его вид и характеристики. Кроме того, в HTML5 добавлено ещё более десятка новых элементов.

Закрывающий тег

Атрибуты

accept
Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов.
align
Определяет выравнивание изображения.
alt
Альтернативный текст для кнопки с изображением.
autocomplete
Включает или отключает автозаполнение.
autofocus
Устанавливает фокус в поле формы.
border
Толщина рамки вокруг изображения.
checked
Предварительно активированный переключатель или флажок.
dirname
Параметр, который передаёт на сервер направление текста.
disabled
Блокирует доступ и изменение элемента.
form
Связывает поле с формой по её идентификатору.
formaction
Определяет адрес обработчика формы.
formenctype
Устанавливает способ кодирования данных формы при их отправке на сервер.
formmethod
Сообщает браузеру каким методом следует передавать данные формы на сервер.
formnovalidate
Отменяет встроенную проверку данных на корректность.
formtarget
Определяет окно или фрейм в которое будет загружаться результат, возвращаемый обработчиком формы.
list
Указывает на список вариантов, которые можно выбирать при вводе текста.
max
Верхнее значение для ввода числа или даты.
maxlength
Максимальное количество символов разрешённых в тексте.
min
Нижнее значение для ввода числа или даты.
minlength
Минимальное количество символов разрешённых в тексте.
multiple
Позволяет загрузить несколько файлов одновременно.
name
Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
pattern
Устанавливает шаблон ввода.
placeholder
Выводит подсказывающий текст.
readonly
Устанавливает, что поле не может изменяться пользователем.
required
Обязательное для заполнения поле.
size
Ширина текстового поля.
src
Адрес графического файла для поля с изображением.
step
Шаг приращения для числовых полей.
type
Сообщает браузеру, к какому типу относится элемент формы.
value
Значение элемента.

Также для этого элемента доступны универсальные атрибуты и события.

Пример

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>INPUT</title>
 </head>
 <body>
 <form name="test" method="post" action="input1.php">
  <p><b>Ваше имя:</b><br>
   <input type="text" size="40" name="nick">
  </p>
  <p><b>Каким браузером в основном пользуетесь:</b><Br>
   <input type="radio" name="browser" value="ie"> Internet Explorer<Br>
   <input type="radio" name="browser" value="opera"> Opera<Br>
   <input type="radio" name="browser" value="firefox"> Firefox<Br>
  </p>
  <p>Комментарий<Br>
   <textarea name="comment" cols="40" rows="3"></textarea></p>
  <p><input type="submit" value="Отправить">
   <input type="reset" value="Очистить"></p>
 </form>
 </body>
</html>

Результат данного примера показан на рис. 1.

Вид элементов формы в браузере

Рис. 1. Вид элементов формы в браузере

Спецификация ?

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor's draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

×

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — элемент полностью поддерживается браузером;
  •  — элемент браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 09.10.2018

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

Тег | HTML справочник

Поддержка браузерами

Описание

HTML тег <input> - является пустым элементом и содержит только атрибуты. Используется в пределах элемента <form>, объявляя элементы управления для пользовательского ввода, которые позволяют пользователю вводить различные данные. Связать текст с определенным элементом формы(сделать его активным) можно с помощью тега <label>.

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

Атрибуты

accept:
Указывает типы файлов, которые могут быть переданы на сервер через поле загрузки файлов. Если тип загружаемого файла не совпадает ни с одним из типов файлов, указанных в значении, то файл будет игнорироваться. При указании нескольких значений, они должны разделяться запятой. Атрибут accept работает только совместно с атрибутом type="file", его возможные значения:
  • audio/* - принимаются все звуковые файлы.
  • video/* - принимаются все видео файлы.
  • image/* - принимаются все файлы изображений.
  • MIME_тип - принимается допустимый MIME-тип без параметров.
Совет: не рекомендуется использовать этот атрибут, как инструмент для проверки типа загружаемого файла. Загруженные файлы должны проверятся на сервере. Пример »

Примечание: атрибут accept не поддерживается в IE9 и более ранних версиях.

alt:
Предоставляет альтернативный текст для пользователя, если он по каким-либо причинам не может просматривать изображения. Атрибут alt может использоваться только совместно с атрибутом type="image".
autocomplete:
Определяет, будет ли включено автозаполнение для поля ввода данных:
  • on - браузер автоматически показывает значения вводимые ранее пользователем (значение по умолчанию).
  • off - пользователь должен сам вводить значения для поля при каждом использовании формы. Ранее вводимые значения показываться не будут.

Примечание: атрибут autocomplete работает со следующими значениями атрибута type элемента <input>: text, search, url, tel, email, password, datepickers, range и color.

autofocus:
Указывает браузеру, что элемент <input> должен получить фокус после загрузки страницы. Значения для логического атрибута autofocus можно задавать следующими способами:

<input autofocus>
<input autofocus="autofocus">
<input autofocus="">

Примечание: атрибут autofocus не поддерживается в IE9 и более ранних версиях.

checked:
Указывает, что данный элемент будет выбран по умолчанию при загрузке страницы. Работает только с атрибутом type="checkbox" или type="radio". Значения для логического атрибута checked можно задавать следующими способами:

<input checked>
<input checked="checked">
<input checked="">
Пример »
disabled:
Указывает, что элемент <input> должен быть выключен (выключенный элемент является неактивным). Значения для логического атрибута disabled можно задавать следующими способами:

<input disabled>
<input disabled="disabled">
<input disabled="">
Пример »

Примечание: атрибут disabled не работает с <input type="hidden">.

form:
Определяет форму с которой связан элемент <input>. В качестве значения атрибута выступает идентификатор элемента <form>. Этот атрибут позволяет размещать элемент <input> в произвольном месте документа, а не только в качестве потомка элемента <form>. Элемент <input> может быть связан только с одной формой.

Если атрибут form не указан, то элемент <input> должен быть потомком элемента <form>.

Примечание: атрибут form не поддерживается в IE.

formaction:
Указывает URL-адрес файла, который будет обрабатывать данные ввода, при отправке формы. Атрибут formaction используется только с type="submit" или type="image", и переопределяет атрибут action элемента <form>.

Примечание: атрибут formaction не поддерживается в IE9 и более ранних версиях.

formenctype:
Определяет способ кодирования данных формы при отправке на сервер. Может использоваться только совместно с атрибутом method="post" элемента <form>. Возможные значения:
  • application/x-www-form-urlencoded - значение по умолчанию: все символы кодируются перед отправкой (пробелы преобразуются в символ "+", а специальные символы в значения ASCII HEX).
  • multipart/form-data - символы не кодируются. Используется для элементов <input>, у которых в атрибуте type установлено значение "file".
  • text/plain - пробелы преобразуются в символ "+", но не кодирует в шестнадцатеричные значения спецсимволы, такие как апострофы.
Атрибут formenctype используется только совместно с type="submit" или type="image", и переопределяет атрибут enctype элемента <form>.

Примечание: атрибут formenctype не поддерживается в IE9 и более ранних версиях.

formmethod:
Определяет HTTP метод для отправки данных на указанный URL (для type="submit" и type="image"):
  • get - данные формы добавляются в конце URL-адреса: URL-адрес?имя=значение?имя=значение (значение по умолчанию).
  • post - отправляет данные формы, как HTTP после транзакции.
Атрибут formmethod может использоваться только совместно с type="submit" или type="image", и переопределяет атрибут method элемента <form>.

Примечание: атрибут formmethod не поддерживается в IE9 и более ранних версиях.

formnovalidate:
Указывает, что данные введенные в поле ввода не будут проверяться перед отправкой. Возможные значения логического атрибута novalidate:

<input formnovalidate>
<input formnovalidate="formnovalidate">
<input formnovalidate="">

Примечание: атрибут formnovalidate не поддерживается в IE9 и более ранних версиях, и в Safari.

formtarget:
Определяет имя фрейма или ключевое слово, которое указывает место для отображения ответа, полученного после отправки формы:
  • _blank - открывает документ в новом окне или вкладке.
  • _self - открывает документ в той же директории, где располагается ссылка (значение по умолчанию).
  • _parent - открывает документ в родительском фрейме.
  • _top - открывает документ во всю ширину окна.
  • имя_фрейма - открывает документ в iframe, имя которого было указано в качестве значения.
Атрибут formtarget может использоваться только совместно с type="submit" или type="image", и переопределяет атрибут target элемента <form>.

Примечание: атрибут formtarget не поддерживается в IE9 и более ранних версиях.

height:
Определяет высоту элемента в пикселях, используется только с <input type="image"> (пример:).
list:
Устанавливает взаимосвязь между элементом <datalist> и <input>, позволяя для поля ввода указать список предварительно определенных вариантов. В качестве значения для атрибута выступает идентификатор элемента <datalist>. Пример »

Примечание: атрибут list не поддерживается в IE9 и более ранних версиях, и в Safari.

max:
Указывает максимальное значение для ввода числа или даты. Можно использовать атрибут max совместно с атрибутом min для создания диапазона допустимых значений.
  • число - указывает максимально допустимое значение.
  • дата - указывает максимальную дату, разрешенную для ввода.
Атрибуты min и max работают со следующими значениями атрибута type: number, range, date, datetime, datetime-local, month, time и week.

Примечание: атрибут max не поддерживается в IE9 и более ранних версиях, и в Firefox.

maxlength:
Определяет максимальное количество символов, которое можно будет ввести в поле ввода. Этот атрибут можно использовать для ограничения количества символов, которое разрешается пользователю ввести в данное поле. Например при запросе года можно ограничить количество символов, установив значение атрибута maxlength равным 4. Пример »
min:
Определяет минимальное значение для ввода числа или даты.
  • число - указывает минимально допустимое значение.
  • дата - указывает минимальную дату, разрешенную для ввода.

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.php">

  Введите дату до 1980-01-01:
  <input type="date" name="bday" max="1979-12-31"><br>

  Введите дату после 2000-01-01:
  <input type="date" name="bday" min="2000-01-02"><br>

  Введите число (от 1 до 5):
  <input type="number" name="quantity" min="1" max="5"><br>

  <input type="submit">
  
</form>

</body>
</html>

Примечание: атрибут min не поддерживается в IE9 и более ранних версиях, и в Firefox.

multiple:
Указывает, что пользователь может ввести более одного значения. Атрибут multiple работает только с type="email" и type="file". Возможные значения логического атрибута multiple:

<input multiple>
<input multiple="multiple">
<input multiple="">
Пример »

Примечание: атрибут multiple не поддерживается в IE9 и более ранних версиях.

name:
Атрибут name определяет имя элемента, оно отправляется на сервер вместе с введенными в поле данными. Имя может использоваться в JavaScript для ссылки на элемент или для идентификации переданных данных на сервере (например, при обработке данных на сервере, имя элемента позволяет определить, что было введено в качестве имени пользователя, а что - в качестве пароля).
pattern:
Указывает регулярное выражение, которое определяет синтаксис данных, ввод которых должен быть разрешен в поле ввода. Шаблон регулярного выражения должен соответствовать введенному значению целиком. Для описания работы шаблона можно воспользоваться глобальным атрибутом title. Атрибут pattern работает со следующими значениями атрибута type: text, search, url, tel, email и password.

Примечание: атрибут pattern не поддерживается в IE9 и более ранних версиях, и в Safari.

placeholder:
Определяет короткую подсказку, которая описывает ожидаемое значение для поля ввода (пример: образец значения или краткое описание ожидаемого формата). Подсказка отображается в поле ввода, когда оно пустое и исчезает, когда пользователь начинает вводить данные или когда поле получает фокус (разница в работе атрибута зависит от используемого браузера), если поле теряет фокус и при этом данные в поле не были введены, то в поле ввода вновь отобразится подсказка.

Атрибут placeholder работает со следующими значениями атрибута type: text, search, url, tel, email и password. Пример »

Примечание: атрибут placeholder не поддерживается в IE9 и более ранних версиях.

readonly:
Указывает, что поле ввода может быть использовано только для чтения и не может быть изменено (однако, текст можно выделить и скопировать). Возможные значения логического атрибута readonly:

<input readonly>
<input readonly="readonly">
<input readonly="">
Пример »
required:
Указывает, что поле ввода необходимо заполнить перед отправкой формы. Если пользователь попытается отправить форму, не введя в поле никакого значения, то на экране отобразится предупреждающее сообщение. Это сообщение будет отличаться по содержанию и стилизации в зависимости от браузера и типа поля ввода.

Атрибут required работает со следующими значениями атрибута type: text, search, url, tel, email, password, date pickers, number, checkbox, radio и file. Возможные значения логического атрибута required:


<input required>
<input required="required">
<input required="">

Примечание: атрибут required не поддерживается в IE9 и более ранних версиях, и в Safari.

size:
Указывает ширину поля ввода (в качестве единицы измерения выступает количество видимых символов). Так, например, значение 3 создает поле ввода текста, ширина которого достаточна для отображение трех введенных символов (хотя пользователь при желании может ввести и большее количество). Атрибут size работает со следующими значениями атрибута type: text, search, tel, url, email и password. Для указания максимального количества вводимых знаков, воспользуйтесь атрибутом maxlength. Пример »
src:
Указывает путь к графическому файлу для поля с изображением. Атрибут src является обязательным для элементов <input> с type="image" и может использоваться только с ними.
step:
Определяет интервал чисел для элемента <input>. Пример: если step="3", то возможные значения чисел могут быть: -3, 0, 3, 6 и тд. Атрибут step может использоваться совместно с атрибутами max и min, для создания диапазона допустимых значений.

Примечание: атрибут step не поддерживается в IE9 и более ранних версиях, и в Firefox.

type:
Указывает, какой тип элемента управления будет отображен. По умолчанию браузеры используют <input type="text">, если не указано другое или неизвестное значение атрибута type. Таким образом, браузеры, не поддерживающие новые значения, просто заменят их значением по умолчанию и отобразят обычное текстовое поле ввода.
  • button - определяет активную кнопку (главным образом используется с JavaScript для активации скрипта).
  • checkbox - определяет элементы управления флажки, которые могут быть либо установлены, либо сняты. Можно установить сразу несколько флажков или не устанавливать ни один из них. Это отличает флажки от радио-кнопок (type="radio").
  • color - генерирует палитру цветов, давая возможность пользователям выбирать значения цветов в шестнадцатеричном формате.
  • date - позволяет получить доступ к встроенному в браузер виджету выбора даты.
  • datetime - определяет элемент управления датой и временем (год, месяц, день, час, минута, секунда и доли секунды, основанный на часовом поясе UTC).
  • datetime-local - определяет элемент управления датой и временем (год, месяц, день, час, минуты, секунды и доли секунды (без часового пояса)).
  • email - определяет поле для адреса электронной почты.
  • file - определяет элемент управления с кнопкой "Обзор", для выбора и загрузки файлов.
  • hidden - определяет скрытые поля ввода.
  • image - определяет изображение, как кнопку для отправки.
  • month - позволяет выбрать один месяц, после чего обеспечит ввод данных в виде года и месяца (например: 2014-05).
  • number - определяет поле для ввода чисел.
  • password - определяет поле для ввода пароля (замаскированные символы).
  • radio - создает радио-кнопки, которые являются взаимоисключающими, если выбрать одну радио-кнопку, то все остальные становятся неактивными.
  • range - создает элемент управления ползунок, диапазон ползунка по умолчанию - от 0 до 100. Для изменения диапазона используются атрибуты min и max с желаемыми значениями. Обратите внимание, что данный элемент управления не отображает текущее значение.
  • reset - определяет кнопку сброс (сбрасывает все поля формы в значения по умолчанию).
  • search - определяет текстовое поле для ввода строки поиска.
  • submit - определяет кнопку "Отправить".
  • tel - определяет поле для ввода телефонного номера.
  • text - определяет однострочное текстовое поле (ширина по умолчанию составляет 20 символов).
  • time - допускает ввод значений в 24-часовом формате, например: 12:34. В поддерживающих браузерах элемент управления отображается как числовое поле ввода со значением, изменяемым с помощью мыши, и допускает ввод только значений времени.
  • url - определяет поле для ввода URL-адреса.
  • week - позволяет выбрать одну неделю, после чего обеспечит ввод данных в формате года и недели (например: 2014-W15).
Пример »
value:
Указывает значение элемента <input>, и используется по-разному для разных типов ввода:
  • Для "button", "reset", и "submit" - определяет текст на кнопке
  • Для "text", "password", "hidden" - определяет начальное (по умолчанию) значение поля ввода
  • Для "checkbox", "radio", "image" - определяет значение, связанное с вводом (значение, которое передается при отправке)
Атрибут value не может использоваться с type="file", и обязательно должен присутствовать при type="checkbox" и type="radio". Пример »
width:
Определяет ширину элемента в пикселях, используется только с <input type="image"> (пример:).

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

Стиль по умолчанию

Нет.

Пример


<form action="demo_form.asp">
  Имя: <input type="text" name="fname"><br>
  Фамилия: <input type="text" name="lname"><br>
  <input type="submit" value="Отправить">
</form> 

Результат данного примера в окне браузера:

Пример использования тега <input>

| Справочник HTML



Элемент <input> (от англ. "input" ‒ «ввод») является основным элементом формы (HTML тег <form>) и определяет пользовательское поле для ввода информации.

Поле ввода принимает различный вид, в зависимости от значения атрибута type, применённого к данному элементу. Это могут быть разнообразные кнопки, поля ввода текста, пароля или имени файла, переключатели, флажки и т.д.

Так как тег <input> является встроенным, то его не обязательно заключать в форму (тег <form>), но если вы отправляете данные на сервер, то это необходимо сделать. А вот, если вы обращаетесь к тегу <input>, например, при помощи скриптов, то достаточно его разместить внутри любого элемента, который может содержать инлайн-теги.

Примечание: Для определения метки для элемента <input> используется элемент <label>.

Примечание: Тег <input> не может содержать какой-либо контент, он может содержать только атрибуты.

Синтаксис

<input type="...">

Закрывающий тег

Не требуется.

Атрибуты

type
Основной атрибут, определяет тип элемента ввода. Если атрибут не указан, то по умолчанию используется значение "text".
Возможные значения:
  • button – определяет активную кнопку с надписью.
  • checkbox – определяет элементы управления флажки.
  • color – генерирует палитру цветов, давая возможность пользователям выбирать значения цветов в шестнадцатеричном формате.
  • date – определяет поле для ввода календарной даты (год, месяц, день).
  • datetime – определяет поле для ввода даты и времени.
  • datetime-local – определяет элемент управления датой и временем (год, месяц, день, час, минуты, секунды и доли секунды (без часового пояса)).
  • email – определяет поле для адреса электронной почты.
  • file – определяет элемент управления с кнопкой "Обзор", для выбора и загрузки файлов.
  • hidden – определяет скрытое поле ввода (не отображается на Web-странице).
  • image – определяет изображение, как кнопку для отправки данных формы на сервер. Вместе с этим значением нужно использовать атрибут src, чтобы определить адрес изображения и атрибут alt для определения альтернативного текста. Можно также задать атрибуты width и height, чтобы определить размер изображения в пикселях.
  • month – позволяет выбрать один месяц, после чего обеспечит ввод данных в виде года и месяца (например: 2017-07).
  • number – определяет поле для ввода чисел.
  • password – определяет поле для ввода пароля (замаскированные символы).
  • radio – создает радио-кнопки, которые являются взаимоисключающими, если выбрать одну радио-кнопку, то все остальные становятся неактивными. Атрибут checked указывает, что вариант выбран по умолчанию.
  • range – создает ползунок для ввода чисел в указанном диапазоне. Если соответствующие атрибуты не указаны, то значения по умолчанию:
    • min = 1
    • max = 100
    • value = min + ( max - min ) / 2, или min , если max < min
    • step = 1
  • reset – создает кнопку сброса данных формы в первоначальное состояние.
  • search – определяет текстовое поле для ввода строки поиска.
  • submit – определяет кнопку "Отправить" для отправки данных формы на сервер.
  • tel – определяет поле для ввода телефонного номера.
  • text – определяет однострочное текстовое поле (ширина по умолчанию составляет 20 символов).
  • time – определяет поле для ввода времени в 24-часовом формате, например 17:30.
  • url – определяет поле для ввода URL-адреса.
  • week – позволяет выбрать одну неделю, после чего обеспечит ввод данных в формате года и недели (например: 2017-W15).

Не все браузеры поддерживают типы, добавленные в HTML5.
Если браузер не поддерживает какой-то из новых типов, то он будет считать, что это тип text.


accept
Устанавливает типы/форматы файлов, которые можно прикреплять к форме (отправлять на сервер). Атрибут используется только для <input type = "file">.

alignУстарел
Определяет выравнивание ввода изображения (только для <input type = "image">).

alt
Альтернативный текст для кнопки с изображением.

autocompleteHTML5
Включает или отключает автозаполнение.

autofocusHTML5
Указывает, что элемент <input> должен автоматически получать фокус при загрузке страницы.

borderУстарел
Толщина рамки вокруг изображения.

checked
Указывает, что элемент должен быть предварительно выбран при загрузке страницы (только для <input type = "checkbox"> и <input type = "radio">).

dirnameHTML5
Параметр, который передаёт на сервер направление текста.

disabled
Блокирует доступ и изменение элемента.

formHTML5
Задает форму (элемент <form>) к которой элемент управления принадлежит. В качестве значения должен выступать идентификатор формы (id) в этом же документе.

formactionHTML5
Указывает URL файла, который будет обрабатывать (контролировать) входную информацию после отправки формы (только для <input type = "image"> и <input type = "submit">).

formenctypeHTML5
Определяет, как данные формы должны быть закодированы при передаче на сервер (только для <input type = "image"> и <input type = "submit">).

formmethodHTML5
Определяет метод HTTP для отправки данных (только для <input type = "image"> и <input type = "submit">).

formnovalidateHTML5
Отменяет встроенную проверку данных на корректность (только для <input type = "submit">).

formtargetHTML5
Определяет окно или фрейм в которое будет загружаться результат, возвращаемый обработчиком формы. По умолчанию установлено значение _self - отображает ответ в текущем окне. Атрибут используется только только для <input type = "image"> и <input type = "submit">.

listHTML5
Указывает на список вариантов, которые можно выбирать при вводе текста. Значение атрибута должно соответствовать идентификатору элемента <datalist>.

maxHTML5
Верхнее значение для ввода числа или даты.

maxlengthHTML5
Указывает максимально допустимое количество символов в элементе. Только для элементов управления следующих типов: text, search, tel, url, email и password (остальные игнорируются).

min
Нижнее значение для ввода числа или даты.

minlengthHTML5
Минимальное количество символов разрешённых в тексте. Только для элементов управления следующих типов: text, search, tel, url, email и password.

multipleHTML5
Указывает, что пользователь может ввести более одного значения в элементе (только для <input type = "file"> и <input type = "email">).

name
Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.

patternHTML5
Устанавливает шаблон ввода с которым сверяется значение введённое в элементе. Синтаксис регулярного выражения соответствует языку JavaScript. Только для элементов управления следующих типов: text, search, tel, url, email и password (остальные игнорируются).

placeholderHTML5
Выводит подсказывающий текст. Атрибут может быть использован с полями данных определенных типов (атрибут type) со значениями email, password, search, tel, text и url).

readonly
Указывает, что поле ввода доступно только для чтения.

requiredHTML5
Обязательное для заполнения поле.

size

src
Задаёт URL-адрес изображения, которое используется в качестве кнопки отправки (только для <input type = "image">).

stepHTML5
Шаг приращения для числовых полей. Только для элементов управления следующих типов: number, range, tel, date, date, time, datetime-local, month, time и week (остальные игнорируются). Значение по умолчанию 1.

value
Значение элемента.

widthHTML5

Элемент поддерживает глобальные атрибуты и события.

Стилизация по умолчанию

Нет.

Различия между HTML 4.01 и HTML5

В HTML5 атрибут align не поддерживается.

В HTML5 у тега <input появилось несколько новых атрибутов, а у атрибута type несколько новых значений.

Пример использования:

HTML форма с тремя полями ввода данных — двумя текстовыми и одной кнопкой отправки данных:

Пример HTML:

Попробуй сам
<form action="action_form.php">
   Имя: <input type="text" name="firstname"><br>
   Фамилия: <input type="text" name="lastname"><br>
   <input type="submit" value="Отправить">
</form>

Спецификации

Поддержка браузерами

Определяет ширину для элемента (в символах). Только для элементов управления следующих типов: text, search, tel, url, email и password (остальные игнорируются). Значение по умолчанию 20 символов.Задает ширину элемента (только для <input type = "image">).
Элемент
<input> 2+ 1+ 1+ 1+ 1+ 1+
Элемент
<input> 1+ 1+ 6+ 1+

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

Как создать переключатели (<input type="radio">):
Использование переключателей

Как создать флажки (<input type="checkbox">):
Использование флажков

Как создать кнопку отправки данных (<input type="submit">):
Использование submit

Как создать ползунковый регулятор (<input type="range">):
Регулятор

Как создать поле для поиска (<input type="search">):
Поле для поиска


Учебник HTML

HTML уроки: HTML элемент input

HTML Элементы



Атрибут type тега | HTML справочник

ЗначениеОписание
button
Определяет кнопку. Как правило, используется в основном совместно с языком программирования JavaScript для активации скрипта.
checkbox
включено
выключено
Элемент графического пользовательского интерфейса, позволяющий пользователю управлять параметром с двумя состояниями — ☑ включено и ☐ выключено. Элемент также называют флажок, флаговая кнопка, чекбокс, галочка.
color
Элемент управления для задания цвета (определяет палитру цветов).
date
Элемент управления для ввода даты в формате DD.MM.YYYY (день, месяц и год). В элементе не указывается время.
datetime-local
Элемент управления для ввода даты в формате DD.MM.YYYYThh:mm (день, месяц, год, часы и минуты). В элементе не указывается часовой пояс.
email
Определяет поле для ввода адреса электронной почты.
file
Элемент управления, который позволяет пользователю выбрать файл. Используйте атрибут accept HTML тега <input>, чтобы определить типы файлов, которые пользователь может выбрать.
hidden
Элемент управления, который определяет скрытое поле ввода.
image
Элемент управления, который определяет графическую кнопку "отправить форму" (значение submit). По аналогии с тегом <img> вы должны использовать атрибут src, чтобы задать путь к изображению и атрибут alt, чтобы указать альтернативный текст, если изображение не будет загружено по каким-то причинам. Размеры изображения задаются атрибутами width (ширина) и height (высота).
month
Элемент управления для ввода месяца и года (Month YYYY). В элементе не указывается часовой пояс.
number
Элемент управления для ввода числа с плавающей точкой.
password
Определяет однострочное текстовое поле, предназначенное для ввода пароля (символы, введенные внутри поля скрываются). Используйте атрибут maxlength HTML тега <input>, чтобы задать максимальную длину значения, которое может быть введено в поле.
radio
выбрано
не выбрано
Элемент графического пользовательского интерфейса, который позволяет пользователю выбрать одно значение из предопределенной группы значений. Элемент, как правило, называют радиокнопка (radio button) или переключатель.
range
Элемент управления для ввода номера (регулятор), в котором ввод точного значения не является важным. Этот тип управления использует следующие значения по умолчанию, если атрибуты не указаны:
  • min = "0"
  • max = "100"
  • value = min + (max - min) / 2, или min (если max меньше чем min)
  • step = "1"
reset
Определяет кнопку сброса содержимого формы до значений, установленных по умолчанию.
search
Определяет однострочное текстовое поле для ввода строки поиска
submit
Определяет кнопку отправки формы
tel
Определяет элемент управления для ввода телефонного номера.
text
Определяет однострочное текстовое поле (по умолчанию имеет ширину в 20 символов).
Это значение по умолчанию.
time
Определяет элемент управления для ввода времени без указания часового пояса (hh:mm).
url
Определяет поле для ввода абсолютного URL-адреса.
week
Определяет элемент управления для ввода порядкого номера недели в году и самого года (Неделя NN, YYYY). В элементе не указывается часовой пояс.

HTML Тег ввод


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

Пример

<form action="/action_page.php">
  Имя: <input type="text" name="fname"><br>
  Фамилия: <input type="text" name="lname"><br>
  <input type="submit" value="Отправить">
</form>

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

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

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

Элементы <input> используются в элементе <form> для объявления входных элементов управления, которые позволяют пользователям вводить данные.

Поле ввода может отличаться во многих отношениях, в зависимости от атрибута type.


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

Элемент
<input> Да Да Да Да Да

Советы и примечания

Примечание: Tег <input> пустой, он содержит только атрибуты.

Совет: Используйте элемент <label> для определения элементов <input>.


Различий между HTML 4.01 и HTML5

Атрибут <label> не поддерживается в HTML5.

В HTML5, тег <input> имеет несколько новых атрибутов, а атрибут type имеет несколько новых значений.


Различий между HTML и XHTML

В HTML, тег <input> не имеет закрывающего тега.

В XHTML, тег <input> должен быть закрыт, как <input />.


Атрибуты

= Новые в HTML5.

Атрибут Значение Описание
accept file_extension
audio/*
video/*
image/*
media_type
Указывает типы файлов, которые принимает сервер (только для type="file")
align left
right
top
middle
bottom
Не поддерживается в HTML5.
Задает выравнивание входного изображения (только для type="image")
alt text Задает альтернативный текст для изображений (только для type="image")
autocomplete on
off
Определяет, будет ли элемент <input> иметь автозаполнения вкл.
autofocus autofocus Указывает, что элемент <input> должен автоматически получать фокус при загрузке страницы
checked checked Указывает, что элемент <input> должен быть предварительно выбран, когда страница загружается (для type="checkbox" или type="radio")
dirname inputname.dir Указывает, что направление текста будет отправлено
disabled disabled Указывает, что элемент <input> должен быть отключен
form 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 Defines that form elements should not be validated when submitted
formtarget _blank
_self
_parent
_top
framename
Указывает, где должен отображаться ответ, полученный после отправки формы (для type="submit" и type="image")
height pixels Определяет высоту элемента <input> (только для type="image")
list datalist_id Относится к элементу <datalist>, содержит предопределенные параметры для элемента <input>
max number
date
Задает максимальное значение для элемента <input>
maxlength number Задает максимальное число символов, разрешенных в элементе <input>
min number
date
Задает минимальное значение для элемента <input>
multiple multiple Указывает, что пользователь может ввести несколько значений в поле элемента <input>
name text Задает имя элемента <input>
pattern regexp Задает регулярное выражение, для которого проверяется значение элемента <input>
placeholder text Указывает короткую подсказку, описывающую ожидаемое значение <input> element
readonly readonly Указывает, что поле ввода доступно только для чтения
required required Указывает, что перед отправкой формы необходимо заполнить поле ввода
size number Задает ширину в символах элемента <input>
src URL Задает URL изображения, используемого в качестве кнопки отправки (только для type="image")
step number Задает интервалы юридических номеров для поля ввода
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 text Задает значение элемента <input>
width pixels Указывает ширину элемента <input> (только для type="image")

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

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


Атрибуты событий

Tег <input> также поддерживает Атрибуты событий в HTML.


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

Учебник HTML: HTML формы

Справочник HTML DOM:


Настройки CSS по умолчанию

Нет.


Отправить ответ

avatar
  Подписаться  
Уведомление о