Атрибуты HTML Input

Атрибут value

value Атрибут определяет начальное значение поля ввода:

Пример

<form action="">
 Имя:<br>
<input type="text" name="firstname" value="Bill">
<br>
 Фамилия:<br>
<input type="text" name="lastname">
</form>

Попробуйте сами

Атрибут readonly

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

Пример

<form action="">
 Имя:<br>
<input type="text" name="firstname" value="Bill" readonly>
<br>
 Фамилия:<br>
<input type="text" name="lastname">
</form>

Попробуйте сами

Атрибут readonly не требует значения. Он эквивалентен readonly="readonly".

Атрибут disabled

disabled Атрибут определяет, что поле ввода запрещено.

Запрещенные элементы недоступны и не могут быть нажаты.

Запрещенные элементы не будут отправлены.

Пример

<form action="">
 Имя:<br>
<input type="text" name="firstname" value="Bill" disabled>
<br>
 Фамилия:<br>
<input type="text" name="lastname">
</form>

Попробуйте сами

Атрибут disabled не требует значения. Он эквивалентен disabled="disabled".

Атрибут size

size Атрибут определяет размер вводимого поля (в символах):

Пример

<form action="">
 Имя:<br>
<input type="text" name="firstname" value="Bill" size="40">
<br>
 Фамилия:<br>
<input type="text" name="lastname">
</form>

Попробуйте сами

Атрибут maxlength

maxlength Параметр определяет максимальную длину вводимых данных в поле ввода:

Пример

<form action="">
 Имя:<br>
<input type="text" name="firstname" maxlength="10">
<br>
 Фамилия:<br>
<input type="text" name="lastname">
</form>

Попробуйте сами

Если установлено значение атрибута maxlength, то вводимое устройство не принимает более разрешенного количества символов.

Этот атрибут не предоставляет никакой обратной связи. Если необходимо уведомить пользователя, необходимо написать код JavaScript.

Комментарий:Ограничения ввода не всегда надежны. JavaScript предоставляет множество методов для добавления非法 вводов. Для безопасного ограничения ввода получатель (сервер) должен также проверять ограничения.

Атрибуты HTML5

HTML5 добавил такие атрибуты для <input>:

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height и width
  • list
  • min и max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

и добавить такие атрибуты для <form>, как необходимо:

  • autocomplete
  • novalidate

Атрибут autocomplete

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

Когда автоматическая подстановка включена, браузер автоматически填写 значения на основе предыдущих вводов пользователя.

Совет:Вы можете установить автоматическую подстановку формы на on, а для отдельных полей ввода на off, и наоборот.

Атрибут autocomplete applies to <form> and the following <input> types: text, search, url, tel, email, password, datepickers, range and color.

Пример

HTML-формы с включенной автоматической подстановкой (который-либо ввод данных выключен):

<form action="action_page.php" autocomplete="on">
   Имя:<input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   E-mail: <input type="email" name="email" autocomplete="off"><br>
   <input type="submit">
</form>

Попробуйте сами

Совет:В некоторых браузерах вам может потребоваться手动 включить функцию автоматического завершения ввода.

Свойство novalidate

Свойство novalidate относится к свойствам <form>.

Если установлено, то novalidate определяет, что данные формы не будут проверены при отправке.

Пример

Указывает, что форма не должна быть проверена при отправке:

<form action="action_page.php" novalidate>
   E-mail: <input type="email" name="user_email">
   <input type="submit">
</form>

Попробуйте сами

Свойство autofocus

Свойство autofocus является булевым свойством.

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

Пример

Установите фокус на поле ввода "First name" автоматически при загрузке страницы:

First name:<input type="text" name="fname" autofocus>

Попробуйте сами

Свойство form

Свойство form определяет одну или несколько форм, к которым относится элемент <input>.

Совет:Для ссылки на несколько форм используйте список идентификаторов форм, разделенных пробелами.

Пример

Поле ввода находится вне формы HTML (но все еще принадлежит к форме):

<form action="action_page.php" id="form1">
   First name: <input type="text" name="fname"><br>
   <input type="submit" value="Подтвердить">
</form>
 Last name: <input type="text" name="lname" form="form1">

Попробуйте сами

Свойство formaction

Свойство formaction определяет URL файла, который обрабатывается при отправке формы.

Свойство formaction покрывает атрибут action элемента <form>.

Свойство formaction применяется к элементам с type="submit" и type="image".

Пример

HTML-форма с двумя кнопками отправки и различными действиями:

<form action="action_page.php">
   First name: <input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   <input type="submit" value="Подтвердить"><br>
   <input type="submit" formaction="demo_admin.asp"
   value="Submit as admin">
</form>

Попробуйте сами

Свойство formenctype

Свойство formenctype определяет, как кодировать данные формы (form-data) при их отправке на сервер (только для форм с method="post").

Свойство formenctype покрывает атрибут enctype элемента <form>.

Атрибут formenctype применяется к type="submit" и type="image".

Пример

Отправка данных формы с использованием кодировки по умолчанию и кодировкой "multipart/form-data" (вторая кнопка подтверждения):

