Краткий курс HTML 5 / Элементы ввода данных

Подробности

Категория: HTML, CSS

 

Наиболее используемым элементом форм несомненно является <input />. С его помощью создаются поля для ввода текста, паролей и выбора файлов, а также кнопки, флажки и переключатели. В HTML 5 он еще и приспособлен для ввода всевозможных дат, числовых значений, телефонов, адресов и даже выбора цвета. Все это многообразие определяется атрибутом type, все допустимые значения которого перечислены в таблице ниже. Вы уже знаете, что данные из формы передаются на сервер в виде пар «поле=значение». Название поля, определяемого элементом <input /> задается атрибутом name, а его значение по умолчанию можно указать в value.

 

<input type="text" name="поле" value="значение" />

Значение type	Описание
text	Значение по умолчанию. Элемент предназначен для ввода текстовой строки.
password	Элемент предназначен для ввода паролей. Все вводимые символы заменяются жирными точками.
button	Обычная кнопка, действие которой не определено (применяется для скриптования). Значение value отображается на кнопке.
reset	Кнопка очистки формы. При нажатии значения всех полей обнуляются.
submit	Кнопка отправки данных на сервер. Если такой кнопки нету (и нету варианта с изображением, см. ниже), то отправка формы осуществляется при нажатии на клавишу Enter, при условии, что в форме есть единственный элемент <input /> и фокус ввода установлен на нем.
image	Альтернативный вариант кнопки отправки данных в виде графического изображения, адрес которого указывается в атрибуте src, а альтернативный текст — в alt. Ширину и высоту изображения можно определить в атрибутах width и height. Значение value не отображается, но все равно отправляется на сервер.
hidden	Скрытое поле. В браузере не отображается, но также может содержать значения name и value, отправляемые на сервер. Применяется, когда необходимо передать информацию, не вводимую пользователем, но не подходит для сокрытия ее от него, поскольку передаваемое значение может быть легко просмотрено в исходном коде страницы.
checkbox	Флажок «вкл/выкл». Отображается в виде небольшой области с установленной или снятой «галочкой». Если элемент содержит булев атрибут checked="checked", то она по умолчанию будет установлена.
radio	Переключатель, отображаемый в виде кружочка с жирной точкой (значение выбрано) или без нее (не выбрано). Значение по умолчанию определяется все тем же атрибутом checked="checked". В отличие от других типов полей, в форме может быть несколько элементов <input type="radio" /> с одинаковым name, однако выбран из них может быть только один. При выборе другого элемента с тем же именем, отметка с остальных автоматически снимается. Таким образом, сервер получает только значение value выбранного элемента <input />. Можно создать несколько групп таких переключателей, задав элементам каждой из них свое имя.
file	Выбор файла. Отображается аналогично текстовому полю, но с добавленной справа кнопкой «Обзор». По нажатии на нее появляется диалоговое окно выбора файла. Можно ограничить допустимые MIME-типы загружаемых файлов, перечислив их через запятую в атрибуте accept. Также можно разрешить выбор нескольких файлов, указав булев атрибут multiple="multiple". Однако с элементом выбора файла нельзя использовать атрибут value.

Ниже приведены значения атрибута type, введенные в стандарте HTML 5.

Значение type	Описание
search	Текстовое поле, предназначенное для ввода поискового запроса. Отличается от обычного текстового поля своим лексическим назначением. Некоторые браузеры отображают на нем дополнительную кнопку очистки поля.
email	Текстовое поле для ввода адресов электронной почты. По умолчанию элемент принимает только один адрес, но указав булев атрибут multiple="multiple" можно разрешить пользователю ввод нескольких адресов через запятую.
url	Текстовое поле для ввода абсолютного IRI.
tel	Поле для ввода телефонных номеров. В отличие от полей ввода почтовых адресов и URL, телефонный номер по умолчанию не проходит проверку при отправке данных, поскольку существует множество различных форматов телефонных номеров.
number	Поле числового ввода. Визуально похоже на текстовое, но с добавлением кнопок-стрелок, позволяющих увеличивать и уменьшать значение.
range	Специальный элемент для выбора значения из заданного диапазона. Представляет собой ползунок, минимальное и максимальное значения которого задаются в атрибутах min и max соответственно, а шаг — в атрибуте step.
time	Элемент для ввода времени. Похож на поле для ввода чисел, но с разделением на часы и минуты.
date	Элемент для выбора даты, представляющий собой выпадающий григорианский календарь.
datetime-local	Комбинация двух предыдущих элементов для ввода даты и времени без учета часового пояса.
datetime	То же, что и предыдущий элемент, но с установленной временной зоной UTC.
week	Элемент для выбора недели. Визуально аналогичен элементу с type="date", отличается лишь формат значения.
month	Элемент для выбора месяца. Визуально аналогичен элементу с type="date", отличается лишь формат значения.
color	Специальный элемент для выбора цвета в формате RGB.

