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

Элементы <input> типа search — это текстовые поля, предназначенные для ввода поисковых запросов. Они функционально идентичны полям ввода text, но могут иметь другое оформление, задаваемое пользовательским агентом.

Попробуйте

<label for="site-search">Search the site:</label>
<input type="search" id="site-search" name="q" />

<button>Search</button>

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

input,
label {
  margin: 0.4rem 0;
}

Значение

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

searchTerms = mySearch.value;

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

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

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

list

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

maxlength

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

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

minlength

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

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

pattern

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

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

Подробную информацию и пример см. в разделе Задание шаблона.

placeholder

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

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

readonly

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

size

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

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

spellcheck

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

false

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

true

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

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

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

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

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

Нестандартные атрибуты

Для полей ввода поиска доступны следующие нестандартные атрибуты. По возможности не используйте их.

incremental

Булев атрибут incremental — это расширение WebKit и Blink (поддерживается Safari, Opera, Chrome и другими браузерами). Если он указан, пользовательскому агенту предлагается обрабатывать ввод как поиск в реальном времени. Когда пользователь изменяет значение поля, пользовательский агент отправляет события search объекту HTMLInputElement, представляющему поле поиска. Это позволяет вашему коду обновлять результаты поиска в режиме реального времени по мере ввода запроса пользователем.

Если incremental не указан, событие search отправляется только тогда, когда пользователь явно запускает поиск (например, нажимает клавишу Enter или Return при редактировании поля).

Частота отправки события search ограничена: оно отправляется не чаще, чем через интервал, определяемый реализацией.

results

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

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

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

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

Базовый пример

<form>
  <div>
    <input type="search" id="mySearch" name="q" />
    <button>Search</button>
  </div>
</form>

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

q — наиболее распространённое name для полей поиска, хотя указывать его необязательно. При отправке на сервер передаётся пара имя/значение данных q=searchTerm.

Различия между типами search и text

Основные различия связаны с тем, как браузеры обрабатывают эти поля. Прежде всего, в некоторых браузерах отображается значок крестика, при нажатии на который можно мгновенно удалить поисковый запрос; в Chrome это действие также выполняется при нажатии клавиши Escape. На следующем снимке экрана показан Chrome:

Кроме того, современные браузеры обычно автоматически сохраняют ранее введённые поисковые запросы для разных доменов. Затем они отображаются как варианты автозаполнения при последующем поиске на этом домене. Это удобно для пользователей, которые часто выполняют поиск по одним и тем же или похожим запросам. На этом снимке экрана показан Firefox:

Теперь рассмотрим несколько полезных приёмов, которые можно применять в формах поиска.

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

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

<form>
  <div>
    <input
      type="search"
      id="mySearch"
      name="q"
      placeholder="Search the site…" />
    <button>Search</button>
  </div>
</form>

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

Метки и доступность форм поиска

Одна из проблем форм поиска — их доступность: часто в соответствии с распространённой практикой оформления для поля поиска не указывают метку (хотя рядом может быть значок лупы или что-то похожее), поскольку зрячим пользователям обычно и так понятно назначение формы поиска по её расположению (в этом примере показан типичный вариант).

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

• Оберните всю функциональность поиска в элемент <search>, который создаёт ориентирную область, объявляемую вспомогательными технологиями и позволяющую быстро перейти к ней. Если ваш <input> уже находится внутри <form>, можно вместо этого добавить role="search" к элементу <form>, который также превращает <form> в ориентир поиска. Элемент <search> использует встроенную семантику HTML, а role="search" имеет более широкую поддержку и позволяет писать более короткий код, если у вас уже есть обёртка <form>.
• Если этого недостаточно, можно использовать атрибут aria-label непосредственно на элементе <input>. Это должна быть описательная текстовая метка, которую программа чтения с экрана прочитает вслух; она служит невизуальной заменой <label>.

Рассмотрим пример:

<search>
  <form>
    <div>
      <input
        type="search"
        id="mySearch"
        name="q"
        placeholder="Search the site…"
        aria-label="Search through site content" />
      <button>Search</button>
    </div>
  </form>
</search>

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

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

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

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

<form>
  <div>
    <input
      type="search"
      id="mySearch"
      name="q"
      placeholder="Search the site…"
      size="30" />
    <button>Search</button>
  </div>
</form>

В результате получается более широкое поле ввода:

Проверка

Для элементов <input> типа search доступны те же возможности проверки, что и для обычных полей ввода text. В целом, для полей поиска проверка обычно не требуется. Во многих случаях пользователям следует разрешить искать что угодно, но есть несколько ситуаций, которые стоит учесть, например поиск данных с известным форматом.

Примечание об оформлении

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

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

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

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

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

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

<form>
  <div>
    <input
      type="search"
      id="mySearch"
      name="q"
      placeholder="Search the site…"
      required />
    <button>Search</button>
    <span class="validity"></span>
  </div>
</form>

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

Кроме того, если попытаться отправить форму, не введя поисковый запрос, браузер покажет сообщение. Ниже показан пример из Firefox:

При попытке отправить форму с разными типами недопустимых данных в полях ввода будут показаны разные сообщения; см. примеры ниже.

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

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

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

<form>
  <div>
    <label for="mySearch">Search for user</label>
    <input
      type="search"
      id="mySearch"
      name="q"
      placeholder="User IDs are 4–8 characters in length"
      required
      size="30"
      minlength="4"
      maxlength="8" />
    <button>Search</button>
    <span class="validity"></span>
  </div>
</form>

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

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

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

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

Рассмотрим пример. Допустим, мы хотим создать форму поиска идентификатора товара, а все идентификаторы представляют собой коды из двух букв и четырёх цифр. Приведённый ниже пример решает эту задачу:

<form>
  <div>
    <label for="mySearch">Search for product by ID:</label>
    <input
      type="search"
      id="mySearch"
      name="q"
      placeholder="two letters followed by four numbers"
      required
      size="30"
      pattern="[A-z]{2}[0-9]{4}" />
    <button>Search</button>
    <span class="validity"></span>
  </div>
</form>

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

Примеры

Хороший пример формы поиска в контексте можно найти в примере website-aria-roles (посмотреть работающий пример).

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

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

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

См. также

• HTML-формы
• <input> и интерфейс HTMLInputElement, на котором он основан
• <input type="text">