САЙТ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ НА РУССКОМ ЯЗЫКЕ
×

HTML5 Учебник

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

HTML Формы

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

HTML5

HTML5 Введение HTML5 Поддержка HTML5 Новые Элементы HTML5 Семантика HTML5 Миграция HTML5 Синтасис

HTML Графика

HTML Canvas HTML SVG HTML Google Карта

HTML Медиа

HTML Медиа HTML Видео HTML Аудио HTML Объекты HTML YouTube

HTML API

HTML Геолокация HTML Перетаскивание HTML Веб Хранилище HTML Веб Работник HTML СОС

HTML Примеры

HTML Примеры HTML Викторина HTML Упражнения HTML Сертификат HTML Заключение HTML Возможности

HTML Справочники

HTML Список Тегов HTML Атрибуты HTML Глобальные HTML События HTML Цвета HTML Холст HTML Аудио/Видео HTML Декларации HTML Набор Кодировок HTML URL Код HTML Коды языка HTML Коды стран HTTP Сообщения HTTP Методы Ковертер PX в EM Клавишные комбинации

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



Атрибут value

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

Пример

<form action="">
  Имя: <br>
  <input type="text" name="firstname" value="Андрей">
</form>
Редактор кода »

Атрибут readonly

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

Пример

<form action="">
  Имя:<br>
  <input type="text" name="firstname" value="Андрей" readonly>
</form>
Редактор кода »

Атрибут disabled

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

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

Пример

<form action="">
  Имя: <br>
  <input type="text" name="firstname" value="Андрей" disabled>
</form>
Редактор кода »

Атрибут size

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

Пример

<form action="">
  Имя: <br>
  <input type="text" name="firstname" value="Андрей" size="40">
</form>
Редактор кода »

Атрибут maxlength

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

Пример

<form action="">
  Имя: <br>
  <input type="text" name="firstname" maxlength="10">
</form>
Редактор кода »

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

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

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


Атрибуты HTML5

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

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


Атрибут autocomplete

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

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

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

Атрибут autocomplete работает в <form> и <input> типы: text, search, url, tel, email, password, datepickers, range и color.

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

Opera Safari Chrome Firefox Internet Explorer

Пример

<form action="/action_page.php" autocomplete="on">
  Имя: <input type="text" name="fname"><br><br>
  Фамилия: <input type="text" name="lname"><br><br>
  Электронная почта:<input type="email" name="email" autocomplete="off"><br><br>
  <input type="submit">
</form>
Редактор кода »

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


Атрибут novalidate

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

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

Форма при отправке не проверяться:

Opera Safari Chrome Firefox Internet Explorer

Пример

<form action="/action_page.php" novalidate>
  Электронная почта: <input type="email" name="user_email">
  <input type="submit">
</form>
Редактор кода »

Атрибут autofocus

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

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

Opera Safari Chrome Firefox Internet Explorer

Пример

  Имя: <input type="text" name="fname" autofocus>
Редактор кода »

Атрибут form

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

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

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

Opera Safari Chrome Firefox Internet Explorer

Пример

<form action="/action_page.php" id="form1">
  Имя: <input type="text" name="fname"><br><br>
  <input type="submit" value="Отправить">
</form>

Фамилия:<input type="text" name="lname" form="form1">
Редактор кода »

Атрибут formaction

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

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

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

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

Opera Safari Chrome Firefox Internet Explorer

Пример

<form action="/action_page.php">
  Имя: <input type="text" name="fname"><br>
  Фамилия: <input type="text" name="lname"><br>
  <input type="submit" value="Отправить"><br>
  <input type="submit" formaction="/action_page2.php"
  value="Отправить на другую страницу">
</form>
Редактор кода »

Атрибут formenctype

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

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

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

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

Opera Safari Chrome Firefox Internet Explorer

Пример

<form action="/action_page_binary.php" method="post">
  Имя:<input type="text" name="fname"><br>
  <input type="submit" value="Отправить">
  <input type="submit" formenctype="multipart/form-data"
  value="Отправить как multipart/form-data">
</form>
Редактор кода »

Атрибут formmethod

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

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

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

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

Opera Safari Chrome Firefox Internet Explorer

Пример

<form action="/action_page.php" method="get">
  Имя: <input type="text" name="fname"><br>
  Фамилия: <input type="text" name="lname"><br>
  <input type="submit" value="Отправить">
  <input type="submit" formmethod="post" formaction="/action_page_post.php"
 value="Отправить с помощью POST">
</form>
Редактор кода »

Атрибут formnovalidate

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

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

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

Opera Safari Chrome Firefox Internet Explorer

Пример

<form action="/action_page.php">
  Электронная почта: <input type="email" name="userid"><br>
  <input type="submit" value="Отправить"><br>
  <input type="submit" formnovalidate value="Отправить без подтверждения">
</form>
Редактор кода »

Атрибут formtarget

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

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

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

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

Opera Safari Chrome Firefox Internet Explorer

Пример

<form action="/action_page.php">
  Имя: <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">.

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

Определить изображение как кнопка "отправить", с помощью атрибутов height и width:

Opera Safari Chrome Firefox Internet Explorer

Пример

<input type="image" src="img_submit.gif" alt="Отправить" width="48" height="48">
Редактор кода »

Атрибут list

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

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

Opera Safari Chrome Firefox Internet Explorer

Пример

<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> элементы с минимальными и максимальными значениями:

Opera Safari Chrome Firefox Internet Explorer

Пример

Введите дату от 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 работает со следующими типами входных данных: электронной почтой и файлами.

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

Opera Safari Chrome Firefox Internet Explorer

Пример

Выбрать изображение: <input type="file" name="img" multiple>
Редактор кода »

Атрибут pattern

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

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

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

Совет: Подробнее регулярное выражение в нашем учебнике JavaScript.

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

Opera Safari Chrome Firefox Internet Explorer

Пример

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

Атрибут placeholder

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

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

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

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

Opera Safari Chrome Firefox Internet Explorer

Пример

<input type="text" name="fname" placeholder="Имя">
Редактор кода »

Атрибут required

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

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

Необходимое поле ввода:

Opera Safari Chrome Firefox Internet Explorer

Пример

Имя пользователя: <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.

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

Opera Safari Chrome Firefox Internet Explorer

Пример

<input type="number" name="points" step="3">
Редактор кода »

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


HTML Элементы Form и Input

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