Атрибуты input - работаем как умеем

[Makha]

Эти атрибуты относятся к input элемент, если его type атрибут находится в состоянии, определение которого гласит, что атрибут применяется. Если атрибут не применяется к input элемент, браузеры должны игнорировать этот атрибут.

autocomplete

Атрибут autocomplete
Этот атрибут помогает заполнять поля форм текстом, который был введён в них ранее. Значения сохраняет и подставляет браузер, при этом автозаполнение по соображениям безопасности может отключаться пользователем в настройках и не может в таком случае управляться атрибутом autocomplete.
При вводе первых букв текста выводится список сохранённых ранее значений, из которого можно выбрать необходимое.
Значения:
on - Включает автозаполнение текста.
off - Отключает автозаполнение. Это значение обычно используется для отмены сохранения в браузере важных данных (паролей, номеров банковских карт), а также редко вводимых или уникальных данных (капча).

dirname

Атрибут dirname определяет имя поля ввода, содержащего направление текста текстовой области.
Значение поля ввода, содержащего направление текста должно быть либо "ltr", либо "rtl".

 <p><label>Comment: <input name="comment" dirname="comment.dir" type="text" /></label></p>
 <p><button name="mode" type=submit value="add">Post Comment</button></p>

list

Атрибут list относится к datalist, содержащему предопределенные варианты для поля ввода.

<input list="<идентификатор>" />
<datalist id="<идентификатор>">
 <option value="Текст1">
 <option value="Текст2">
</datalist>

readonly

Атрибут readonly определяет, что поле ввода только для чтения.
Только для чтения поле нельзя изменить. Тем не менее, пользователь может перейти на него, выделить его, и скопировать из него текст.
Если этот атрибут представлен, поле будет только для чтения.
Атрибут readonly может быть установлен для того, чтобы удержать пользователя от изменения значения до тех пор, пока не выполнено какое либо условие (например, выбор checkbox, и т.д.). Затем необходим Javasсript для удаления значения readonly, и превращения поля ввода в редактируемое.
Примечание: Поля, которые только для чтения не могут быть проверены.

<input readonly="readonly" type="text" />

size

Атрибут size определяет ширину, в символах, поля ввода.
Примечание: Этот атрибут работает со следующими типами элемента < input />: text, search, url, telephone, email, password, date pickers, number, checkbox, radio и file.
Значение по умолчанию: 20.

Имейл: <input name="email" size="35" type="text" />

PIN: <input name="pin" maxlength="4" size="4" type="text" />

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

required

Атрибут required указывает, что поля ввода должны быть заполнены перед отправкой.
Если этот атрибут присутствует, поле должно быть заполнено.

Устанавливает поле формы обязательным для заполнения перед отправкой формы на сервер. Если обязательное поле пустое, браузер выведет сообщение, а форма отправлена не будет. Вид и содержание сообщения зависит от браузера и меняться пользователем не может. На рис. 1 показано сообщение в разных браузерах.

Chrome 11	Opera 11	Firefox 4

Рис. 1. Вид сообщения об обязательном поле

Примечание: Атрибут required работает со следующими типами элемента < input />: text, search, url, telephone, email, password, date pickers, number, checkbox, radio и file.

Имя: <input name="usr_name" required="required" type="text" />

multiple

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

<input type="file" />
<input type="email" />

Opera 10.62, Firefox 3.6 и Safari поддерживает multiple только type="file".

maxlength

Атрибут maxlength определяет максимальную длину (в символах) поля ввода.

pattern

Атрибут pattern указывает регулярное выражение, согласно которому требуется вводить и проверять данные в поле формы. Если присутствует атрибут pattern, то форма не будет отправляться, пока поле не будет заполнено правильно.
Примечание: Атрибут pattern раборает со следующими типами элемента < input />: text, search, url, telephone, email и password.
Совет: Используйте стандартный атрибут title для описания шаблона.

Некоторые типовые регулярные выражения перечислены в табл. 1.

Табл. 1. Регулярные выражения

Выражение	Описание
\d [0-9]	Одна цифра от 0 до 9.
\D [^0-9]	Любой символ кроме цифры.
\s	Пробел.
[A-Z]	Только заглавная латинская буква.
[A-Za-z]	Только латинская буква в любом регистре.
[А-Яа-яЁё]	Только русская буква в любом регистре.
[A-Za-zА-Яа-яЁё]	Любая буква русского и латинского алфавита.
[0-9]{3}	Три цифры.
[A-Za-z]{6,}	Не менее шести латинских букв.
[0-9]{,3}	Не более трёх цифр.
[0-9]{5,10}	От пяти до десяти цифр.
^[a-zA-Z]+$	Любое слово на латинице.
^[А-Яа-яЁё\s]+$	Любое слово на русском включая пробелы.
^[ 0-9]+$	Любое число.
[0-9]{6}	Почтовый индекс.
\d+(,\d{2})?	Число в формате 1,34 (разделитель запятая).
\d+(\.\d{2})?	Число в формате 2.10 (разделитель точка).
\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}	IP-адрес

