Тег 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:
| Значение | Описание |
|---|---|
| number | |
| url | |
| tel | |
| search | |
| color | |
| date | |
| month | |
| week | |
| datetime | |
| datetime-local | |
| range |