Упомянутые атрибуты min, max и step позволяют определить диапазон и шаг допустимых значений не только для элемента <input /> с типом range, но и в случае с number и всеми типами, связанными с выбором даты и времени, включая week и month. Конечно, значения этих атрибутов, как и атрибута value, должны быть в соответствующем формате, который легко увидеть на практике, добавив нужный элемент в документ.

Все текстовые поля с произвольной длиной значения поддерживают еще три атрибута — maxlength, позволяющий ограничить эту длину; size, в котором задается количество символов, визуально помещающихся в элемент (относительная ширина элемента); а также pattern, в котором можно указать регулярное выражение JavaScript, определяющее шаблон допустимых значений. Например, pattern="[0-9]" означает, что в данном поле можно указать число от 0 до 9.

Элемент <input /> поддерживает атрибут autocomplete, аналогичный атрибуту формы. Значения on и off позволяют включить и, соответственно, отключить функцию автозаполнения поля браузером. По умолчанию атрибут считается установленным в on.

Многострочный текст, атрибуты текстовых элементов

Вообще говоря, элемент <input /> не поддерживает перенос строки, а значит не позволяет вводить многострочный текст. Для этих целей существует специальный тег <textarea>, имя которого также задается атрибутом name. Его относительные размеры могут быть определены в атрибутах rows и cols, обозначающими число видимых строк и символов в строке соответственно. Содержимое <textarea> хранится не в атрибуте value, а между открывающим и закрывающим тегами. Как и в <input />, максимальная длина значения может быть задана атрибутом maxlength.

<textarea rows="4" cols="20" name="myText">
Тут можно расположить большой
многострочный текст…
</textarea>

Если текст не помещается в строку <textarea>, то он переносится на следующую. Если же строк больше, чем вмещается в элемент, то автоматически появляется полоса прокрутки. В HTML 5 есть еще атрибут, определяющий способ передачи содержимого на сервер — это wrap. Установленный в значение hard, он добавляет код символа переноса в конец каждой строки. По умолчанию же значением wrap является soft, при котором символы переноса строки не добавляются.

Оба элемента <input /> и <textarea> поддерживают булев атрибут readonly="readonly", который устанавливает их в режим «только чтение», запрещая редактирование содержимого. Кроме того, в HTML 5 появилась возможность с помощью атрибута placeholder добавить этим элементам короткую подсказку, объясняющую пользователям, какая информация от них требуется (для длинных подсказок используйте атрибут title). А установив булев атрибут required="required", вы сообщите браузеру, что поле должно быть обязательно заполнено, чтобы форма могла быть отправлена на сервер.

Альтернативная кнопка, перегрузка атрибутов формы

Исторически так сложилось, что кнопки можно добавлять не только тегом <input />, но и с помощью элемента <button>. В целом, он повторяет ту часть функциональности <input />, которая касается кнопок. Так значением атрибута type могут быть reset, submit и button, отвечающие за функции очистки формы, отправки данных и кнопки без определенного действия соответственно. Отличается тег <button> тем, что он парный, и надпись на кнопке определяется не в атрибуте value, а в содержимом элемента.

<button type="submit" formtarget="newtarget.cgi">Нажми меня</button>

