<input type="search">

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

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

searchTerms = mySearch.value;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

false

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

true

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

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

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

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

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

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

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

on

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

off

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

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

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

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

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

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

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

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

Отображение будет таким:

Значение q является наиболее распространённым для поисковых полей ввода, хотя оно не обязательно. При отправке данные передаются в виде пары имя/значение q=searchterm.

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

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

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

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

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

Отображение подсказки показано ниже:

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

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

• Атрибут role со значением search на элементе <form> заставит экранные читалки объявлять форму формой поиска.
• Если этого недостаточно, вы можете использовать атрибут aria-label в самом элементе <input>. Это должна быть описательная текстовая метка, которая будет озвучиваться экранной читалки; она используется в качестве невизуального эквивалента <label>.

Давайте рассмотрим пример:

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

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

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

Физический размер поля ввода можно контролировать с помощью атрибута 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">
• Совместимость свойств CSS