Входные атрибуты HTML

В этой главе описываются различные атрибуты для элемента HTML <input>.

Атрибут value

Атрибут 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>

Атрибут disabled

Атрибут 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>

Атрибут size

Атрибут input size определяет видимую ширину поля ввода в символах.

Значение size по умолчанию равно 20.

Примечание: Атрибут 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 определяет максимальное количество символов, допустимое в поле ввода.

Примечание: Когда задана максимальная длина, поле ввода не будет принимать больше указанного количества символов. Однако этот атрибут не обеспечивает никакой обратной связи. Итак, если вы хотите предупредить пользователя, вы должны написать код JavaScript.

Атрибуты min и max

Входные атрибуты 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

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

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

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

<form> <label for="files">Select files:</label> <input type="file" id="files" name="files" multiple> </form>

Атрибут pattern

Атрибут 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>

Атрибут placeholder

Атрибут 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

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

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

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

<form> <label for="username">Username:</label> <input type="text" id="username" name="username" required> </form>

Атрибут input step

Атрибут 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 предоставляет множество способов добавления недопустимого ввода. Чтобы безопасно ограничить ввод, он также должен быть проверен получателем (сервером)!

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

Атрибут автофокусировки (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

Входные атрибуты height и width определяют высоту и ширину элемента <input type="image">.

Совет: Всегда указывайте атрибуты height и width для изображений. Если заданы height и width, пространство, необходимое для изображения, резервируется при загрузке страницы. Без этих атрибутов браузер не знает размер изображения и не может зарезервировать для него соответствующее пространство. Эффект будет заключаться в том, что макет страницы будет меняться во время загрузки (пока загружаются изображения).

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

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

Атрибут list

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

<form> <input list="browsers"> <datalist id="browsers"> <option value="Edge"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> </form>

Атрибут автозаполнения

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

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

Атрибут автозаполнения работает с <form> и следующими типами <input>: текст, поиск, url, телефон, электронная почта, пароль, указатели даты, диапазон и цвет.

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

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