Кпопка отправки данных, будь это <input /> или <button>, позволяет переопределить некоторые атрибуты формы (элемента <form>), к которой они относятся. Это атрибуты action, enctype, method, novalidate и target, а их «кнопочные» аналоги соответственно formaction, formenctype, formmethod, formnovalidate и formtarget.

Выбор из списка

Для организации выпадающих списков используют структуру, состоящую из элемента <select>, внутри которого размещаются дочерние <option>, представляющие варианты выбора.

<select name="food">
<option value="pie">Пирог</option>
<option value="bread" selected="selected">Хлеб</option>
<option value="cookie" label="Печенье"></option>
</select>

Передаваемое на сервер имя поля указывается в атрибуте name элемента <select>, а его значение — в атрибуте value элемента <option>. В выпадающем списке, как и в случае с переключателем <input type="radio" />, из предлагаемых вариантов может быть выбран только один. Но чтобы указать вариант по умолчанию применяется другой булев атрибут — selected="selected". Заголовок варианта, который пользователь видит в браузере, указывается или в атрибуте label, или, если его нет, непосредственно в содержимом элемента <option>.

Присвоив элементу <select> атрибут size с некоторым числовым значением, вы сделаете его не выпадающим, а обычным списком с указанным количеством видимых на экране вариантов. Если их на самом деле больше, то браузер добавит к элементу полосу прокрутки. А с помощью булева атрибута multiple="multiple" можно разрешить пользователю, зажав клавишу Ctrl или Shift, выбрать несколько вариантов одновременно. Такой список также перестанет быть выпадающим, и чтобы указать необходимое количество видимых элементов, необходимо применять атрибут multiple в паре с size.

Варианты из списка можно объединять в группы. Для этого достаточно разместить их внутри элементов <optgroup>. Заголовок каждой группы определяется ее атрибутом label.

<select>
<optgroup label="Шведские авто">
<option value="volvo">Вольво</option>
<option value="saab">Сааб</option>
</optgroup>
<optgroup label="Немецкие авто">
<option value="vw">Фольксваген</option>
<option value="audi">Ауди</option>
</optgroup>
</select>

HTML 5 предоставляет возможность объединить выпадающий список с обычным элементом ввода <input />. Такой список может содержать, например, наиболее востребованные поисковые запросы или рекомендуемые значения заполняемого поля. Формируется он элементом <datalist>, в который вложены все те же <option> c предлагаемыми в атрибутах value вариантами. Чтобы связать такой список с полем ввода, необходимо присвоить элементу <datalist> уникальный идентификатор id и указать его в значении атрибута list элемента <input />. По умолчанию <datalist> не отображается на странице, а появляется, только когда пользователь вводит данные в поле, к которому он привязан.

<input list="cars" />
<datalist id="cars">
<option value="BMW"></option>
<option value="Ford"></option>
<option value="Volvo"></option>
</datalist>

Генерирование открытого и секретного ключей

Еще одним элементом ввода, предлагаемым стандартом HTML 5 и визуально похожим на выпадающий список, является <keygen />. Это поле предназначено для генерирования пары открытого и секретного ключей, применяемых в технологии асимметричного шифрования, в которой открытый ключ используется для проверки ЭЦП и шифрования сообщений, а секретный — для генерации ЭЦП и расшифрования сообщений. Элемент представляет собой список, в котором пользователю предлагается выбрать подходящую длину ключа. После отправки формы, в хранилище браузера сохраняется секретный ключ, а на сервер передается упакованный открытый. <keygen /> поддерживает стандартный для элементов ввода атрибут name, а также атрибуты keytype и challenge. Первый из них определяет алгоритм ассиметричного шифрования, однако стандарт HTML 5 не обязует браузеры поддерживать какой-либо алгоритм вообще, поэтому список допустимых значений не фиксирован. Если значение не известно браузеру, то он откажется генерировать пару ключей. Если keytype не указан вообще, то используется криптографический алгоритм RSA. Значение атрибута challenge, если он указан, упаковывается вместе с открытым ключом для отправки на сервер.

