HTML Атрибуты ввода

Атрибут value (значение)

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

Атрибут readonly (только для чтения)

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

Атрибут disabled

Атрибут 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 (автозаполнение)

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

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

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

Атрибут autocomplete работает с <form> и следующими типами <input>: text, search, url, tel, email, password, datepickers, range и color.

Пример

HTML-форма с автозаполнением (и выключенным для одного поля ввода):

<form action="/action_page.html" 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>

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

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

Атрибут novalidate (не проверять)

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

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

Пример

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

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

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

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

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

Пример

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

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

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

Атрибут form (форма)

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

Пример

Поле ввода, расположенное за пределами формы HTML (но все ещё часть формы):

<form action="/action_page.html" 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 (формирование)

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

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

The formaction attribute is used with type="submit" and type="image".

Пример

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

<form action="/action_page.html">
  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.html"
  value="Submit as admin">
</form>

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

Атрибут formenctype (форментип)

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

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

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

Пример

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

<form action="/action_page_binary.asp" 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 (метод формы)

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

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

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

Пример

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

<form action="/action_page.html" 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 переопределяет атрибут novalidate элемента <form>.

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

Пример

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

<form action="/action_page.html">
  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 определяет имя или ключевое слово, которое указывает, где отображать ответ, полученный после отправки формы.

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

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

Пример

Форма с двумя кнопками отправки, с разными целевыми окнами:

<form action="/action_page.html">
  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">.

Пример

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

<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 работают со следующими типами ввода: number, range, date, datetime-local, month, time и week.

Пример

<input> elements with min and max values:

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 (множество)

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

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

Пример

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

Select images: <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, date pickers, number, checkbox, radio и file.

Пример

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

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

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

Атрибут step (шаг)

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

Пример: если step="3", то допустимыми числами могут быть -3, 0, 3, 6 и т.д.

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

Пример

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

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

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

HTML Упражнения

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