Type search input: HTML input type=»search»

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

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

Try it

Value	Строка,представляющая значение,содержащееся в поле поиска.
Events	change и input
Поддерживаемые общие атрибуты	autocomplete, list, maxlength, minlength, pattern, placeholder, required, size.
IDL attributes	value
DOM interface	HTMLInputElement
Methods	select(), setRangeText(), setSelectionRange().

Value

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

searchTerms = mySearch.value;

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

Additional attributes

В дополнение к атрибутам, которые работают со всеми элементами <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. Вокруг текста шаблона не следует указывать косую черту.

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

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

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

placeholder

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

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

Примечание. По возможности избегайте использования атрибута placeholder . Это не так семантически полезно, как другие способы объяснения вашей формы, и может вызвать неожиданные технические проблемы с вашим контентом. Для получения дополнительной информации см. Ярлыки и заполнители в элементе <input>: The Input (Form Input) .

readonly

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

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

size

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

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

spellcheck

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

false

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

true

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

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

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

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

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

Non-standard attributes

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

autocorrect

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

on

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

off

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

incremental

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

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

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

mozactionhint

Расширение Mozilla,которое дает подсказку о том,какое действие будет предпринято,если пользователь нажмет кнопкуEnterorReturnво время редактирования поля.

Этот атрибут устарел: вместо него используйте глобальный атрибут enterkeyhint .

results

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

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

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

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

Basic example

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

Это выглядит так:

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

Примечание. Не забудьте указать name для ввода, иначе ничего не будет отправлено.

Различия между поисковыми и текстовыми типами

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

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

На данном этапе давайте рассмотрим некоторые полезные техники,которые Вы можете применить к Вашим поисковым формам.

Setting placeholders

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

placeholder . Взгляните на следующий пример:

<form>
  <div>
    <input type="search" 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" name="q"
     placeholder="Search the site…"
     aria-label="Search through site content">
    <button>Search</button>
  </div>
</form>

Вы можете увидеть,как это визуализируется ниже:

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

Примечание. Дополнительные сведения о таких функциях доступности см. В разделе « Указатели / ориентиры» .

---

© 2005–2022 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search

---

HTML

• Создание элементов управления вертикальным диапазоном

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

• <input type=»reset»>

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

• Размер элемента физического ввода

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

• <input type=»submit»>

  Элементы <input> типа submit отображаются как кнопки.

• 1
• …
• 117
• 118
• 119
• 120
• 121
• …
• 258
• Next

Генератор HTML Search Input — Онлайн инструмент и C# код

Создавайте HTML Search Input легко!

Элемент input с type='search' определяет текстовое поле, предназначенное для ввода пользователем поисковых запросов.

Поисковые окна присутствуют на каждом веб-сайте. Они полезны для поиска конкретных данных. Генератор HTML Search Input поможет вам генерировать код, который можно вставить в HTML. Просто выберите параметры и создайте окно поиска на лету!

Атрибуты

• Атрибут name обязателен. Если для поля поиска не указано имя, ничего не будет отправлено.
• Атрибут size представляет собой числовое значение, указывающее, сколько символов может содержать поле ввода.
• spellcheck — это атрибут, который используется для указания, следует ли включать проверку орфографии для элемента.
• Атрибут placeholder – это строка, которая дает пользователю краткую подсказку о том, какая информация ожидается в поле.

Создание HTML Search Input на C#

Aspose.HTML for .NET API поддерживает набор элементов HTML, определенных в стандарте HTML, а также правила вложения элементов. Вы можете изменить документ, добавив новые элементы, удалив или отредактировав содержимое существующих узлов. Если вы хотите использовать функции редактирования HTML в своем продукте или программно добавить тег HTML search input, рассмотрите приведенный ниже пример кода C#. Вы можете создать окно поиска с помощью нескольких строк:

Шаги по созданию HTML Search Input на C#

1. Используйте метод CreateElement() класса Document для создания HTMLInputElement. Он создает элемент HTML, указанный в tagName.
2. Установите значения для атрибутов Type и Name.
3. Используйте метод SetAttribute(), чтобы добавить атрибуты size, spellcheck и placeholder с их значениями.
4. Скопируйте код HTML Search Input и используйте его в своем проекте C#.

