<input type="text"> значение атрибута

Элементы <input> типа text создают обычные однострочные текстовые поля.

Попробуйте

<label for="name">Name (4 to 8 characters):</label>

<input
  type="text"
  id="name"
  name="name"
  required
  minlength="4"
  maxlength="8"
  size="10" />

label {
  display: block;
  font:
    1rem "Fira Sans",
    sans-serif;
}

input,
label {
  margin: 0.4rem 0;
}

Значение

Атрибут value — это строка, содержащая текущее значение текста, введённого в текстовое поле. Получить его в JavaScript можно с помощью свойства HTMLInputElement value.

let theText = myTextInput.value;

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

Дополнительные атрибуты

Помимо глобальных атрибутов и атрибутов, действующих на все элементы <input> независимо от их типа, текстовые поля поддерживают следующие атрибуты.

list

Значение атрибута list — это id элемента <datalist>, расположенного в том же документе. Элемент <datalist> предоставляет список предварительно заданных значений, которые можно предложить пользователю для этого поля ввода. Значения из списка, несовместимые с type, не включаются в предлагаемые варианты. Эти значения являются предложениями, а не обязательными требованиями: пользователь может выбрать значение из списка или указать другое.

maxlength

Максимальная длина строки (измеряется в кодовых единицах UTF-16), которую пользователь может ввести в поле ввода text. Значение должно быть целым числом, равным 0 или больше. Если maxlength не задан или указано недопустимое значение, поле ввода text не имеет ограничения на максимальную длину. Это значение также должно быть больше или равно значению minlength.

Если длина текстового значения поля превышает maxlength кодовых единиц UTF-16, проверка ограничений завершится ошибкой. Проверка ограничений выполняется только в том случае, если значение изменено пользователем.

minlength

Минимальная длина строки (измеряется в кодовых единицах UTF-16), которую пользователь может ввести в поле ввода text. Значение должно быть неотрицательным целым числом, меньшим или равным значению, указанному в maxlength. Если minlength не задан или указано недопустимое значение, поле ввода text не имеет ограничения на минимальную длину.

Если длина текста, введённого в поле, меньше minlength кодовых единиц UTF-16, проверка ограничений завершится ошибкой. Проверка ограничений выполняется только в том случае, если значение изменено пользователем.

pattern

Если атрибут pattern задан, он содержит регулярное выражение, которому должно соответствовать value поля ввода, чтобы значение прошло проверку ограничений. Это должно быть допустимое регулярное выражение JavaScript, используемое типом RegExp и описанное в нашем руководстве по регулярным выражениям; при компиляции регулярного выражения указывается флаг 'u', чтобы шаблон обрабатывался как последовательность кодовых точек Unicode, а не как ASCII. Не указывайте прямые косые черты вокруг текста шаблона.

Если шаблон не задан или недопустим, регулярное выражение не применяется, а этот атрибут полностью игнорируется.

Подробности и пример см. в разделе Задание шаблона.

placeholder

Атрибут placeholder — это строка с краткой подсказкой о том, какие данные ожидаются в поле. Она должна состоять из слова или короткой фразы, показывающей ожидаемый тип данных, а не из пояснительного сообщения. Текст не должен содержать символов возврата каретки или перевода строки.

Если направление текста содержимого элемента (LTR или RTL) отличается от направления текста подсказки, можно использовать управляющие символы двунаправленного алгоритма Unicode, чтобы переопределить направление текста подсказки. Подробнее см. в статье Как использовать управляющие символы Unicode для двунаправленного текста.

readonly

Логический атрибут, наличие которого означает, что пользователь не может редактировать это поле. Однако его value можно изменить с помощью кода JavaScript, непосредственно задав свойство HTMLInputElement value.

size

Атрибут size — это числовое значение, указывающее ширину поля ввода в символах. Значение должно быть больше нуля; по умолчанию оно равно 20. Поскольку ширина символов различается, это значение может быть неточным, поэтому не следует на него полагаться. Фактическая ширина поля ввода может быть меньше или больше заданного количества символов в зависимости от символов и используемых настроек font.

Этот атрибут не ограничивает количество символов, которые пользователь может ввести в поле. Он лишь приблизительно задаёт, сколько символов будет видно одновременно. Чтобы ограничить максимальную длину вводимых данных, используйте атрибут maxlength.

spellcheck

Глобальный атрибут spellcheck указывает, нужно ли включить проверку орфографии для элемента. Его можно использовать с любым редактируемым содержимым, но здесь мы рассмотрим особенности использования spellcheck с элементами <input>. Допустимые значения spellcheck:

false

Отключить проверку орфографии для этого элемента.

true

Включить проверку орфографии для этого элемента.

"" (пустая строка) или значение не указано

