Posted:
Июл 30, 2021
Comments:
0 Comments

Как сделать строку поиска: Как создать поле поиска

Как настроить строку поиска на сайте? | Центр Поддержки

Предоставьте посетителям возможность искать любую информацию на вашем сайте с помощью функции Wix Поиск по сайту. Результаты поиска отображаются в виде списка.

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

Содержание:

  • Настройка панели поиска настройки
  • Изменение макета строки поиска
  • Настройка дизайна панели поиска

Настройка параметров строки поиска

Настройте текст-подсказку в строке поиска и варианты результатов. 

Чтобы настроить параметры строки поиска:

  1. Нажмите на строку поиска в редакторе.
  2. Нажмите Настройка. 
  3. Настройте параметры:
    • Текст-подсказка: добавьте короткий текст, который отображается, когда строка поиска пуста.
      Примечание: этот текст исчезнет, когда посетитель сайта начнет вводить текст в строке поиска.
    • Предложения результатов: включите или отключите отображение предложений результатов, когда пользователь начинает вводить текст.
    • Тренды : включите или отключите отображение элементов в тренде до того, как пользователь начнет печатать.
      Примечание. Включение трендов возможно только в том случае, если включены предложения результатов. 

Изменение макета строки поиска

В панели Макеты вы можете задать макет, выравнивание и интервал между символами в строке поиска.

Чтобы изменить макет строки поиска:

  1. Нажмите на строку поиска в редакторе.
  2. Нажмите на значок Макет .
  3. Настройте параметры макета:
    • Выберите макет: выберите один из вариантов оформления строки поиска.
    • Выравнивание значка: выберите расположение значка поиска.
    • Выравнивание текста: выберите расположение текста.
    • Поля текста: установите интервал между краем строки поиска и текстом.
    • Поля значка: установите размер области для значка поиска.

Настройка дизайна строки поиска

Настройте дизайн строки поиска для разных состояний:

  • В покое: когда строка поиска не используется.
  • При наведении: когда посетители наводят курсор мыши на строку поиска.
  • Фокус: когда посетители нажимают на строку поиска.

Чтобы настроить дизайн строки поиска:

  1. Нажмите на строку поиска в редакторе.
  2. Нажмите на значок Дизайн .
  3. Выберите готовый дизайн.
  4. Нажмите Настроить дизайн, чтобы настроить дизайн.
    1. Нажмите на нужную вкладку, чтобы выбрать, какое состояние строки поиска вы хотите настроить: В покое , При наведении или Фокус.
    2. Настройте состояние, используя доступные параметры:
      • Цвета и прозрачность: измените цвет поля ввода и значка:
        • Фон поля ввода: нажмите на палитру, чтобы выбрать цвет фона для поля ввода, перемещайте ползунок, чтобы увеличить или уменьшить прозрачность фона.
        • Фон кнопки: нажмите на палитру, чтобы выбрать цвет фона для значка поиска, перемещайте ползунок, чтобы увеличить или уменьшить прозрачность.
        • Значок кнопки: нажмите на палитру, чтобы выбрать цвет значка поиска, перемещайте ползунок, чтобы увеличить или уменьшить прозрачность.
      • Граница: добавьте и настройте дизайн границы для строки поиска:
        • Прозрачность и цвет: нажмите на палитру, чтобы выбрать цвет границы, и перетащите ползунок, чтобы увеличить или уменьшить прозрачность.
        • Стиль границы: выберите стиль границы, а также на каких сторонах строки она будет отображаться.
        • Ширина (пикс.): перетащите ползунок, чтобы сделать границу толще или тоньше.
      • Уголки: позволяет задать радиус скругления для строки поиска:
        • Введите значение для каждого уголка или нажмите значок в центре, чтобы изменить параметры всех уголков сразу.
      • Тень: добавьте тень к строке поиска:
        1. Активируйте переключатель Добавить тень, чтобы включить тень.
        2. Настройте тень, используя доступные параметры:
          • Угол: выберите угол тени.
          • Расстояние (пикс.): перетащите ползунок, чтобы увеличить или уменьшить расстояние от строки до дальнего края тени.
          • Размер (пикс.): перетащите ползунок, чтобы увеличить или уменьшить размер тени.
          • Размытие: перетащите ползунок, чтобы увеличить или уменьшить размытие тени.
          • Прозрачность и цвет: нажмите на поле цвета, чтобы выбрать цвет тени, и перетащите ползунок, чтобы увеличить или уменьшить ее прозрачность.
      • Текст: выберите формат текста в строке поиска:
        • Цвет заполнителя: нажмите на палитру, чтобы выбрать цвет заполнителя, и перетащите ползунок, чтобы увеличить или уменьшить прозрачность.
        • Цвет: нажмите на палитру, чтобы выбрать цвет для текста, который будет вводиться в строку поиска.
        • Стиль: нажмите на выпадающее меню и выберите стиль текста.
        • Шрифт: нажмите на выпадающее меню и выберите шрифт для текста.
        • Размер шрифта: перетащите ползунок, чтобы установить размер текста.
        • Жирный/Курсив: выберите параметры форматирования текста.