FAQ

1. Зачем использовать Генератор HTML Search Input?

Этот инструмент отлично подходит для людей, которые не умеют программировать и нуждаются в HTML search input для размещения на своем веб-сайте. Кроме того, этот Генератор HTML Search Input будет полезен разработчикам, которые хотят быстро и легко создавать и настраивать элементы для своих проектов HTML или C#. Генерируйте, предварительно просматривайте результат и используйте сгенерированный код там, где он вам нужен.

2. Какие браузеры я могу использовать?

Сгенерированный HTML код для HTML search input будет работать без проблем во всех современных браузерах, таких как Chrome, Opera, Firefox, Safari, Edge и IE, а также в других основных браузерах. Aspose.HTML for .NET API позволяет создавать код C#, который можно использовать в любом приложении .NET. Он работает на всех платформах, включая Windows, Linux, Mac OS, Android и iOS.

3. Как скопировать код для моего сайта?

После создания HTML search input перейдите к сгенерированному коду. Скопируйте HTML код и вставьте его туда, куда вам требуется, чтобы элемент отображался в нужном месте на вашем сайте. С другой стороны, вы можете получить код C# для HTML search input, скопируйте и используйте его в своем проекте C#.

Начало работы с .NET HTML API

Вы можете использовать несколько способов установки библиотеки Aspose.

HTML для .NET в вашей системе:

• Установите пакет NuGet с помощью графического интерфейса диспетчера пакетов NuGet.
• Установите пакет NuGet с помощью консоли диспетчера пакетов.
• Установите Aspose.HTML для .NET через MSI.

Aspose.HTML для .NET поддерживает синтаксический анализ HTML5, CSS3, SVG и HTML Canvas для создания объектной модели документа (DOM) на основе стандарта WHATWG DOM. Библиотека полностью написана на C# и может использоваться для создания любого типа 32-битного или 64-битного приложения .NET, включая ASP.NET, WCF, WinForms и .NET Core. Прежде чем запускать код примера преобразования .NET, убедитесь, что у вас есть ОС, такая как Microsoft Windows, или совместимая с .NET Framework или .NET Standard, и среда разработки, такая как Microsoft Visual Studio. Дополнительные сведения об установке библиотеки C# и системных требованиях вы найдете в документации Aspose.HTML.

Другие поддерживаемые Генераторы HTML

С Генераторами HTML кода вся тяжелая работа уже сделана за вас. Все, что вам нужно сделать, это скопировать и вставить. Ясно, безопасно и просто!

HTML Button

HTML Checkbox

HTML Radio Button

HTML Email Input

HTML Color Input

HTML Date & Time Input

HTML File Input

HTML Image Input

HTML Number Input

HTML Password Input

HTML Range Input

HTML Search Input

HTML Submit Input

HTML Telephone Input

HTML Text Input

HTML Textarea

HTML URL Input

HTML Audio

HTML Image

HTML Video

HTML Table

HTML iFrame

HTML <bdo> Tag

HTML <code> Tag

HTML <cite> Tag

HTML <mark> Tag

HTML <strong> Tag

HTML Emphasize Text

HTML Strikethrough

HTML Superscript & Subscript

HTML Underline Text

HTML Quote & Blockquote

HTML Details

HTML Dialog

HTML Hyperlink

HTML List Tag

HTML Meter Tag

HTML Progress

Tailwind CSS Search Input — Flowbite

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

Он доступен в нескольких стилях, вариантах и ​​размерах, созданных с помощью служебных классов из Tailwind CSS.

На этой странице вы также найдете более сложные компоненты поиска, включая выбор категорий в раскрывающемся списке, кнопки поиска, расположенные внутри поля ввода, поля голосового поиска и многое другое.

Пример панели поиска №

Начните с примера компонента ввода поиска по умолчанию, включая значок и кнопку отправки.

Изменить на GitHub Включить полноэкранный режим

Переключить вид планшета

Переключить мобильное представление

Переключить темный режим

Загрузка…

• HTML

Скопировать в буфер обмена

Поиск

 <форма>
    Поиск
    <дел>
        <дел>
             w3.org/2000/svg">