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

HTML5 Tutorial

HTML HOME HTML Introduction HTML Editors HTML Basic HTML Elements HTML Attributes HTML Headings HTML Paragraphs HTML Styles HTML Formatting HTML Quotations HTML Comments HTML Colors HTML CSS HTML Links HTML Images HTML Tables HTML Lists HTML Blocks HTML Classes HTML Id HTML Iframes HTML JavaScript HTML File Paths HTML Head HTML Layout HTML Responsive HTML Computercode HTML Entities HTML Symbols HTML Charset HTML URL Encode HTML XHTML

HTML Forms

HTML Forms HTML Form Elements HTML Input Types HTML Input Attributes

HTML5

HTML5 Intro HTML5 Support HTML5 New Elements HTML5 Semantics HTML5 Migration HTML5 Style Guide

HTML Graphics

HTML Canvas HTML SVG HTML Google Maps

HTML Media

HTML Media HTML Video HTML Audio HTML Plug-ins HTML YouTube

HTML APIs

HTML Geolocation HTML Drag/Drop HTML Web Storage HTML Web Workers HTML SSE

HTML Examples

HTML Examples HTML Accessibility

HTML References

HTML Tag List HTML Attributes HTML Events HTML Colors HTML Canvas HTML Audio/Video HTML Doctypes HTML Character Sets HTML URL Encode HTML Lang Codes HTTP Messages HTTP Methods PX to EM Converter Keyboard Shortcuts

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 указывает, что поле ввода отключено.

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

Пример

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

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

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

Атрибут autocomplete работает с <form> и следующими типами <input>: текстом, поиском, URL, тел, электронной почтой, паролем, датепиккерс, диапазоном и цветом.

Opera Safari Chrome Firefox Internet Explorer

Пример

HTML-форма с автозаполнением on (и Off для одного поля ввода):

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

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


Атрибут unvalidate

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

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

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

Opera Safari Chrome Firefox Internet Explorer

Пример

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

First name:<input type="text" name="fname" autofocus>

Атрибут формы

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

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

Атрибут формактион используется с type="submit" и 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 указывает, как данные формы должны кодироваться при отправке (только для форм с методом = "Post").

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

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

Opera Safari Chrome Firefox Internet Explorer

Пример

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

<form action="/action_page_binary.php" 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 определяет метод HTTP для отправки данных формы в URL-адрес действия.

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

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

Opera Safari Chrome Firefox Internet Explorer

Пример

Вторая кнопка Submit переопределяет метод 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 переопределяет атрибут unvalidate элемента <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 переопределяет целевой атрибут элемента <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

Пример

Определите изображение как кнопку Submit с атрибутами Height и Width:

<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 работают со следующими типами ввода: число, диапазон, Дата, DateTime-Local, месяц, время и неделя.

Opera Safari Chrome Firefox Internet Explorer

Пример

<input> элементы с минимальными и максимальными значениями:

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

Атрибут multiple работает со следующими типами ввода: Электронная почта и файл.

Opera Safari Chrome Firefox Internet Explorer

Пример

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

Select images: <input type="file" name="img" multiple>

Атрибут pattern

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

Атрибут pattern работает со следующими типами ввода: текстом, поиском, URL-адресом, тел, электронной почтой и паролем.

Совет: Используйте атрибут Global 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 работает со следующими типами ввода: текстом, поиском, URL-адресом, тел, электронной почтой и паролем.

Opera Safari Chrome Firefox Internet Explorer

Пример

Поле ввода с замещающим текстом:

<input type="text" name="fname" placeholder="First name">

Обязательный атрибут

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

Атрибут required работает со следующими типами ввода: текст, поиск, URL, тел, электронная почта, пароль, Дата выборки, номер, флажок, Радио и файл.

Opera Safari Chrome Firefox Internet Explorer

Пример

Требуемое поле ввода:

Username: <input type="text" name="usrname" required>

Атрибут step

Атрибут step указывает интервалы юридических чисел для элемента <input>.

Пример: Если шаг = "3", юридические номера могут быть-3, 0, 3, 6 и т.д.

Совет: Атрибут Step можно использовать вместе с атрибутами Max и min для создания диапазона юридических значений.

Атрибут step работает со следующими типами ввода: число, диапазон, Дата, DateTime-Local, месяц, время и неделя.

Opera Safari Chrome Firefox Internet Explorer

Пример

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

<input type="number" name="points" step="3">

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

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