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

В этом разделе описаны разные атрибуты для элемента HTML <input>.

Атрибут 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">
 Имя<input type="text" name="fname"><br>
 Прізвище: <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 указывает, что поле ввода должно автоматически сфокусироваться при загрузке страницы.

Пример

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

Имя<input type="text" name="fname" autofocus>

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

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

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

Пример

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

<form action="/action_page.html" id="form1">
 Имя <input type="text" name="fname"><br>
 <input type="submit" value="Submit">
</form>

Фамилия: <input type="text" name="lname" form="form1">

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

Атрибут formaction (формирование)

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

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

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

Пример

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

<form action="/action_page.html">
 Имя <input type="text" name="fname"><br>
 Фамилия: <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">
 Имя <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">
 Имя <input type="text" name="fname"><br>
 Прізвище: <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">
 Имя <input type="text" name="fname"><br>
  Фамилия: <input type="text" name="lname"><br>
  <input type="submit" value="Отправить как обычно">
  <input type="submit" formtarget="_blank"
  value="Отправить в новом окне">
</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> элементы со значениями min и max:

Введите дату раньше 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 учебнике на нашем сайте W3Schools на русском.

Пример

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

Код страны: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Трехбуквенный код страны">

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

Атрибут placeholder (заполнитель)

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

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

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

Пример

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

<input type="text" name="fname" placeholder="Ім’я">

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

Атрибут required (требование)

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

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

Пример

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

Имя пользователя: <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 форма и элементы ввода