# Тег input

Тег `input` создает различные элементы HTML формы: обычное поле ввода, поле для ввода пароля, флажок checkbox (чекбокс), радио кнопочки (radio), кнопку.

Тег `input` должен лежать внутри тега `form`. Это не обязательно, необходимо для отправки данных на сервер и последующей их обработки через PHP.

Не требует закрывающего тега.

## Атрибуты

Атрибут | Описание
--- | ---
`type` | Задает тип поля ввода. Варианты см. ниже.
`value` | Значение по умолчанию в поле ввода. В случае с кнопкой задает ее текст. Подробнее см. атрибут `value`.
`placeholder` | Подсказка в поле ввода, подробнее см. атрибут `placeholder`.
`name` | Имя поля ввода. Нужно для того, чтобы достать данные поля ввода в PHP. Для корректной работы формы имена полей ввода не должны совпадать друг с другом (в одной форме). Если они совпадают - в PHP придут данные того поля ввода, которое ниже в HTML коде.
`disabled` | Блокирует элемент формы (не только input, а практически любой), подробнее см. атрибут `disabled`.

## Значения атрибута type

Значение | Описание
--- | ---
`text` | Создает обычное текстовое поле ввода.
`password` | Создает текстовое поле ввода для пароля. Попробуйте вбить в него текст - он отобразится звездочками.
`checkbox` | Создает флажок чекбокс. Подробнее см. `checkbox`.
`radio` | Создает радио переключатель. Подробнее см. `radio`.
`hidden` | Создает скрытый инпут, который не будет виден на экране, но будет отправлять содержащиеся в атрибуте `value` данные на сервер.
`button` | Создает кнопку. Нажатие на эту кнопку не будет отправлять форму на сервер. Она может быть использована внутри ссылки или через `JavaScript`. По умолчанию кнопка не имеет текста (пример кнопки без текста: ), он задается с помощью `value`. См. также тег `button`, который также делает кнопку.
`submit` | Создает кнопку, которая будет отправлять данные на сервер. Текст кнопки зависит от браузера, его можно сменить с помощью `value`. См. также тег button, который также делает кнопку.
`reset` | Создает кнопку, которая очищает заполненную форму. Текст кнопки зависит от браузера, его можно сменить с помощью `value`.
`file` | Создает кнопку выбора файла. Дизайн этой кнопки запрещено менять через CSS (однако есть хитрые способы). Если вам требуется такое поле в форме, то тег `form` должен иметь атрибут `enctype` в значении multipart/form-data.

## Новые в HTML5 значения атрибута type

Данные значения атрибута новые, появились только в HTML5, поэтому в некоторых браузерах они могут не работать или работать по-разному в разных браузерах.

В случае, если браузер не может понять содержимое атрибута `type` (например, если оно не поддерживается или ошибочно введено), он будет считать элемент обычным текстовым инпутом, как будто в в type стоит значение `text`.

Посмотрите приведенные ниже примеры в разных браузерах. Попробуйте вводить в инпуты текст и нажать на кнопку отправки. Если текст некорректный или поле пустое - браузер выдаст ошибку. К примеру, если в поле с типом `email` вбить некорректный email - браузер не даст отправить форму и выдаст сообщение об ошибке (текст ошибки и ее внешний вид на html css менять нельзя). Если поле пустое - браузер тоже выдаст ошибку, это достигается с помощью атрибута `required`:

Значение | Описание
--- | ---
`email` |
`number` |
`url` |
`tel` |
`search` |
`color` |
`date` |
`month` |
`week` |
`datetime` |
`datetime-local` |
`range` |

## Смотрите также

- тег `textarea`,
  который создает многострочное поле ввода
- атрибут `pattern`,
  который осуществляет валидацию полей

← →
↑