Как сделать поиск в css
Перейти к содержимому

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

  • автор:

HTML/CSS — Простая форма поиска

HTML/CSS - Простая форма поиска

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

HTML Код.

html> html lang="en"> head> meta charset="UTF-8"> title>Simple Search Bar title> link rel="stylesheet" type="text/css" href="style.css"> link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"/> head> body> div class="wrap"> div class="search"> input type="text" class="searchTerm" placeholder="text"> button type="submit" class="searchButton"> span class="material-symbols-outlined"> search span> button> div> div> body> html>

CSS Код.

@import url(https://fonts.googleapis.com/css?family=Open+Sans); body< background: #f2f2f2; font-family: 'Open Sans', sans-serif; > .search < width: 100%; position: relative; display: flex; > .searchTerm < width: 100%; border: 3px solid #293042; border-right: none; padding: 5px; height: 20px; border-radius: 5px 0 0 5px; outline: none; color: #9DBFAF; > .searchTerm:focus< color: #293042; > .searchButton < width: 40px; height: 36px; border: 1px solid #293042; background: #293042; text-align: center; color: #fff; border-radius: 0 5px 5px 0; cursor: pointer; font-size: 20px; > .wrap< width: 30%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); >

Всем спасибо, я надеюсь что вам моя статья хоть чем-то помогла.

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

name имя ключа параметра. Для поля поиска чаще всего применяется «q» или «text». value значение ключа параметра. Чаще всего не задаётся. Пользователь может его изменить на свой текст, если не указаны атрибуты readonly и disabled . readonly заблокировано изменение пользователем disabled заблокированы доступ, изменение пользователем и передача данных текущего параметра required поле не может быть пустым pattern шаблон ввода как в регулярных выражениях JS, следование которому необходимо для отправки формы minlength минимальное количество символов, необходимое для отправки формы maxlength максимальное количество символов, которое может набрать пользователь size длина поля в символах placeholder подсказка-заглушка title всплывающая подсказка при наведении курсора мышки autocomplete автозаполнение. Современные браузеры показывают ранее введённые поисковые запросы на текущем домене. Можно его отключить или сделать более конкретизированным. list список рекомендованных запросов spellcheck проверяется орфография и грамматика autofocus фокус поля (то есть период между щелчком по элементу и щелчком вне элемента) получен при загрузке документа

Убрать в поле поиска крестик «Очистить», удаляющий ранее набранный текст

Как работает форма поиска на сайте

Самый простой HTML-код

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

 name="text">

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

action=»http://shpargalkablog.ru/search/»>

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

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

target=»_blank»>

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

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

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

  shpargalkablog.ru"> shpargalkablog.ru» заменить на свой адрес сайта --> 

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

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

Значок лупы

Неактивная фоновая картинка CSS

 
style=" padding: 5px 2px 5px 25px; background: url('http://3.bp.blogspot.com/-4w14hQHr5yQ/Tgm6u7KwUkI/AAAAAAAACAI/Hu2poBOPx3g/s25/search.png') no-repeat scroll 0 50%; ">

Кликабельная кнопка-иконка

 .form-search < display: inline-block; border-bottom: 1px solid; >.form-search input 
🔍">

Кликабельная картинка

     
  • Поиск по роликам youtube.com на сайте
  • Фильтрация данных на JS и CSS

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

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

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

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

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

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

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

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

Пример

html> html> head> title>Заголовок документа title> style> body < background-color: #8ebf42; > form < width:400px; margin:auto; margin-top: 250px; > input< padding:4px 10px; border:0; font-size:16px; > .search < width: 75%; > .submit< width: 70px; background-color: #1c87c9; color:#ffffff; > style> head> body> h2>Создайте поле поиска h2> form> input type="text" name=text" class="search" placeholder"Search here!"> input type="submit" name="submit" class="submit" value="Search"> form> body> html>

Давайте создадим другие поля поиска:

Пример

html> html> head> link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> title>Поле поиска title> style> body < margin: 0; padding: 0; background: #00a08d; > .search-box < position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #666666; height: 40px; border-radius: 40px; padding: 10px; > .search-box:hover > .search-txt < width: 240px; padding: 0 6px; > .search-box:hover > .search-btn < background: white; color: black; > .search-btn < color: #eeeeee; float: right; width: 40px; height: 40px; border-radius: 50%; background: #2f3640; display: flex; justify-content: center; align-items: center; transition: 0.4s; color: white; cursor: pointer; text-decoration:none; > .search-btn > i < font-size: 20px; > .search-txt < border: none; background: none; outline: none; float: left; padding: 0; color: white; font-size: 16px; transition: 0.4s; line-height: 40px; width: 0px; font-weight: bold; > > style> head> body> div class="search-box"> input type="text" name="" class="search-txt" placeholder="Type to search"/> a class="search-btn" href="#"> i class="fa fa-search" aria-hidden="true"> i> a> div> body> html>

В данном примере мы использовали Search icon из Fontawesome.

Другой пример, где использованы только HTML и CSS:

Пример

html> html> head> link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> title>Заголовок документа title> style> body< background: #cccccc; > .search < width: 100%; position: relative; display: flex; > .searchTerm < width: 100%; border: 3px solid #9e0098; border-right: none; padding: 5px; height: 20px; border-radius: 5px 0 0 5px; outline: none; > .searchTerm:focus< color: #380136; > .searchButton < width: 40px; height: 36px; border: 1px solid #9e0098; background: #9e0098; text-align: center; color: #eeeeee; border-radius: 0 5px 5px 0; cursor: pointer; font-size: 20px; > .wrap< width: 30%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); > style> head> body> h2>Создайте поле поиска h2> div class="wrap"> div class="search"> input type="text" class="searchTerm" placeholder="Type"> button type="submit" class="searchButton"> i class="fa fa-search"> i> button> div> div> body> html>

Рассмотрим еще один пример создания поля поиска:

Пример

html> html> head> title>Заголовок документа title> style> *, *::after, *::before < margin: 0; padding: 0; box-sizing: inherit; > html < font-size: 50%; > body < box-sizing: border-box; > .container < width: 25rem; height: 100%; margin: 0 1rem; position: relative; > h2 < margin: 2rem; font-size: 20px; > .searchbar < font-size: 2.4rem; width: 25rem; height: 5rem; border: none; outline: none; border-radius: 10rem; padding: 2rem; transition: all .1s; transition-delay: .1s; > .searchbar:hover < width: 27rem; height: 6rem; > .button < height: 2rem; position: absolute; top: 1.5rem; right: 1rem; transition: all .1s; transition-delay: .1s; > .button:hover < cursor: pointer; > .searchbar:hover + .button < height: 2.5rem; top: 1.8rem; right: 0; > .searchbar::placeholder < opacity: .3; > style> head> body> h2>Создайте поле поиска h2> div class="container"> input type="text" maxlength= "12" placeholder="Search" class="searchbar"> img src="https://images-na.ssl-images-amazon.com/images/I/41gYkruZM2L.png" alt="search icon" class="button"> div> body> html>

Поле поиска для сайта. Идеи для оформления

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

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

  • Содержание:
  • 1. Разметка HTML
  • 2. Поле поиска с кнопкой-иконкой
  • 3. Поле поиска с кнопкой внутри
  • 4. Поле поиска в стиле «flat»
  • 5. Поле поиска с толстой нижней границей
  • 6. Поле поиска с меняющимся цветом границы при фокусировке
  • 7. Выезжающее поле поиска
  • 8. Увеличивающееся в ширину поле поиска

1. Разметка HTML

 

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

searchbox-structure

Чем отличается от ? Оба этих поля создают однострочное текстовое поле для ввода текста, но type=»search» добавлено в стандарт HTML5 и является семантической подсказкой для браузеров. Все браузеры, кроме Mozilla Firefox, добавляют крестик очистки в поле. Чтобы его убрать, можно поменять тип поля на type=»text» .

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

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

input::-webkit-input-placeholder < color: #B6C0A5; font-style: italic; background: #E0EFCA; >input:-moz-placeholder < color: #B6C0A5; font-style: italic; background: #E0EFCA; >input:-ms-input-placeholder

2)
Цвет отображаемого текста будет черного цвета. Задать свой цвет можно при помощи свойства color , например:

input

Для отображения иконок не забудьте подключить FontAwesome.

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

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