Поле для ввода номера телефона

Тип tel был задуман как тип для ввода в форму номеров телефонов:

< input type=" tel" name=" my_number" >

Поле поиска

Тип поля searchпредназначен для полей поиска. Несмотря на то, что в браузерах отображение поля с типом search очень напоминает tex t, в полях для организации строки поиска рекомендуется использовать именно search (см. рис. 18).

Пример:

< form>

Мы ищем: < input type=" search" value=" " required placeholder=" Введите строку поиска" > < input type=" Submit" >

< /form>

Рисунок 18 - Применение элемента формы search

Атрибуты элемента input

Тег < input> поддерживает все глобальные атрибуты и события. Перечислим атрибуты, которые еще могут использоваться в теге input.

autocomplete - Определяет, будет ли включено автозаполнение для поля ввода данных:

· on - браузер автоматически показывает значения вводимые ранее пользователем (значение по умолчанию).

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

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

disabled - указывает, что элемент < input> должен быть выключен, неактивен.

form - определяет форму с которой связан элемент < input>. В качестве значения атрибута выступает идентификатор элемента < form>. Этот атрибут позволяет размещать элемент < input> в произвольном месте документа, а не только в качестве потомка элемента < form>. Элемент < input> может быть связан только с одной формой.

formnovalidate - указывает, что данные, введенные в поле ввода, не будут проверяться перед отправкой.

list - устанавливает взаимосвязь между элементом < datalist> и < input>, позволяя для поля ввода указать список предварительно определенных вариантов. В качестве значения для атрибута выступает идентификатор элемента < datalist>.

max и min – указывают, соответственно, максимальное и минимальное значение для ввода числа или даты. Можно использовать атрибут max совместно с атрибутом min для создания диапазона допустимых значений. Причем значение число - указывает максимально допустимое значение, а значение дата - максимальную дату, разрешенную для ввода.

Атрибуты min и max работают со следующими значениями атрибута type: number, range, date, datetime, datetime-local, month, time и week.

Пример:

<! DOCTYPE html> < html> < body>

< form action=" demo_form.php" >

Введите дату до 1980-01-01:

< input type=" date" name=" bday" max=" 1979-12-31" > < br>

Введите дату после 2000-01-01:

< input type=" date" name=" bday" min=" 2000-01-02" > < br>

Введите число (от 1 до 5):

< input type=" number" name=" quantity" min=" 1" max=" 5" > < br>

< input type=" submit" >

< /form>

< /body> < /html>

maxlength – определяет, какое максимальное число символов можно ввести в поле ввода. Этот атрибут можно использовать для ограничения количества символов, которое разрешается пользователю ввести в данное поле. Например, при запросе года можно ограничить количество символов, установив значение атрибута maxlength равным 4.

name - определяет имя элемента, которое отправляется на сервер вместе с введенными в поле данными. Имя может использоваться в JavaScript для ссылки на элемент или для идентификации переданных данных на сервере.

pattern - указывает регулярное выражение, которое определяет синтаксис данных, ввод которых должен быть разрешен в поле ввода. Шаблон регулярного выражения должен соответствовать введенному значению целиком. Для описания работы шаблона можно воспользоваться глобальным атрибутом title. Атрибут pattern работает со следующими значениями атрибута type: text, search, url, tel, email и password.

placeholder - определяет короткую подсказку, которая описывает ожидаемое значение для поля ввода, например, образец значения или краткое описание ожидаемого формата. Подсказка отображается в поле ввода, когда оно пустое и исчезает, когда пользователь начинает вводить данные или когда поле получает фокус - разница в работе атрибута зависит от используемого браузера. Если поле теряет фокус, и при этом данные в поле не были введены, то в поле ввода вновь отобразится подсказка. Атрибут placeholder работает со следующими значениями атрибута type: text, search, url, tel, email и password.

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

required - указывает, что поле ввода необходимо заполнить перед отправкой формы. Если пользователь попытается отправить форму, не введя в поле никакого значения, то на экране отобразится предупреждающее сообщение. Это сообщение будет отличаться по содержанию и стилизации в зависимости от браузера и типа поля ввода. Атрибут required работает со следующими значениями атрибута type: text, search, url, tel, email, password, date, number, checkbox, radio и file.

size - указывает ширину поля ввода в символах. Так, например, значение 3 создает поле ввода текста, ширина которого достаточна для отображения трех введенных символов (хотя пользователь при желании может ввести и большее количество). Атрибут size работает со следующими значениями атрибута type: text, search, tel, url, email и password. Для указания максимального количества вводимых знаков, воспользуйтесь атрибутом maxlength.

step - определяет интервал чисел для элемента < input>. Пример: если step=" 3", то возможные значения чисел могут быть: -3, 0, 3, 6 и тд. Атрибут step может использоваться совместно с атрибутами max и min, для создания диапазона допустимых значений.

value - указывает значение элемента < input>, и используется по-разному для разных типов полей ввода:

· Для " button", " reset", и " submit" - определяет текст на кнопке

· Для " text", " password", " hidden" - определяет начальное (по умолчанию) значение поля ввода

· Для " checkbox", " radio", " image" - определяет значение, связанное с вводом (значение, которое передается при отправке)

Атрибут value не может использоваться с type=" file", и обязательно должен присутствовать при type=" checkbox" и type=" radio".

⇐ Предыдущая 1 2 3 4 567 8 9 10 Следующая ⇒