Создаем идеальную строку поиска / Хабр

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

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

Лучшие практики

1. Используйте иконку с лупой

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

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

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

2. Располагайте строку поиска на видном месте

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

На картинке слева функция поиска скрыта за иконкой

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

Избегайте применять последовательное раскрытие для функции поиска — оно скрывает контекст

3. Снабдите строку поиска кнопкой действия

Наличие кнопки помогает донести до людей, что от выполнения действия их отделяет еще один шаг — пусть даже они решат выполнить этот шаг нажатием на Enter.

Совет: Не делайте кнопку поиска слишком маленькой, чтобы пользователям не приходилось нацеливаться на нее курсором. Чем больше места она занимает, тем проще заметить и кликнуть.

Предоставьте пользователям возможность начать поиск как при помощи клавиши Enter, так и нажатием на кнопку. У многих сохраняется привычка именно нажимать на кнопку, чтобы запустить процесс.

4. Добавьте строку поиска на каждую страницу

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

5. Строка поиска должна быть простой

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

Булев поиск

6. Разместите строку поиска там, где её ожидают увидеть

Плохо, когда пользователи вынуждены искать строку поиска — это значит, что она не притягивает взгляд и теряется на странице.

Иллюстрация, приведенная ниже, взята из исследования A. Dawn Shaikh и Keisi Lenz: на ней показано, в какой части экрана пользователи ожидают увидеть строку поиска. Эти данные были получены на базе опроса 142 респондентов. Как показало исследование, самые удачные области — верхний правый и верхний левый углы экрана: там пользователям удобнее всего обнаружить строку поиска, следуя стандартному F-паттерну.

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

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

На насыщенном контентом сайте Youtube строка поиска находится в верхней центральной части экрана

Советы:

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

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

7. Адекватная длина строки

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

Общее правило гласит, что в строке ввода должно помещаться 27 символов (этого достаточно для 90% запросов).

У Amazon строка поиска нужной длины

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

8. Применяйте механизм автозаполнения

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

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

Советы:

  • Позаботьтесь о том, чтобы функция автозаполнения действительно была полезна. Если она выполнена плохо, то будет только отвлекать пользователей и сбивать их с толку. Поэтому используйте автокоррекцию, распознавание корней и предиктивный ввод текста, чтобы сделать инструмент качественным.

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

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

  • Настройте клавишную навигацию по списку вариантов. Дойдя до последнего пункта, пользователь должен иметь возможность перейти в начало. По нажатию на клавишу Esc список должен сворачиваться.

  • Показывайте разницу между введенным текстом и предлагаемыми данными. Например, у введенного текста стандартный шрифт, а у той части варианта, которая заполняется автоматически — жирный.

Автозаполнение экономит пользователю время и может даже подсказать более удачную формулировку

9. Ясно дайте понять, что именно можно искать

Отображать в поле ввода пример поискового запроса — хорошая идея: так можно донести до пользователей, для чего именно они могут использовать эту функцию. Если пользователь может осуществлять поиск по различным критериям, намекните ему об этом при помощи особого паттерна (как в примере с сайта IMDB ниже). HTML5 позволяет легко добавить текст, который будет по умолчанию высвечиваться в неактивной строке поиска.

