<input type="text">

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

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

let theText = myTextInput.value;

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

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

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

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

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

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

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

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

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

См. Указание шаблона для получения дополнительных сведений и примера.

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

Если содержимое элемента имеет одно направлениеality (LTR или RTL), но нужно отобразить плейсхолдер в противоположном направлении, можно использовать символы форматирования алгоритма двунаправленного отображения Юникода, чтобы переопределить направление внутри плейсхолдера; см. Как использовать символы управления Юникода для двунаправленного текста для получения дополнительной информации.

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

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

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

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

false

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

true

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

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

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

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

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

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

В дополнение к расширениям Safari, атрибут autocorrect — это строка, которая указывает, нужно ли активировать автоматическую корректировку во время редактирования этого поля. Допускаемые значения:

on

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

off

Отключить автоматическую корректировку и подстановки текста.

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

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>: Многострочный ввод текста
• Совместимость свойств CSS