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

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

Атрибут value

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

Пример

Поля ввода с начальными (по умолчанию) значениями:

<form>
  <label for="fname">Имя:</label><br>
  <input type="text" id="fname" name="fname" value="Джон"><br>
  <label for="lname">Фамилия:</label><br>
  <input type="text" id="lname" name="lname" value="Доу">
</form>

Атрибут readonly

Атрибут readonly указывает, что поле ввода доступно только для чтения.

Поле ввода, доступное только для чтения, нельзя изменить (однако пользователь может перейти к нему с помощью клавиши Tab, выделить его и скопировать из него текст).

Значение поля ввода, доступного только для чтения, будет отправлено на сервер при отправке формы!

Пример

Поле ввода, доступное только для чтения:

<form>
  <label for="fname">Имя:</label><br>
  <input type="text" id="fname" name="fname" value="Джон" readonly><br>
  <label for="lname">Фамилия:</label><br>
  <input type="text" id="lname" name="lname" value="Доу">
</form>

Атрибут disabled

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

Отключённое поле ввода нельзя использовать и нельзя выбрать щелчком мыши.

Значение отключённого поля ввода не будет отправлено на сервер при отправке формы!

Пример

Отключённое поле ввода:

<form>
  <label for="fname">Имя:</label><br>
  <input type="text" id="fname" name="fname" value="Джон" disabled><br>
  <label for="lname">Фамилия:</label><br>
  <input type="text" id="lname" name="lname" value="Доу">
</form>

Атрибут size

Атрибут size задаёт видимую ширину поля ввода в символах.

Значение по умолчанию для size — 20.

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

Пример

Задание ширины для поля ввода:

<form>
  <label for="fname">Имя:</label><br>
  <input type="text" id="fname" name="fname" size="50"><br>
  <label for="pin">PIN‑код:</label><br>
  <input type="text" id="pin" name="pin" size="4">
</form>

Атрибут maxlength

Атрибут maxlength задаёт максимальное количество символов, разрешённое в поле ввода.

Примечание: Если задано значение maxlength, поле ввода не примет больше указанного количества символов. Однако этот атрибут не предоставляет никакой обратной связи. Поэтому, если вы хотите предупредить пользователя, необходимо написать код на JavaScript.

Пример

Задание максимальной длины для поля ввода:

<form>
  <label for="fname">Имя:</label><br>
  <input type="text" id="fname" name="fname" size="50"><br>
  <label for="pin">PIN‑код:</label><br>
  <input type="text" id="pin" name="pin" maxlength="4" size="4">
</form>

Атрибуты min и max

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

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

Совет: Используйте атрибуты max и min вместе, чтобы создать диапазон допустимых значений.

Пример

Задание максимальной даты, минимальной даты и диапазона допустимых значений:

<form>
  <label for="datemax">Введите дату до 1980‑01‑01:</label>
  <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>

  <label for="datemin">Введите дату после 2000‑01‑01:</label>
  <input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>

  <label for="quantity">Количество (от 1 до 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">
</form>

Атрибут multiple

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

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

Пример

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

<form>
  <label for="files">Выберите файлы:</label>
  <input type="file" id="files" name="files" multiple>
</form>

Атрибут pattern

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

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

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

Пример

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

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

Атрибут placeholder

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

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

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

Пример

Поле ввода с текстом‑подсказкой:

<form>
  <label for="phone">Введите номер телефона:</label>
  <input type="tel" id="phone" name="phone"
  placeholder="123‑45‑678"
  pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>

Атрибут required

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

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

Пример

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

<form>
  <label for="username">Имя пользователя:</label>
  <input type="text" id="username" name="username" required>
</form>

Атрибут step

Атрибут step задаёт допустимые числовые интервалы для поля ввода.

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

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

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

Пример

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

<form>
  <label for="points">Баллы:</label>
  <input type="number" id="points" name="points" step="3">
</form>

Примечание: Ограничения для ввода не являются абсолютно надёжными, и JavaScript предоставляет множество способов ввести недопустимые данные. Чтобы безопасно ограничить ввод, его также необходимо проверять на стороне получателя (на сервере)!

Атрибут autofocus

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

Пример

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

<form>
  <label for="fname">Имя:</label><br>
  <input type="text" id="fname" name="fname" autofocus><br>
  <label for="lname">Фамилия:</label><br>
  <input type="text" id="lname" name="lname">
</form>

Атрибуты height и width

Атрибуты height и width задают высоту и ширину элемента <input type="image">.

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

Пример

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

<form>
  <label for="fname">Имя:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Фамилия:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="image" src="img_submit.gif" alt="Отправить" width="48" height="48">
</form>

Атрибут list

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

Пример

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

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

Атрибут autocomplete

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

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

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

Пример

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

<form action="/action_page.php" autocomplete="on">
  <label for="fname">Имя:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Фамилия:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" autocomplete="off"><br><br>
  <input type="submit" value="Отправить">
</form>

Совет: В некоторых браузерах может потребоваться активировать функцию автозаполнения, чтобы она работала (ищите в разделе «Настройки» в меню браузера).

HTML Атрибуты ввода - ПредыдущийHTML Типы вводаСледующий - HTML Атрибуты вводаHTML Атрибуты ввода form*
To top