Типы тега input

Тег <input> имеет много разных типов. Тип устанавливается с помощью атрибута type. В зависимости от типа, тег input выглядит по-разному. Использование некоторых атрибутов тоже зависит от типа. В этой теме мы рассмотрим основные типы <input>.

Текстовое поле

Это однострочное поле для ввода текста.

type="text"

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

<form action="myfile.php" method="post">
<input name="login">
</form>

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

Пароль

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

type="password"

Добавим это поле в форму. Тег <input> - это строчный элемент. Чтобы каждый тег input находился на отдельной строке, их можно разделить тэгами <br>.

<input type="password" name="pass">

Посмотрите, как выглядит текст, введённый в это поле

Файл

Это поле для оправки файла на сервер. Оно имеет кнопку "Обзор", чтобы можно было найти и указать нужный файл на диске.

type="file"

Добавим это поле в форму:

<input type="file" name="file">

Этот тип имеет атрибут accept, который позволяет отправлять файлы только определённого формата. Атрибут может принимать значения:

accept="audio/*" - звуковые файлы

accept="video/*" - видео файлы

accept="image/*" - изображения

accept=MIME-тип

Существует атрибут multiple, который позволяет отправить сразу несколько файлов. Добавим эти атрибуты тегу <input>.

<input type="file" name="file" accept="image/*" multiple>

Теперь в окне, которое появляется при нажатии кнопки "Обзор", можно выбрать несколько файлов, но только изображения.

Кнопка

Этот тип редко используется в формах, отправляемых на сервер. Чаще он применяется для скриптов.

type="button"

Атрибут value содержит текст, который отображается на кнопке. Добавим кнопку на страницу:

<input type="button" name="button" value="Кнопка">

Чекбокс

Чекбокс позволяет пользователю сделать выбор из предложенных вариантов. Это делается с помощью флажков, которые можно устанавливать и снимать. Пользователь может выбрать один или несколько вариантов или не выбрать ни один.

type="checkbox"

Чекбокс имеет маленький размер и на него неудобно нажимать. Поэтому тег <input> обычно располагается внутри тега <label>вместе с пояснением. Пример:

<p>Я занимаюсь видами спорта:</p>
<label>
<input type="checkbox" name="sport" value="football" checked> Футбол
</label><br>
<label>
<input type="checkbox" name="sport" value="hockey"> Хоккей
</label><br>
<label>
<input type="checkbox" name="sport" value="basketball"> Баскетбол
</label><br>
<label>
<input type="checkbox" name="sport" value="running"> Бег
</label><br>
<label>
<input type="checkbox" name="sport" value="ski"> Лыжи
</label>

Атрибут name - это имя элемента формы, так же как у других типов. А атрибут value - это значение, которое отправляется на сервер вместе с именем. Из тех чекбоксов, которые выбрал пользователь, имя и значение отправляются на сервер. Если пользователь выбрал несколько вариантов, то на сервер отправляется несколько параметров. Как нужно устанавливать имена и значения, будет рассмотрено в учебнике PHP.

Если каким-то вариантам указан атрибут checked, то эти варианты выбраны по умолчанию.

Радио-кнопка

Радио-кнопка очень похожа по смыслу на чекбокс. Она отличается тем, что пользователь может выбрать только один вариант из предложенных.

type="radio"

Атрибут name должен быть одинаковым у всех тегов input. Именно одинаковое название объединяет радио-кнопки в группу, из которой можно выбрать только один вариант.

<p>Товар произведён:</p>
<label>
<input type="radio" name="country" value="rus" checked> в России
</label><br>
<label>
<input type="radio" name="country" value="fra"> во Франции
</label></br>
<label>
<input type="radio" name="country" value="ita"> в Италии
</label>

Скрытое поле

Скрытое поле - это элемент формы, который не отображается на странице.

type="hidden"

Значение, которое отправляется на сервер, содержится в атрибуте value. Оно может быть изменено при помощи скриптов. Добавим этот элемент в форму:

<input type="hidden" name="inf" value="10">

Кнопка отправки

При нажатии на кнопку отправки, все данные из формы отправляются на сервер.

type="submit"

Атрибут value содержит текст, который отображается на кнопке. Добавим кнопку отправки в форму:

<input type="submit" value="Отправить">

Изображение

Этот тип работает также, как кнопка отправки. При нажатии на него, данные из формы отправляются на сервер. Только вместо кнопки на странице находится изображение.

type="image"

В атрибуте src указывается путь к файлу изображения.

<p><input type="image" src="start.jpg"></p>

Другие типы

В HTML5 есть ещё несколько новых типов тэга <input>. Но они плохо реализованы во многих браузерах и редко используюются. Поэтому я кратко перечислю их.

type="email" - поле для указания электронной почты

type="url" - поле для URL-адреса

type="tel" - поле для указания телефона

type="search" - поле для поиска

type="color" - выбор цвета

type="number" - поле для вода чисел

type="range" - ползунок для выбора чисел

type="time" - указание времени

type="date" - указание даты

type="datetime" - указание даты и времени

type="datetime-local" - указание локальной даты и времени

type="week" - указание недели

type="month" - указание месяца

Другие атрибуты тега input

Тег <input> имеет много других атрибутов, которые используются в зависимости от типа. Назову основные:

Атрибут autocomplete устанавливает автоматическое заполнение поля для ввода при возвращении на страницу. Если пользователь заполнил поле для ввода и отправил форму, а затем вернулся на страницу, то в поле будет содержаться введёный ранее текст. Значение атрибуту устанавливать не нужно. Работает не во всех браузерах.

Атрибут autofocus устанавливает, что элемент должен быть в фокусе после загрузки страницы. Значение можно не указывать.

Атрибут size определяет длинну поля для ввода. Значение указывается в символах. При этом нужно писать только число в кавычках. Невозможно сделать поле для ввода очень которким. Если указать слишком маленькое значение, то поле всё равно будет не меньше опредеённой длинны. В каждом браузера она разная.

Атрибут maxlength устанавливает максимальное число символов, которое можно ввести в поле для ввода.

Атрибуты max и min применяются к типам, в которых можно указать число или дату. Они определяют максимальное и минимальное значения, которые можно ввести.

Атрибут placeholder устанавливает описание поля для ввода. Описание находится в самом поле, когда оно пустое. Оно изчезает, когда пользователь начинает вводить значение.