<form action="demo_post_enctype.asp" method="post">
   First name: <input type="text" name="fname"><br>
   <input type="submit" value="Подтвердить">
   <input type="submit" formenctype="multipart/form-data">
   value="Подтвердить как multipart/form-data">
</form>

Попробуйте сами

Атрибут formmethod

Атрибут formmethod определяет HTTP-метод, который используется для отправки данных формы (form-data) по адресу action URL.

Атрибут formmethod переопределяет атрибут method элемента <form>.

Атрибут formmethod применяется к type="submit" и type="image".

Пример

Вторая кнопка подтверждения изменяет метод HTTP формы:

<form action="action_page.php" method="get">
   First name: <input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   <input type="submit" value="Подтвердить">
   <input type="submit" formmethod="post" formaction="demo_post.asp">
   value="Подтвердить с помощью POST">
</form>

Попробуйте сами

Атрибут formnovalidate

Атрибут novalidate является булевым атрибутом.

Если установлен, то определяет, что при отправке формы не будет проверки элементов <input>.

Атрибут formnovalidate переопределяет атрибут novalidate элемента <form>.

Атрибут formnovalidate можно использовать для type="submit".

Пример

Форма с двумя кнопками подтверждения (с проверкой и без проверки):

<form action="action_page.php">
   E-mail: <input type="email" name="userid"><br>
   <input type="submit" value="Подтвердить"><br>
   <input type="submit" formnovalidate value="Подтвердить без проверки">
</form>

Попробуйте сами

Атрибут formtarget

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

Атрибут formtarget будет перезаписывать атрибут target элемента <form>.

Атрибут formtarget может использоваться с type="submit" и type="image".

Пример

Этот формуляр имеет два кнопки отправки, соответствующие различным целям окна:

<form action="action_page.php">
   First name: <input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   <input type="submit" value="Submit as normal">
   <input type="submit" formtarget="_blank">
   value="Submit to a new window">
</form>

Попробуйте сами

Атрибуты height и width

Атрибуты height и width определяют высоту и ширину элемента <input>.

Атрибуты height и width используются только для <input type="image">.

Комментарий:Всегда указывайте размеры изображения. Если браузер не знает размеров изображения, страница будет мерцать при загрузке изображения.

Пример

Определите изображение как кнопку отправки и установите атрибуты height и width:

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

Попробуйте сами

Атрибут list

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

Пример

Использование <datalist> для настройки элементов <input> с предопределенными значениями:

<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist>

Попробуйте сами

Атрибуты min и max

Атрибуты min и max определяют минимальное и максимальное значения элемента <input>.

Атрибуты min и max подходят для следующих типов ввода: number, range, date, datetime, datetime-local, month, time и week.

Пример

Элемент <input> с минимальным и максимальным значениями:

Введите дату до 1980-01-01:
<input type="date" name="bday" max="1979-12-31">
 Введите дату после 2000-01-01:
<input type="date" name="bday" min="2000-01-02">
 Количество (от 1 до 5):
<input type="number" name="quantity" min="1" max="5">

Попробуйте сами

Атрибут multiple

Атрибут multiple является булевым атрибутом.

Если установлен, то определяет, разрешено ли пользователю вводить более одного значения в элементе <input>.

Атрибут multiple подходит для следующих типов ввода: email и file.

Пример

Поле загрузки файлов, принимающее несколько значений:

Выберите изображение: <input type="file" name="img" multiple>

Попробуйте сами

Атрибут pattern

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

Атрибут pattern подходит для следующих типов ввода: text, search, url, tel, email и password.

Совет:Используйте глобальный атрибут title для описания шаблона, чтобы помочь пользователю.

Совет:Узнайте больше о регулярных выражениях в нашем уроке JavaScript.

Пример

Поле ввода, содержащее только три буквы (без цифр или специальных символов):

Country code: 
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

Попробуйте сами

Атрибут placeholder

Атрибут placeholder определяет提示, используемый для описания ожидаемого значения поля ввода (образец значения или краткое описание формата).

Этот提示 будет отображаться в поле ввода перед вводом значения пользователем.

Атрибут placeholder применяется к следующим типам ввода: text, search, url, tel, email и password.

Пример

Поля ввода с текстом подсказки:

<input type="text" name="fname" placeholder="First name">

Попробуйте сами

Атрибут required

Атрибут required является булевым атрибутом.

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

Атрибут required применяется к следующим типам ввода: text, search, url, tel, email, password, выборщики даты, number, checkbox, radio и file.

Пример

Обязательные поля ввода:

Username: <input type="text" name="usrname" required>

Попробуйте сами

Атрибут step

Атрибут step определяет законные интервалы чисел для элемента <input>.

Пример: если step="3", то законные числа должны быть -3, 0, 3, 6 и т.д.

Совет:Атрибут step может использоваться вместе с атрибутами max и min для создания диапазона законных значений.

Атрибут step применяется к следующим типам ввода: number, range, date, datetime, datetime-local, month, time и week.

Пример

Поля ввода с конкретными законными интервалами чисел:

<input type="number" name="points" step="3">

Попробуйте сами