<p>Введите телефон в формате 2-xxx-xxx, где вместо x 
    должна быть цифра:</p>
    <p><input type="tel" pattern="2-[0-9]{3}-[0-9]{3}"></p>

min и max

Атрибут min указывает минимальное разрешенное значение для поля ввода.
Атрибут max указывает максимальное разрешенное значение для поля ввода.
Атрибут min используется вместе с атрибутом max для создания интервала разрешенных значений.
Примечание: Атрибуты max и min работают вместе со следующими типами элемента < input >: number, range, date, datetime, datetime-local, month, time и week.

Балы: <input type="number" name="points" min="0" max="10" />

step

Атрибут step определяет легальные числовые интервалы для поля ввода (если step="3", легальными числами будут -3,0,3,6, и т.д.).
Атрибут step используется вместе с атрибутами max и min для создания интервала легальных значений.
Примечание: Атрибуты step, max и min работают со следующими типами элемента < input >: number, range, date, datetime, datetime-local, month, time и week.
Значения: Любое целое или дробное число.

<p><input type="range" min="0" max="10" step="2">
<p>Введите произвольное значение от 0 до 1:</p>
   <p><input type="number" value="0" min="0" max="1" step="0.1">

placeholder

Атрибут placeholder предоставляет подсказку, которая описывает ожидаемое значение в поле ввода.
Подсказка отображается в поле ввода, когда оно пустое, и исчезает когда поле получает фокус.

<input type=search placeholder="Введите текст для поиска">

Примечание: Атрибут placeholder работает со следующими типами элемента < input >: text, search, url, telephone, email и password.

Comments

[Makha]

Атрибут formnovalidate - Отменяет встроенную проверку данных введенных пользователем в форме на корректность перед отправкой формы. Такая проверка делается браузером автоматически для полей , , а также при наличии атрибута pattern или required у тега .

<input type="submit" formnovalidate>

Атрибут formaction переопределяет атрибут action элемента form.

Имя: <input type="text" name="fname" /><br />
Фамилия: <input type="text" name="lname" /><br />
<button type="submit">Отправить</button><br />
<button type="submit" formaction="/tryit/html/htmlform_admin_submit.php">Отправить как администратор</button>

Атрибут formenctype переопределяет атрибут enctype элемента form.
Этот атрибут используется вместе с type="submit" и type="image".

  Имя: <input type="text" name="fname" /><br />
<button type="submit" >Отправить</button>
<button type="submit" formenctype="multipart/form-data">Отправить как Multipart/form-data</button>

Атрибут formmethod переопределяет атрибут method элемента form.
Данные формы могут быть посланы как переменные URL (с помощью method="get") или как HTTP post (с помощью method="post").
Этот атрибут используется вместе с type="submit" и type="image".

  Имя: <input type="text" name="fname" /><br />
  Фамилия: <input type="text" name="lname" /><br />
<input type="submit" value="Отправить" />
<input type="submit" formmethod="post" formaction="/tryit/html/htmlform_submit_post.php" value="Отправить посредством POST" />

Атрибут formtarget переопределяет атрибут target элемента form.
Этот атрибут используется с type="submit" и type="image".
Примечание: Фреймы и наборы фреймов больше не поддерживаются. Значения parent, top и framename в настоящее время в основном используются с элементами iframe.

  Имя: <input type="text" name="fname" /><br />
  Фамилия: <input type="text" name="lname" /><br />
<button type="submit" >Отправить</button>
<button type="submit" formtarget="_blank">Отправить в новое окно/вкладку</button>

[Makha]

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

Имя:<input type="text" name="fname" autofocus="autofocus" /><br />
Фамилия: <input type="text" name="lname" /><br />
<input type="submit" value="Отправить" />

Атрибут form определяет одну или несколько форм к которым элемент ввода принадлежит.
Значением атрибута form должно быть id формы к которой он принадлежит.
Для ссылки на более чем одну форму, используйте список разделенный пробелами.

 
  <p><input placeholder="Ваше имя" name="user" form="data"></p>
  <p><input type="submit" value="Отправить форму" form="data"></p>

Атрибут width используется только вместе с и указывает ширину изображения ввода.
Атрибут height используется только вместе с и указывает высоту изображения ввода.
Совет: Хорошей практикой является указать оба атрибута height и width для изображения. Если эти атрибуты указаны, пространство необходимое для изображения резервируется при загрузке страницы. Без этих атрибутов, браузер не знает размер изображения, и не может зарезервировать необходимое ему пространство. Результатом будет то, что макет страницы изменится при загрузке (во время загрузки изображения).