Как сделать поисковую строку в html css

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

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

В этой статье мы пошагово покажем, как можно создать поле поиска с помощью CSS и HTML.

  1. Создайте HTML
  • Создайте тег <form>, который используется для добавления HTML форм к веб-странице для пользовательского ввода.
  • Добавьте тег <input> внутри элемента <form>.
  • Добавьте также placeholder с выражением "Search here!" и класс "Search".
  • Добавьте другой input c классом "submit" и значение "search". ска, используя только CSS и HTML.

Теперь у нас есть поле поиска, но необходимо добавить стиль.

  1. Добавьте CSS

Есть три элемента, к которым необходимо применить стиль: "form", "search" и"submit".

  • Добавьте фоновый цвет текстовой части (body).
  • Начните оформление классов "form", "search"и "submit".
  • Установите width, margin, padding, и font-size.

После того, как все свойства добавлены, запустите код и увидите результат!

Форма поиска по сайту

Если набрать в поле «вопрос» и щелкнуть по кнопке «Найти», то адрес страницы изменится с « http://shpargalkablog.ru/2011/06/forma-poiska-po-saitu.html » на « http://shpargalkablog.ru/2011/06/forma-poiska-po-saitu.html?text=вопрос », как это происходит при нажатии на ссылку. При загрузке страницы, скрипт проверяет наличие заданных параметров в URL и при их обнаружении формирует и отображает результаты поиска по сайту.

Но в целях увеличения скорости загрузки документа, скрипт, обрабатывающий запрос, как правило, помещают только на одну страницу сайта, на которую будет сделан переход, если её адрес прописать в атрибуте action : « http://shpargalkablog.ru/search/?text=вопрос ».

Для работы скрипта могут понадобиться дополнительные параметры, которые указываются в <input type="hidden"> . Это поле не отображается. Теперь форма будет вызывать « http://shpargalkablog.ru/search/?searchid=808327&text=вопрос ».

Результат работы формы открыть в новой вкладке с помощью атрибута target

Где взять скрипт поиска по сайту

  • предложенным специальными сервисами Яндекса и Google,
  • встроенным в используемую CMS (при наличии), например, на Blogger на « https://site.ru/search?q=вопрос », где « site.ru » заменить на свой адрес блога,
  • разработанным самостоятельно, например, на PHP.

Самый простой вариант — перенаправить запрос Google:

Текст на кнопке: «Поиск», «Искать», «Найти»

Из слов-побудителей «Найти» имеет совершённый вид и подразумевает, что результат поиска будет обязательно положительным.

Поле для поиска

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

Используемые атрибуты совпадают с текстовым полем.

Разница между текстовым полем и полем для поиска состоит в стилистическом оформлении. На платформах, где поисковая форма имеет свой собственный уникальный вид, легко придать полю аналогичное оформлении. В большинстве браузеров поле для поиска по своему виду никак не отличается от текстового поля, за исключением Chrome, Safari и IE10, которые добавляют небольшой крестик в правой части для быстрой очистки введённого текста (рис. 1).

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

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