Совет

: Ограничьтесь несколькими словами, иначе вместо того, чтобы минимизировать когнитивную нагрузку, вы её только увеличите.

Заключение

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

Как сделать панель поиска в HTML

следующий →
← предыдущая

Если мы хотим создать панель поиска, используя HTML и внутренний CSS, мы должны выполнить шаги, указанные ниже. Используя эти шаги, мы можем легко просмотреть строку поиска на веб-странице в браузере:

Шаг 1: Во-первых, мы должны ввести код HTML в любом текстовом редакторе или открыть существующий файл HTML в текстовом редакторе, в котором мы хотим использовать код CSS и HTML для создания панели поиска.



<Голова>
<Название>
Создайте панель поиска с помощью Html и CSS


<Тело>
Здравствуйте, Пользователь!….
Учебник по HTML
Эта страница поможет нам понять, как сделать панель поиска.

Шаг 2: Теперь нам нужно поместить курсор в ту точку тега body, где мы хотим создать панель поиска. И затем введите

тег в этой точке.

Шаг 3: Теперь мы должны использовать тег с атрибутом типа . Затем поместите текстовое значение в атрибут type. Затем введите заполнитель и атрибуты имени в теге .

<форма>

Шаг 4: Теперь мы должны использовать тег кнопки с цифрой 9.0010 тип атрибута . Затем поместите значение отправки в атрибут типа. И затем мы должны закрыть тег . И, наконец, мы должны закрыть тег

.

<форма>


Шаг 5: Затем мы должны использовать следующий код CSS между начальным и закрывающим тегом.

<стиль>
.поисковая строка {
плыть налево;
}
ввод [тип = текст] {
отступ: 6px;
поле сверху: 8px;
размер шрифта: 17px;
граница: нет;
}
кнопка . searchbox {

отступ: 8px;
поле сверху: 10px;
поле слева: 10px;
фон: оранжевый;
размер шрифта: 20px;
граница: нет;
курсор: указатель;
}
Кнопка .searchbox: наведите курсор {
фон: синий;
}

Шаг 6: И, наконец, мы должны сохранить HTML-файл, а затем запустить его в браузере.



<Голова>
<Название>
Создайте панель поиска с помощью Html и CSS

<стиль>
.поисковая строка {
плыть налево;
}
ввод [тип = текст] {
отступ: 6px;
поле сверху: 8px;
размер шрифта: 17px;
граница: нет;
}
кнопка .searchbox {

отступ: 8px;
поле сверху: 10px;
поле слева: 10px;
фон: оранжевый;
размер шрифта: 20px;
граница: нет;
курсор: указатель;
}
Кнопка .searchbox: наведите курсор {
фон: синий;
}


<Тело>
Здравствуйте, Пользователь!….
Учебник по HTML
Эта страница поможет нам понять, как сделать панель поиска.
<дел>
<форма>
..» name=»search»>


Протестируйте сейчас

Вывод приведенного выше HTML-кода показан на следующем снимке экрана:

Следующая темаКак обтекать изображение текстом в HTML

← предыдущая
следующий →

— HTML: язык гипертекстовой разметки

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

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

 searchTerms = mySearch.value;

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

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

список

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

maxlength

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

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

minlength

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

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

шаблон

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

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

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

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

заполнитель

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

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

Примечание: По возможности избегайте использования атрибута-заполнителя . Это не так полезно с семантической точки зрения, как другие способы объяснения вашей формы, и может вызвать неожиданные технические проблемы с вашим контентом. См. метки для получения дополнительной информации.

только для чтения

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

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

size

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

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

проверка орфографии

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

ложь

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

правда

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

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

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

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

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

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

autocorrect

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

на

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

от

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

инкрементный

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

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

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

mozactionhint

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

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

результатов

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

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

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

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

 <форма>
  <дел>

Это выглядит следующим образом:

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

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

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

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

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

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

Установка заполнителей

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

 

  <дел>
    <ввод
      тип = "поиск"
     
      имя = "к"
      placeholder="Искать на сайте…" />

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

