Контакт вход поиск: почта, поиск в интернете, новости, игры

Вход

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

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

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

 searchTerms = mySearch.value;

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

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

список

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

maxlength

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

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

minlength

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

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

шаблон

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

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

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

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

заполнитель

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

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

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

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

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

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

размер

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

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

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

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

проверки орфографии на элементах . Допустимые значения для проверки орфографии :

ложь

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

правда

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

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

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

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

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

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

autocorrect

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

на

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

от

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

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

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

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

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

mozactionhint

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

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

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

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

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

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

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

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

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

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

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

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

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

 <форма>
  <дел>
    
    <ввод
      тип = "поиск"
     
      имя = "к"
      placeholder="Идентификаторы пользователей имеют длину от 4 до 8 символов"
      обязательный
      размер = "30"
      минимальная длина = "4"
      максимальная длина = "8" />
    
    <промежуток> 
  

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

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

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

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

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

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

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

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

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

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

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

HTMLInputElement

Методы выбрать() , setRangeText() , setSelectionRange() .
Specification
HTML Standard
# text-(type=text)-state-and-search-state-(type=search)

BCD tables only load в браузере

с включенным JavaScript. Включите JavaScript для просмотра данных.

Последнее изменение: , участниками MDN контактов, сохраненных в адресной книге, и для отображения результатов. Мы создадим простую форму с текстовым полем, где пользователь может вводить текст. Кнопка будет использоваться для ввода набранного текста, а затем мы будем искать совпадения в нашей адресной книге. Поле, выбранное для нашего поиска, будет Имя.

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

Подготовка

Как и в других рецептах в этой теме, мы собираемся использовать PhoneGap, UiUIKit и XUI. Пожалуйста, убедитесь, что вы установили эти фреймворки, прежде чем продолжить.

Как это сделать…

1. Как вы узнали , создайте новый проект PhoneGap в Xcode. Откройте основной файл index, html и добавьте необходимые строки для загрузки UiUIKit и XUI:

2. Теперь нам нужно добавить наш собственный код JavaScript:


Не забудьте закомментировать функцию JavaScript preventBehaviour (e) и строку под ней.

3. Последним шагом будет создание нашего пользовательского интерфейса с помощью простой формы и кнопки поиска:

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

5. После ввода имени в текстовом поле и нажатия кнопки «Поиск» будет отображен список с результатом поиска:

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

Как это работает…

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

Наша кнопка использует обработчик для вызова функции JavaScript searchContact(), которая вызовет метод getAllContacts(), предоставляемый навигацией. контактный объект PhoneGap. Этот метод использует три параметра: две функции обратного вызова и один словарь опций для установки критериев поля для поиска. Один из обратных вызовов будет запущен, если что-то не так, а другой, если все в порядке. Упомянутый словарь параметров использует предопределенную переменную с именем nameFilteriable, и ее значение извлекается из нашего текстового ввода.

onSuccessContact() получил в качестве параметра массив, содержащий все подходящие контакты из результатов поиска. Мы перебираем этот массив, чтобы получить имя и фамилию для каждого контакта. Оба они назначаются разным переменным JavaScript и используются для построения элементов нашего неупорядоченного списка. Кроме того, мы добавляем обработчик onclick для каждого из них, который будет вызывать функцию displayContact() после нажатия на него.

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

JavaScript-функция displayContact() инкапсулирует вызов функции с тем же именем, предопределенной внутри навигатора.

alexxlab

alexxlab

[email protected]

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Related Posts

Закрыть
Menu