HTML Input Attributes. Атрибуты ввода
Курс по основам HTML. W3Schools на русском языке. Уроки для начинающих
Атрибут 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 указывает, должна ли форма или поле использовать автозаповнение.
Когда автозаполнение включено, браузер автоматически завершает вводимые значения на основе значений, введенных пользователем ранее.
Совет: Можно иметь автозаполнение "включено" для формы и "выключено" для определённых полей ввода данных, или наоборот.
Атрибут 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 переопределяет атрибут элемента <form>.
Атрибут formaction используется с type="submit" та 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".
Пример:
Отправляются данные формы, кодированные по умолчанию (первая кнопка submit), и кодированные как "multipart/form-data" (вторая кнопка submit):
<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.
Атрибут formmethod переопределяет атрибут метода элемента <form>.
Атрибут formmethod можно использовать с type="submit" и type="image".
Пример:
Вторая кнопка 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 заменяет атрибут novalidate элемента <form>.
Атрибут formnovalidate можно использовать с type="submit".
Пример:
Форма с двумя кнопками 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".
Пример:
Форма с двумя кнопками submit, с разными целевыми окнами:
<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">.
Всегда указывайте размер изображений. Если веб-браузер не знает размера, страница будет мерцать во время загрузки изображений.
Пример:
Определить изображение как кнопку submit, с атрибутами высоты и ширины:
<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 работают с такими типами input: number, range, date, datetime-local, month, time и week.
Пример:
<input> элементы с min и max значениями:
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 работает с такими типами input: email и file.
Пример:
Поле загрузки файла, которое принимает несколько значений:
Select images: <input type="file" name="img" multiple>
Попробуйте сами »
Атрибут pattern (шаблон)
Атрибут pattern определяет регулярное выражение, в котором проверяется значение элемента <input>.
Атрибут pattern работает с такими типами input: 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 работает с такими типами input: text, search, url, tel, email и password.
Пример:
Поле ввода с текстом placeholder:
<input type="text" name="fname" placeholder="First name">
Попробуйте сами »
Атрибут required (требование)
Атрибут required указывает, что поле ввода необходимо заполнить перед подачей формы.
Атрибут required работает с такими типами input: text, search, url, tel, email, password, date pickers, number, checkbox, radio и file.
Пример:
Поле ввода required:
Username: <input type="text" name="usrname" required>
Попробуйте сами »
Атрибут step (шаг)
Атрибут step указывает интервалы действительного числа для элемента <input>.
Пример: если step="3", действительными числами могут быть -3, 0, 3, 6 и т.д.
Совет: Атрибут step можно использовать вместе с атрибутами max и min, чтобы создать диапазон действительных значений.
Атрибут step работает с такими типами input: number, range, date, datetime-local, month, time и week.
Пример:
Поле ввода с точно определёнными промежутками интервалов:
<input type="number" name="points" step="3">
Попробуйте сами »
Проверьте себя с помощью упражнений
HTML формы и элементы ввода
| Тег | Описание |
|---|---|
<form> |
Определяет HTML форму для ввода пользователем |
<input> |
Определяет элемент управления вводом |
Примечание: Для получения полного списка всех доступных HTML тегов, посетите Справочник HTML тегов.