Атрибуты ввода HTML
В этой главе описываются различные атрибуты <input>элемента HTML.
Атрибут значения
Атрибут input valueуказывает начальное значение для поля ввода:
Пример
Поля ввода с начальными (по умолчанию) значениями:
<form>
<label for="fname">First name:</label><br>
<input type="text"
id="fname" name="fname" value="John"><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname"
value="Doe">
</form>
Атрибут только для чтения
Атрибут input readonlyуказывает, что поле ввода доступно только для чтения.
Поле ввода, доступное только для чтения, нельзя изменить (однако пользователь может перейти к нему с помощью табуляции, выделить его и скопировать из него текст).
Значение поля ввода, доступного только для чтения, будет отправлено при отправке формы!
Пример
Поле ввода только для чтения:
<form>
<label for="fname">First name:</label><br>
<input type="text"
id="fname" name="fname" value="John" readonly><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname"
value="Doe">
</form>
Отключенный атрибут
Атрибут input disabledуказывает, что поле ввода должно быть отключено.
Отключенное поле ввода непригодно для использования и недоступно для кликов.
Значение отключенного поля ввода не будет отправлено при отправке формы!
Пример
Неактивное поле ввода:
<form>
<label for="fname">First name:</label><br>
<input type="text"
id="fname" name="fname" value="John" disabled><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname"
value="Doe">
</form>
Атрибут размера
Атрибут input sizeопределяет видимую ширину поля ввода в символах.
Значение по умолчанию равно size20.
Примечание . sizeАтрибут работает со следующими типами ввода: текст, поиск, телефон, URL-адрес, электронная почта и пароль.
Пример
Установите ширину поля ввода:
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname" size="50"><br>
<label
for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin"
size="4">
</form>
Атрибут maxlength
Атрибут input maxlengthуказывает максимальное количество символов, разрешенных в поле ввода.
Примечание. Если установлено значение a maxlength, поле ввода не будет принимать более указанного количества символов. Однако этот атрибут не обеспечивает никакой обратной связи. Итак, если вы хотите предупредить пользователя, вы должны написать код JavaScript.
Пример
Установите максимальную длину поля ввода:
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname" size="50"><br>
<label
for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin"
maxlength="4" size="4">
</form>
Минимальные и максимальные атрибуты
Ввод minи maxатрибуты определяют минимальное и максимальное значения для поля ввода.
Атрибуты minи maxработают со следующими типами ввода: число, диапазон, дата, локальная дата и время, месяц, время и неделя.
Совет: Используйте атрибуты max и min вместе, чтобы создать диапазон допустимых значений.
Пример
Установите максимальную дату, минимальную дату и диапазон допустимых значений:
<form>
<label for="datemax">Enter a date before
1980-01-01:</label>
<input type="date" id="datemax" name="datemax"
max="1979-12-31"><br><br>
<label for="datemin">Enter a date
after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin"
min="2000-01-02"><br><br>
<label for="quantity">Quantity
(between 1 and 5):</label>
<input type="number" id="quantity"
name="quantity" min="1" max="5">
</form>
Множественный атрибут
Атрибут ввода multipleуказывает, что пользователю разрешено вводить более одного значения в поле ввода.
Атрибут multipleработает со следующими типами ввода: электронная почта и файл.
Пример
Поле загрузки файла, которое принимает несколько значений:
<form>
<label for="files">Select files:</label>
<input
type="file" id="files" name="files" multiple>
</form>
Атрибут шаблона
Атрибут input patternуказывает регулярное выражение, по которому проверяется значение поля ввода при отправке формы.
Атрибут patternработает со следующими типами ввода: текст, дата, поиск, URL, телефон, электронная почта и пароль.
Совет: Используйте глобальный атрибут title для описания шаблона, чтобы помочь пользователю.
Совет: Узнайте больше о регулярных выражениях в нашем руководстве по JavaScript.
Пример
Поле ввода, которое может содержать только три буквы (без цифр или специальных символов):
<form>
<label for="country_code">Country code:</label>
<input type="text" id="country_code" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code">
</form>
Атрибут заполнителя
Атрибут input placeholderзадает краткую подсказку, описывающую ожидаемое значение поля ввода (примерное значение или краткое описание ожидаемого формата).
Короткая подсказка отображается в поле ввода до того, как пользователь введет значение.
Атрибут placeholderработает со следующими типами ввода: текст, поиск, URL, телефон, электронная почта и пароль.
Пример
Поле ввода с текстом-заполнителем:
<form>
<label for="phone">Enter a phone number:</label>
<input type="tel" id="phone" name="phone"
placeholder="123-45-678"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
Требуемый атрибут
Атрибут input requiredуказывает, что поле ввода должно быть заполнено перед отправкой формы.
Атрибут requiredработает со следующими типами ввода: текст, поиск, URL-адрес, телефон, электронная почта, пароль, средства выбора даты, номер, флажок, радио и файл.
Пример
Обязательное поле ввода:
<form>
<label for="username">Username:</label>
<input
type="text" id="username" name="username" required>
</form>
Атрибут шага
Атрибут input stepопределяет допустимые интервалы чисел для поля ввода.
Пример: если step="3", допустимыми числами могут быть -3, 0, 3, 6 и т. д.
Совет: Этот атрибут можно использовать вместе с атрибутами max и min для создания диапазона допустимых значений.
Атрибут stepработает со следующими типами ввода: число, диапазон, дата, локальная дата и время, месяц, время и неделя.
Пример
Поле ввода с указанным допустимым числом интервалов:
<form>
<label for="points">Points:</label>
<input
type="number" id="points" name="points" step="3">
</form>
Примечание. Ограничения ввода не являются надежными, и JavaScript предоставляет множество способов добавления недопустимого ввода. Чтобы безопасно ограничить ввод, он также должен быть проверен получателем (сервером)!
Атрибут автофокуса
Атрибут input autofocusуказывает, что поле ввода должно автоматически получать фокус при загрузке страницы.
Пример
Пусть поле ввода «Имя» автоматически получает фокус при загрузке страницы:
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname" autofocus><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname">
</form>
Атрибуты высоты и ширины
Входные данные heightи widthатрибуты определяют высоту и ширину <input
type="image">элемента.
Совет. Всегда указывайте атрибуты высоты и ширины для изображений. Если установлены высота и ширина, пространство, необходимое для изображения, резервируется при загрузке страницы. Без этих атрибутов браузер не знает размер изображения и не может зарезервировать для него соответствующее пространство. Эффект будет заключаться в том, что макет страницы изменится во время загрузки (пока загружаются изображения).
Пример
Определите изображение как кнопку отправки с атрибутами высоты и ширины:
<form>
<label for="fname">First name:</label>
<input
type="text" id="fname" name="fname"><br><br>
<label for="lname">Last
name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>
Атрибут списка
Атрибут input listотносится к <datalist>элементу, который содержит предопределенные параметры для элемента <input>.
Пример
Элемент <input> с предопределенными значениями в <datalist>:
<form>
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
Атрибут автозаполнения
Атрибут input autocompleteуказывает, должно ли автозаполнение формы или поля ввода быть включено или выключено.
Автозаполнение позволяет браузеру предсказать значение. Когда пользователь начинает вводить поле, браузер должен отображать варианты заполнения поля на основе ранее введенных значений.
Атрибут autocompleteработает со <form>следующими <input>типами и: текст, поиск, URL-адрес, телефон, электронная почта, пароль, средства выбора даты, диапазон и цвет.
Пример
HTML-форма с включенным и выключенным автозаполнением для одного поля ввода:
<form action="/action_page.php" autocomplete="on">
<label for="fname">First
name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname"
name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="off"><br><br>
<input type="submit" value="Submit">
</form>
Совет: в некоторых браузерах вам может потребоваться активировать функцию автозаполнения, чтобы это работало (смотрите в разделе «Настройки» в меню браузера).
HTML-упражнения
HTML-форма и элементы ввода
| Tag | Description |
|---|---|
| <form> | Defines an HTML form for user input |
| <input> | Defines an input control |
Полный список всех доступных HTML-тегов см. в нашем Справочнике по HTML-тегам .