Такое сложное явление как тег input нуждается в более подробном объяснении и видео. Они обязательно будут добавлены, но позже:)

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

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

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

См. также теги textarea и select.

Атрибуты

Атрибут Описание
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. См. также тег button, который также делает кнопку.
file Создает кнопку выбора файла. Дизайн этой кнопки запрещено менять через CSS (однако есть хитрые способы). Если вам требуется такое поле в форме, то тег form должен иметь атрибут enctype в значении multipart/form-data.

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

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

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

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

См. также атрибут pattern, который осуществляет проверку полей по регулярному выражению.

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