HTML Входные атрибуты

Атрибут value

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

Атрибут ReadOnly

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

Отключенный атрибут

Атрибут disabled указывает, что поле ввода отключено.

Отключенное поле ввода непригодно для использования и не может быть нажато, и его значение не будет отправлено при отправке формы:

Атрибут size

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

Атрибут MaxLength

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

С атрибутом maxlength поле ввода не будет принимать больше допустимого числа символов.

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

Атрибуты HTML5

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

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

и следующие атрибуты для <form>:

• autocomplete
• novalidate

Атрибут автозаполнения

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

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

Совет: Можно иметь Автозаполнение "on" для формы и "OFF" для определенных полей ввода или наоборот.

Атрибут autocomplete работает с <form> и следующими типами <input>: текстом, поиском, URL, тел, электронной почтой, паролем, датепиккерс, диапазоном и цветом.

Пример

HTML-форма с автозаполнением on (и Off для одного поля ввода):

<form action="/action_page.php" autocomplete="on">
  First name:<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>

Просмотр демо в редакторе

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

Атрибут unvalidate

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

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

Пример

Указывает, что форма не проверяется при отправке:

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

Просмотр демо в редакторе

Атрибут автофокусировки

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

Пример

Пусть поле ввода «имя» автоматически получает фокус при загрузке страницы:

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

Просмотр демо в редакторе

Атрибут формы

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

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

Пример

Поле ввода, расположенное вне HTML-формы (но все еще являющегося частью формы):

<form action="/action_page.php" id="form1">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
</form>

Last name: <input type="text" name="lname" form="form1">

Просмотр демо в редакторе

Атрибут формактион

Атрибут formaction указывает URL-адрес файла, который будет обрабатывать элемент управления вводом при отправке формы.

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

Атрибут формактион используется с 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="Submit"><br>
  <input type="submit" formaction="/action_page2.php"
  value="Submit as admin">
</form>

Просмотр демо в редакторе

Атрибут форменктипе

Атрибут formenctype указывает, как данные формы должны кодироваться при отправке (только для форм с методом = "Post").

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

Атрибут formenctype используется с type="submit" и type="image".

Пример

Отправьте форму-данные, закодированные по умолчанию (первая кнопка Submit), и закодированные как "составные/формы-данные" (вторая кнопка Submit):

<form action="/action_page_binary.php" method="post">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
  <input type="submit" formenctype="multipart/form-data"
  value="Submit as Multipart/form-data">
</form>

Просмотр демо в редакторе

Атрибут форммесод

Атрибут formmethod определяет метод HTTP для отправки данных формы в URL-адрес действия.

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

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

Пример

Вторая кнопка Submit переопределяет метод 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="Submit">
  <input type="submit" formmethod="post" value="Submit using POST">
</form>

Просмотр демо в редакторе

Атрибут formnovalidate

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

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

Пример

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

<form action="/action_page.php">
  E-mail: <input type="email" name="userid"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formnovalidate value="Submit without validation">
</form>

Просмотр демо в редакторе

Атрибут формтаржет

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

Атрибут formtarget переопределяет целевой атрибут элемента <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 type="image">.

Пример

Определите изображение как кнопку Submit с атрибутами Height и Width:

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

Просмотр демо в редакторе

Атрибут List

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

Пример

Элемент <input> с заранее определенными значениями в <DataList>:

<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 работают со следующими типами ввода: число, диапазон, Дата, DateTime-Local, месяц, время и неделя.

Пример

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

Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">

Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">

Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">

Просмотр демо в редакторе

Множественный атрибут

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

Атрибут multiple работает со следующими типами ввода: Электронная почта и файл.

Пример

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

Select images: <input type="file" name="img" multiple>

Просмотр демо в редакторе

Атрибут pattern

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

Атрибут pattern работает со следующими типами ввода: текстом, поиском, URL-адресом, тел, электронной почтой и паролем.

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

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

Пример

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

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

Просмотр демо в редакторе

Атрибут заполнителя

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

Подсказка отображается в поле ввода перед вводом пользователем значения.

Атрибут placeholder работает со следующими типами ввода: текстом, поиском, URL-адресом, тел, электронной почтой и паролем.

Пример

Поле ввода с замещающим текстом:

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

Просмотр демо в редакторе

Обязательный атрибут

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

Атрибут required работает со следующими типами ввода: текст, поиск, URL, тел, электронная почта, пароль, Дата выборки, номер, флажок, Радио и файл.

Пример

Требуемое поле ввода:

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

Просмотр демо в редакторе

Атрибут step

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

Пример: Если шаг = "3", юридические номера могут быть-3, 0, 3, 6 и т.д.

Атрибут step работает со следующими типами ввода: число, диапазон, Дата, DateTime-Local, месяц, время и неделя.

Пример

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

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

Просмотр демо в редакторе

HTML-формы и элементы ввода