Следовать поведению проверки орфографии по умолчанию для элемента. Оно может зависеть от значения spellcheck родительского элемента или других факторов.

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

Значение, возвращаемое при чтении spellcheck, может не отражать фактическое состояние проверки орфографии элемента, если настройки пользовательского агента переопределяют это значение.

Использование текстовых полей

Элементы <input> типа text создают обычные однострочные поля ввода. Используйте их, когда пользователю нужно ввести однострочное значение, для которого нет более подходящего типа поля ввода (например, если это дата, URL, адрес электронной почты или поисковый запрос, лучше выбрать соответствующий тип).

Простой пример

<form>
  <div>
    <label for="uname">Choose a username: </label>
    <input type="text" id="uname" name="name" />
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

Результат выглядит так:

При отправке на сервер будет передана пара имя/значение name=Chris (если перед отправкой в качестве значения поля было введено «Chris»). Не забудьте добавить атрибут name элементу <input>, иначе значение текстового поля не будет включено в отправляемые данные.

Добавление подсказок

Чтобы подсказать пользователю, что вводить в текстовое поле, можно добавить полезную подсказку с помощью атрибута placeholder. Рассмотрим следующий пример:

<form>
  <div>
    <label for="uname">Choose a username: </label>
    <input
      type="text"
      id="uname"
      name="name"
      placeholder="Lower case, all one word" />
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

Ниже показано, как отображается подсказка:

Обычно подсказка отображается более светлым цветом, чем основной цвет элемента, и автоматически исчезает, когда пользователь начинает вводить текст в поле (или когда полю программно задаётся значение с помощью атрибута value).

Физический размер поля ввода

Физический размер поля ввода можно задать с помощью атрибута size. Он позволяет указать, сколько символов текстовое поле может отображать одновременно. Это влияет на ширину элемента и позволяет задавать её в символах, а не в пикселях. Например, в этом случае ширина поля составляет 30 символов:

<form>
  <div>
    <label for="uname">Choose a username: </label>
    <input
      type="text"
      id="uname"
      name="name"
      placeholder="Lower case, all one word"
      size="30" />
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

Проверка данных

Для элементов <input> типа text автоматическая проверка данных не выполняется (поскольку обычное текстовое поле должно принимать произвольные строки), но доступны некоторые варианты проверки на стороне клиента, которые мы рассмотрим ниже.

Примечание о стилях

Для стилизации элементов формы доступны полезные псевдоклассы, которые помогают пользователю определить, являются ли введённые значения допустимыми. Это :valid и :invalid. В этом разделе мы будем использовать следующий CSS-код: рядом с полями с допустимыми значениями он разместит галочку, а рядом с полями с недопустимыми значениями — крестик (X).

div {
  margin-bottom: 10px;
  position: relative;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

Для этого способа также требуется поместить элемент <span> после элемента формы. Он будет служить контейнером для значков. Это необходимо, поскольку некоторые типы полей ввода в некоторых браузерах плохо отображают значки, размещённые непосредственно после них.

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

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

<form>
  <div>
    <label for="uname">Choose a username: </label>
    <input type="text" id="uname" name="name" required />
    <span class="validity"></span>
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

Результат выглядит так:

Если попытаться отправить форму, не указав имя пользователя, браузер покажет сообщение об ошибке.

Длина значения поля ввода

С помощью атрибута minlength можно задать минимальную длину введённого значения (в символах); аналогично, атрибут maxlength задаёт максимальную длину введённого значения в символах.

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

<form>
  <div>
    <label for="uname">Choose a username: </label>
    <input
      type="text"
      id="uname"
      name="name"
      required
      size="10"
      placeholder="Username"
      minlength="4"
      maxlength="8" />
    <span class="validity"></span>
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

Результат выглядит так:

Если попытаться отправить форму, введя менее 4 символов, появится соответствующее сообщение об ошибке (оно различается в разных браузерах). Если попытаться ввести более 8 символов, браузер не позволит этого сделать.

Задание шаблона

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

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

<form>
  <div>
    <label for="uname">Choose a username: </label>
    <input
      type="text"
      id="uname"
      name="name"
      required
      size="45"
      pattern="[a-z]{4,8}" />
    <span class="validity"></span>
    <p>Usernames must be lowercase and 4-8 characters in length.</p>
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

Результат выглядит так:

Примеры

Хорошие примеры использования текстовых полей в контексте приведены в статьях Ваша первая HTML-форма и Как структурировать HTML-форму.

Техническая сводка

Спецификации

Совместимость с браузерами

См. также

• HTML-формы
• <input> и интерфейс HTMLInputElement, на котором он основан.
• <input type="search">
• <textarea>: многострочное текстовое поле