ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

HTML5 Учебник

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 Голова веб-страницы HTML Макеты HTML Адаптивность HTML Компьютерный код HTML Символьные объекты HTML Символы HTML Кодировка HTML URL кодирование HTML XHTML

HTML Формы

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

HTML5

HTML5 Введение HTML5 Поддержка HTML5 Новые элементы HTML5 Семантические элементы HTML5 Переход с HTML4 HTML5 Гид по стилю

HTML Графика

HTML Canvas HTML SVG

HTML Медиа

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 Цвета HTML Canvas HTML Аудио/Видео HTML Действующие Doctype HTML Наборы символов HTML URL кодировка HTML Кодировка языка HTTP Сообщения HTTP Методы PX в EM Конвертер Горячие клавиши

HTML5. Уроки для начинающих

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.

Opera Safari Chrome Firefox Internet Explorer

Пример

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

Opera Safari Chrome Firefox Internet Explorer

Пример

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

<form action="/action_page.php" novalidate>
  E-mail: <input type="email" name="user_email">
  <input type="submit">
</form>
Попробуйте сами »

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

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

Opera Safari Chrome Firefox Internet Explorer

Пример

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

First name:<input type="text" name="fname" autofocus>
Попробуйте сами »

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

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

Opera Safari Chrome Firefox Internet Explorer

Пример

Поле ввода, расположенное за пределами формы 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".

Opera Safari Chrome Firefox Internet Explorer

Пример

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".

Opera Safari Chrome Firefox Internet Explorer

Пример

Отправить данные формы, которые закодированы по умолчанию (первая кнопка отправки) и закодированы как "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".

Opera Safari Chrome Firefox Internet Explorer

Пример

Вторая кнопка отправки переопределяет 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".

Opera Safari Chrome Firefox Internet Explorer

Пример

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

<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".

Opera Safari Chrome Firefox Internet Explorer

Пример

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

<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">.

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

Opera Safari Chrome Firefox Internet Explorer

Пример

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

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
Попробуйте сами »

Атрибут list (список)

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

Opera Safari Chrome Firefox Internet Explorer

Пример

Элемент <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.

Opera Safari Chrome Firefox Internet Explorer

Пример

<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.

Opera Safari Chrome Firefox Internet Explorer

Пример

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

Select images: <input type="file" name="img" multiple>
Попробуйте сами »

Атрибут pattern (паттерн)

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

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

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

Совет: Узнайте больше о регулярных выражениях в JavaScript учебнике.

Opera Safari Chrome Firefox Internet Explorer

Пример

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

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.

Opera Safari Chrome Firefox Internet Explorer

Пример

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

<input type="text" name="fname" placeholder="First name">
Попробуйте сами »

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

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

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

Opera Safari Chrome Firefox Internet Explorer

Пример

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

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.

Opera Safari Chrome Firefox Internet Explorer

Пример

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

<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 Справочник тегов.