Тридцатый четвертый урок. Возможности INPUT

По умолчанию INPUT имеет тип text type="text" — простое текстовое поле ввода.

Для кнопок доступны button, reset и submit. По возможности используйте BUTTON (который специально для этого создан) с этими же типами.

Тип hidden создаёт скрытое поле, которое вообще не видно посетителю. Дело в том, что часто при отправке формы, требуется получить какие-то данные посетителя, например код его php-сессии (для сверки). Элемент hidden точно также отправляется формой, как и другие поля.

<input type="hidden" name="invisible" value="невидимое поле">

Часто скрытое поле используется для форм сторонних сервисов, где указывается клиентский код, адреса для редиректа и т.п. Также это поле может использоваться совместно с типом checkbox (это рассмотрим ниже).

Тип file используется для выбора файла, который будет отправлен на сервер. Браузер сам формирует внешний вид такого диалога.

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

Тип password используется для полей, которые требуют ввода пароля. Вместо введенного текста, браузер отобразит «булечки».

<input type="password" name="my-password">

Тип radio используется для создания радиокнопок. Для того, чтобы обеспечить их корректную работу желательно использовать LABEL и задавать значение по умолчанию с помощью checked.

<form>
<label><input type="radio" name="sign" value="z1" checked> Овен</label> 
<label><input type="radio" name="sign" value="z2"> Телец</label> 
<label><input type="radio" name="sign" value="z3"> Близнецы</label>
<button type="reset">Сброс</button>
</form>

Обратите внимание, что для всей группы указывается одно значение name — именно по этому признаку браузер и объединяет. С помощью LABEL упрощается выбор элементов, без него пришлось бы кликать на саму кнопку. Ну и атрибут checked делает элемент отмеченным. Это похоже на selected для выпадающего списка.

Тип checkbox (чекбоксы) похож на радиокнопки, только позволяет выбрать сразу несколько элементов. К его особенности следует отнести тот факт, что браузер отправляет этот поле, только когда выбран хотя бы один элемент группы. Если ни один элемент не выбран, то браузер вообще не отправит это поле в массиве формы. Таким образом, когда в форме встречаются чекбоксы, то на стороне сервера нужно учитывать этот момент.

Чтобы упростить себе и вашему программисту жизнь, при верстке чекбоксов применяют небольшую хитрость: размещают скрытое поле с тем же именем, но дефолтным значением. Главное, чтобы скрытый элемент размещался перед группой чекбоксов.

<form>
<input type="hidden" name="sign" value="z0">
<label><input type="checkbox" name="sign" value="z1"> Овен</label> 
<label><input type="checkbox" name="sign" value="z2"> Телец</label> 
<label><input type="checkbox" name="sign" value="z3"> Близнецы</label>
</form>

Вопросы php-обработки формы мы будем рассматривать позднее, пока же просто запомните данный приём.

Рассмотренные типы, являются основными, которые поддерживают все браузеры. Новые браузеры позволяют использовать новые варианты, но их поддержка не одинакова в других. Например тип color не работает в IE любых версий. Поэтому перед тем, как использовать какой-то новый тип, проверьте его поддержку. Для этого можно воспользоваться сайтом caniuse.com или обратившить к официальной документации по браузеру. Например для FireFox документация по INPUT.

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

Наибольшее использование имеет тип email, который проверяет правильность указания электропочты.

<form method="post">
	<p><input type="email" name="email" placeholder="Ваш email" required>
	<button type="submit">Отправить</button></p>
</form>

 

Тип number позволяет вводить числа и может настраиваться под определенную задачу.

<input type="number" name="int" placeholder="Введите число">

Можно ограничить максимальное и минимальное значение:

<input type="number" name="int" min="0" max="10" placeholder="Введите число">

Можно задать значение шага:

<input type="number" name="int" min="0" max="10" step="2" placeholder="Введите число">

Если в step указать дробное число, например 0.1, то это позволит вводить десятичные числа. Но такая практика очень опасна, поскольку в качестве разделителя может выступать точка или запятая, что создает серьезную проблему при последующей обработке. Формат разделителя зависит от региональных настроек операционной системы.

<input type="number" name="int" min="0" max="10" step="0.2" placeholder="Введите число">

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

Тип tel используется для указания номера телефона. Для десктопов это поле ничем не отличается от обычного текстового ввода, а на мобильных устройствах (телефонах), для этого поля будет высвечена клавиатура для ввода номера телефона. Поэтому используйте tel для таких полей.

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

<form method="post">
	<input type="text" name="ip" placeholder="IP-адрес: x.x.x.x" pattern="\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}" required>
	<button type="submit">Отправить</button></p>
</form>
 

В данном примере, пока поле не будет заполнено в заданном формате, браузер запретит отправку формы. Использование pattern позволяет отчасти защиться от неверных данных, но с другой стороны, поддержка этого атрибута браузерами пока оставляет желать лучшего. Для полноценной работы нужен не просто паттерн валидации, а маска ввода, чтобы посетителю было понятно что вводить. Пока же такой вариант больше раздражает, чем помогает, поэтому применяйте pattern только там, где это действительно нужно.