САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ

HTML Учебник

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 Символы HTML Эмодзи HTML Кодировка HTML URL Кодировка HTML в XHTML

HTML Формы

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

HTML Графика

HTML Canvas HTML SVG

HTML Медиа

HTML Медиа формат HTML Video HTML Audio HTML Плагины HTML YouTube

HTML API

HTML Геолакация HTML Перетаскивание HTML Веб хранилище HTML Веб работник HTML SSE

HTML Примеры

HTML Примеры HTML Тестирование HTML Упражнения HTML Сертификат HTML Заключение HTML Возможности

HTML Справочники

HTML Список тегов HTML Атрибуты HTML Глобальные атрибуты HTML Поддержка браузера HTML События HTML Цвета HTML Холст HTML Аудио/Видео HTML Типы документов HTML Кодировка символов HTML URL Кодировка HTML Коды языка HTTP Сообщения HTTP Методы PX в EM конвертер Клавишные комбинации

HTML Атрибуты ввода



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

Атрибут value

Ввод атрибута value задает начальное значение для поля ввода:

Пример

Поля ввода с начальными (по умолчанию) значениями:

<form>
  <label for="fname">Имя:</label><br>
  <input type="text" id="fname" name="fname" value="Андрей"><br>
  <label for="lname">Фамилия:</label><br>
  <input type="text" id="lname" name="lname" value="Щипунов">
</form>
Попробуйте сами »

Атрибут readonly

Ввод атрибута readonly указывает, что поле ввода доступно только для чтения.

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

Значение поля ввода только для чтения будет отправлено при отправке формы!

Пример

Поле ввода только для чтения:

<form>
  <label for="fname">Имя:</label><br>
  <input type="text" id="fname" name="fname" value="Андрей" readonly><br>
  <label for="lname">Фамилия:</label><br>
  <input type="text" id="lname" name="lname" value="Щипунов">
</form>
Попробуйте сами »

Атрибут disabled

Ввод атрибута disabled указывает, что поле ввода должно быть отключено.

Отключенное поле ввода непригодно для использования и не кликабельно.

Значение отключенного поля ввода не будет отправлено при отправке формы!

Пример

Поле ввода с ограниченными физическими возможностями:

<form>
  <label for="fname">Имя:</label><br>
  <input type="text" id="fname" name="fname" value="Андрей" disabled><br>
  <label for="lname">Фамилия:</label><br>
  <input type="text" id="lname" name="lname" value="Щипунов">
</form>
Попробуйте сами »


Атрибут size

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

Значение по умолчанию для size 20.

Примечание: Атрибут size работает со следующими типами входных данных: text, search, tel, url, email, и password.

Пример

Задать ширину поля ввода:

<form>
  <label for="fname">Имя:</label><br>
  <input type="text" id="fname" name="fname" size="50"><br>
  <label for="pin">ПИН:</label><br>
  <input type="text" id="pin" name="pin" size="4">
</form>
Попробуйте сами »

Атрибут maxlength

Ввод атрибута maxlength задает максимальное количество символов, разрешенных в поле ввода.

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

Пример

Установите максимальную длину для поля ввода:

<form>
  <label for="fname">Имя:</label><br>
  <input type="text" id="fname" name="fname" size="50"><br>
  <label for="pin">ПИН:</label><br>
  <input type="text" id="pin" name="pin" maxlength="4" size="4">
</form>
Попробуйте сами »

Атрибуты min и max

Ввод атрибутов min и max определяют минимальное и максимальное значения для поля ввода.

Атрибуты min и max работают со следующими типами входных данных: number, range, date, datetime-local, month, time и week.

Совет: Используйте атрибуты max и min вместе для создания диапазона допустимых значений.

Пример

Установите максимальную дату, минимальную дату и диапазон допустимых значений:

<form>
  <label for="datemax">Введите дату до 1980-01-01:</label>
  <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>

  <label for="datemin">Введите дату после 2000-01-01:</label>
  <input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>

  <label for="quantity">Количество (от 1 до 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">
</form>
Попробуйте сами »

Атрибут multiple

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

Атрибут multiple атрибут работает со следующими типами входных данных: email, и file.

Пример

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

<form>
  <label for="files">Выбор файлов:</label>
  <input type="file" id="files" name="files" multiple>
</form>
Попробуйте сами »

Атрибут pattern

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

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

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

Совет: Learn more about regular expressions in our JavaScript tutorial.

Пример

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

<form>
  <label for="country_code">Код страны:</label>
  <input type="text" id="country_code" name="country_code"
  pattern="[A-Za-z]{3}" title="Трехбуквенный код страны">
</form>
Попробуйте сами »

Атрибут placeholder

Ввод атрибута placeholder задает короткую подсказку, описывающую ожидаемое значение поля ввода (примерное значение или краткое описание ожидаемого формата).

Короткая подсказка отображается в поле ввода до того, как пользователь вводит значение.

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

Пример

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

<form>
  <label for="phone">Введите номер телефона:</label>
  <input type="tel" id="phone" name="phone"
  placeholder="123-45-678"
  pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
Попробуйте сами »

Атрибут required

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

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

Пример

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

<form>
  <label for="username">Имя пользователя:</label>
  <input type="text" id="username" name="username" required>
</form>
Попробуйте сами »

Атрибут step

Ввод атрибута step задает допустимые интервалы чисел для поля ввода.

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

Совет: Этот атрибут можно использовать вместе с атрибутами max и min для создания диапазона допустимых значений.

Атрибут step работает со следующими типами входных данных: number, range, date, datetime-local, month, time и week.

Пример

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

<form>
  <label for="points">Точки:</label>
  <input type="number" id="points" name="points" step="3">
</form>
Попробуйте сами »

Примечание: Ограничения ввода не являются надежными, и JavaScript предоставляет множество способов добавления незаконных входных данных. Чтобы безопасно ограничить ввод, он также должен быть проверен получателем (сервером)!


Атрибут autofocus

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

Пример

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

<form>
  <label for="fname">Имя:</label><br>
  <input type="text" id="fname" name="fname" autofocus><br>
  <label for="lname">Фамилия:</label><br>
  <input type="text" id="lname" name="lname">
</form>
Попробуйте сами »

Атрибуты height и width

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

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

Пример

Определить изображение кнопки "Отправить", с помощью атрибутов height и width :

<form>
  <label for="fname">Имя:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Фамилия:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="image" src="img_submit.gif" alt="Отправить" width="48" height="48">
</form>
Попробуйте сами »

Атрибут list

Ввод атрибута 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>
Попробуйте сами »

Атрибут autocomplete

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

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

Атрибут autocomplete работает с <form> и <input> типами: text, search, url, tel, email, password, datepickers, range, и color.

Пример

HTML форма с включенным и выключенным автозаполнением для одного поля ввода:

<form action="/action_page.php" autocomplete="on">
  <label for="fname">Имя:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Фамилия:</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="Отправить">
</form>
Попробуйте сами »

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


HTML Упражнения

Проверьте себя с помощью упражнений

Упражнение:

В поле ввода ниже добавьте заполнитель с надписью "ваше имя здесь".

<form action="/action_page.php">
<input type="text" >
</form>

Начните упражнение


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

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

Для получения полного списка всех доступных HTML тегов посетите HTML Справочник тегов.