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

Тег | 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> 

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

| Справочник 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

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

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

Нет.

Различия между 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>

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

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

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

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

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

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

Учебник HTML

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

HTML Элементы