САЙТ НАХОДИТСЯ В РАЗРАБОТКЕ

HTML Учебник

HTML Главная HTML Введение HTML Редакторы HTML Основы HTML Элементы HTML Атрибуты HTML Заголовки HTML Параграфы HTML Стили HTML Форматирование HTML Цитаты HTML Комментарии HTML Цвета HTML CSS HTML Ссылки HTML Изображения HTML Таблицы HTML Списки HTML Блоки HTML Класс HTML Идентификатор HTML Фреймы HTML JavaScript HTML Пути к файлам HTML Head HTML Макеты HTML Адаптивность HTML Компьютерный код HTML Семантика HTML Объект HTML Символы HTML Emojis HTML Кодировка HTML URL кодирование HTML XHTML HTML Гид по стилю

HTML Формы

HTML Формы HTML Элементы формы HTML Тип ввода HTML Атрибуты ввода

HTML 5

HTML5 Введение HTML5 Поддержка HTML5 Новые элементы HTML5 Переход

HTML Графика

HTML Canvas HTML SVG

HTML Media

HTML Медиа HTML Видео HTML Аудио HTML Плагины HTML YouTube

HTML API

HTML Геолокация HTML Drag/Drop HTML Web хранилище HTML Web работник HTML SSE

HTML Примеры

HTML Примеры HTML Викторина HTML Упражнения HTML Резюме HTML Доступность

HTML Справочник

HTML Список тегов HTML Атрибуты HTML Глоб. атрибуты HTML События HTML Цвета HTML Canvas HTML Аудио/Видео HTML Набор символов HTML DOCTYPE HTML URL Кодирование HTML Коды языков HTML Коды стран HTTP Сообщений HTTP Метод PX в EM Конвертер Горячие клавиши

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


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

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

Пример

<form action="">
  First name:<br>
  <input type="text" name="firstname" value="John">
</form>
Попробуйте сами »

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

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

Пример

<form action="">
  First name:<br>
  <input type="text" name="firstname" value="John" readonly>
</form>
Попробуйте сами »

Атрибут disabled

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

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

Пример

<form action="">
  First name:<br>
  <input type="text" name="firstname" value="John" disabled>
</form>
Попробуйте сами »

Атрибут size (размер)

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

Пример

<form action="">
  First name:<br>
  <input type="text" name="firstname" value="John" size="40">
</form>
Попробуйте сами »

Атрибут maxlength (максимальная длина)

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

Пример

<form action="">
  First name:<br>
  <input type="text" name="firstname" maxlength="10">
</form>
Попробуйте сами »

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

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

Примечание: Ограничения ввода не являются надежными, и 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.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>
Попробуйте сами »

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


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

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

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

Пример

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

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

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

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

The formaction attribute is used with type="submit" and 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 (форментип)

Атрибут 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.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 переопределяет атрибут novalidate элемента <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 определяет имя или ключевое слово, которое указывает, где отображать ответ, полученный после отправки формы.

Атрибут 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">.

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

Пример

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

<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 может использоваться вместе с атрибутами max и min для создания диапазона допустимых значений.

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

Пример

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

<input type="number" name="points" step="3">
Попробуйте сами »

HTML Упражнения

Проверьте себя с помощью упражнений

Упражнение:

В поле ввода ниже добавьте заполнитель, который сообщает "Your name here" (укажите своё имя).

<form action="/action_page.php">
<input type="text" >
</form>

Начать упражнение


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

Тег Описание
<form> Определяет HTML форму для пользовательского ввода
<input> Определяет элемент управления вводом

Для получения полного списка всех доступных тегов HTML, посетите наш HTML Справочник тегов.