Ярлыки форм поиска и специальные возможности

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

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

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

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

 
  <дел>
    <ввод
      тип = "поиск"
     
      имя = "к"
      placeholder="Искать на сайте…"
      aria-label="Поиск по содержимому сайта" />

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

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

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

Физический размер элемента ввода

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

 
  <дел>
    <ввод
      тип = "поиск"
     
      имя = "к"
      placeholder="Искать на сайте…"
      размер = "30" />

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

Элементы типа search имеют те же функции проверки, что и обычные текстовые вводы. Маловероятно, что вы захотите использовать функции проверки в целом для полей поиска. Во многих случаях пользователям должно быть просто разрешено искать что угодно, но есть несколько случаев, которые следует учитывать, например, поиск данных в известном формате.

Примечание: Проверка формы HTML — , а не , заменяет сценарии, которые обеспечивают правильность формата введенных данных. Для кого-то слишком просто внести коррективы в HTML, которые позволят обойти проверку или полностью удалить ее. Также возможно, что кто-то полностью обойдет ваш HTML-код и отправит данные непосредственно на ваш сервер. Если ваш код на стороне сервера не может проверить данные, которые он получает, может произойти катастрофа, когда данные в неправильном формате (или данные, которые слишком велики, имеют неправильный тип и т. д.) введены в вашу базу данных.

Примечание по стилю

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

 ввод: неверный ~ диапазон:: после {
  содержание: "✖";
  отступ слева: 5 пикселей;
  положение: абсолютное;
}
ввод: действителен ~ span:: после {
  содержание: "✓";
  отступ слева: 5px;
  положение: абсолютное;
}

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

Требуемый ввод

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

 
  <дел>
    <ввод
      тип = "поиск"
     
      имя = "к"
      placeholder="Искать на сайте…"
      требуется />
    
    <промежуток> 
  
 ввод {
  поле справа: 10px;
}
ввод: неверный ~ span:: после {
  содержание: "✖";
  отступ слева: 5px;
  положение: абсолютное;
}
ввод: действителен ~ span:: после {
  содержание: "✓";
  отступ слева: 5px;
  положение: абсолютное;
}

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

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

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

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

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

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

 <форма>
  <дел>
    
    <ввод
      тип = "поиск"
     
      имя = "к"
      placeholder="Идентификаторы пользователей имеют длину от 4 до 8 символов"
      необходимый
      размер = "30"
      минимальная длина = "4"
      максимальная длина = "8" />
    
    <промежуток> 
  
 ввод {
  поле справа: 10px;
}
ввод: неверный ~ span:: после {
  содержание: "✖";
  отступ слева: 5px;
  положение: абсолютное;
}
ввод: действителен ~ span:: после {
  содержание: "✓";
  отступ слева: 5px;
  положение: абсолютное;
}

Это выглядит следующим образом:

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

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

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

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

 
  <дел>
    
    <ввод
      тип = "поиск"
     
      имя = "к"
      placeholder="две буквы, за которыми следуют четыре цифры"
      необходимый
      размер = "30"
      шаблон="[А-я]{2}[0-9]{4}" />
    
    <промежуток> 
  

 
 ввод {
  поле справа: 10px;
}
ввод: неверный ~ span:: после {
  содержание: "✖";
  отступ слева: 5px;
  положение: абсолютное;
}
ввод: действителен ~ span:: после {
  содержание: "✓";
  отступ слева: 5px;
  положение: абсолютное;
}

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

Вы можете увидеть хороший пример формы поиска, используемой в контексте, на нашем примере веб-сайта-aria-roles (посмотрите его вживую).

Значение Строка, представляющая значение, содержащееся в
поле поиска.
События изменить и
ввод
Поддерживаемые общие атрибуты автозаполнение ,
список ,
максимальная длина ,
миндлина ,
узор ,
заполнитель ,
требуется ,
размер .
Атрибуты IDL значение
Интерфейс DOM

HTMLInputElement

Методы выбрать() ,
setRangeText() ,
setSelectionRange() .

This entry was posted in Популярное