<form action="processkey.cgi" method="post">
<keygen name="key" keytype="rsa" />
<input type="submit" value="Отправить ключ" />
</form>

Стандарт HTML 5 не определяет способы использования полученных ключей. Возможна, например, реализация механизма, при котором сервер, получив открытый ключ, сгенерирует пользовательский сертификат и предложит его сохранить вместе с секретным ключом в хранилище ключей браузера. А пользователь при необходимости сможет использовать его для авторизации на сервере.

Другие элементы форм

В HTML 5 появился элемент <output>, имя и значение которого также передаются на сервер при отправке формы. Однако он не является элементом ввода и предназначен для хранения и отображения каких-либо результатов вычислений. Например, с помощью JavaScript можно организовать подсчет по формуле, переменные которой вводятся в других полях формы. Кроме атрибута name, привычно содержащего имя передаваемого на сервер поля, <output> поддерживает также атрибут for, в котором можно указать один или несколько идентификаторов элементов, так или иначе связанных с отображаемым результатом. Сам результат содержится внутри элемента.

<form onsubmit="return false">
<input name="a" type="number" step="any" /> +
<input name="b" type="number" step="any" /> =
<output onforminput="value = a.valueAsNumber + b.valueAsNumber"></output>
</form>

Еще одним элементом, который привязывается к другим, является <label>. В отличие от <output>, он не поддерживает атрибут name, а его значение не отправляется на сервер. Кроме того, в атрибуте for может быть указан только один идентификатор привязываемого поля ввода. Если for вообще отсутствует, то <label> привязывается к своему же содержимому. Такая привязка, помимо очевидного лексического смысла, обладает одним полезным свойством — если, например, <label> связан с полем <input type="checkbox" />, то флажок будет менять свое значение не только при нажатии по нему, но и по этому <label>.

Разместив несколько элементов внутри одного <fieldset>, можно таким образом лексически объединить их в одну группу. Визуально <fieldset> выглядит как рамка, в левом верхнем углу которой пишется заголовок. Его можно указать в элементе <legend>, располагаемым сразу за открывающим тегом <fieldset>. Несмотря на то, что этот элемент не влияет на отправляемые на сервер данные, он все же поддерживает атрибут name.

<form action="script.cgi" method="post">
<fieldset>
<legend>Пол</legend>
<label for="male">Мужской</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Женский</label>
<input type="radio" name="sex" id="female" />
</fieldset>
</form>

Атрибуты элементов ввода

Вам наверняка известно, что переключаться между несколькими элементами ввода, расположенными на одной странице, можно нажатием клавиши Tab. Так вот, порядок такого переключения задается с помощью атрибута tabindex. Достаточно необходимым элементам указать последовательные числовые значения этого атрибута. Первому — «1», второму — «2» и т. д.

В значении атрибута accesskey можно указать один или несколько (через пробел) одиночных Unicode-символов, на базе которых браузер попытается построить комбинацию клавиш для быстрого доступа к элементу. Помните, что браузеры делают это на свое усмотрение и итоговые комбинации могут отличаться или вовсе отсутствовать.

Большинство элементов форм поддерживают булев атрибут disabled="disabled", отключающий их функциональность. Установив disabled в элементе <input />, <textarea>, <button>, <select> или <keygen />, вы не сможете ввести или выбрать его значение. Элемент <option> с таким атрибутом нельзя будет выбрать из списка. Помещенный в <optgroup>, он отключит всю группу вариантов, а в <fieldset> — все дочерние элементы ввода. Значения отключенных элементов пишутся серым шрифтом.

HTML 5 позволяет разместить элемент вне формы или даже связать его с несколькими формами одновременно. Для этого необходимо в атрибуте form указать через пробел идентификаторы этих форм. Атрибут поддерживается следующими элементами: <input />, <textarea>, <button>, <select>, <keygen />, <fieldset>, <output> и <label>.

Элементы форм, которые могут получать фокус ввода, поддерживают булев атрибут autofocus="autofocus". Если установить его в одном из таких элементов, то фокус установится на нем сразу после загрузки страницы. Этот атрибут также появился в HTML 5.

• < Назад
• Вперёд >