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

Вся эта конструкция до стилизации выглядит таким вот образом.

CSS код

Зададим светло-зелёный цвет фона для панели навигации.

nav background-color: #dcedc8;
>

Поместим все ссылки в строку с помощью обтекания слева, представим ссылки, как изначально строчные элементы – блочными.

nav a float: left;
display: block;
>

Меняем цвет фона под ссылками при наведении.

nav a:hover background-color: #8bc34a;
>

Стилизуем активный элемент для выделения пункта меню текущей страницы.

nav a.active background-color: #8bc34a;
color: #fff;
>

Располагаем контейнер для поиска на правой части панели навигации.

nav .search-box float: right;
>

Стилизуем поле для поиска внутри панели навигации.

nav input[type=text] padding: 5px;
margin-top: 7px;
border: none;
>

Стилизуем кнопку Отправить внутри контейнера с поиском, располагая её правее по отношению к строке поиска (float:right).

nav .search-box button float: right;
padding: 5px;
margin-top: 7px;
margin-right: 15px;
background: #8bc34a;
border: none;
cursor: pointer;
>

Меняем цвет кнопки при наведении.

nav .search-box button:hover background: #bdbdbd;
>

До ширины экрана 625 пикселей панель навигации выглядит хорошо.

После 625 пикселей конструкция ломается, необходимо делать медиа-запрос для маленьких устройств.

Медиа-запросы

Первым делом отменим обтекание везде, где оно было (float:none), это позволит всем элементам занять вертикальное положение, на ширине экрана меньше, чем 625 пикселей.

@media screen and (max-width: 625px) nav .search-box float: none;
>
nav a, nav input[type=text], nav .search-box button float: none;
display: block;
text-align: left; /* ссылки слева */
width: 100%; /* на всю ширину экрана */
>
nav input[type=text] border: 1px solid #689f38; /* рамка для строки поиска */
>
>

Добавить иконку на кнопку Отправить

1) Добавить ссылку между тегами head:

2) Вставить иконку между тегами button:

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

Посмотреть код целиком можно на Codepen

Создано 31.10.2018 10:20:35

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 2 ):

Sokol2012 03.05.2020 09:28:27

Спасибо тебе, добрый человек! Ради отзыва решил даже зарегистрироваться на сайте. Это единственный поиск, который корректно подошел к моему сайту. За что огромное спасибо!

walanik 09.06.2022 00:22:50

++++ очень качественно, спасибо.

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.

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

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

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

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

Добавление предложений в поисковый плагин

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

Поиск по сайту через Google и Яндекс

Поиск на сайте, где много информации, это один из способов отыскать и прочитать нужный материал. Эта мысль настолько очевидна, что никакого подтверждения не требует, поэтому практически во все системы управления сайтом поиск вставлен по умолчанию. Как быть, если подобный поиск по каким-либо причинам не устраивает или вообще отсутствует? Позаимствовать систему поиска у Google или Яндекса. И у той и другой компании есть прекрасные средства для организации поиска по одному или нескольким ресурсам.

Поисковый плагин для сайта

В интерфейс браузера Firefox, начиная с версии 2.0 встроена строка поиска, позволяющая без захода на сайт вводить поисковые запросы к Гуглу, Яндексу и другим системам. Идея оказалась удачной и ее впоследствии подхватили разработчики других браузеров. Несмотря на то, что подобным поиском пользуются многие, включая и создателей сайтов, большинство из них не подозревают, насколько просто и легко сделать собственный поисковый плагин для сайта. Плюсов у такого плагина несколько: пользователи начинают активнее использовать поиск, возрастает количество посетителей, повышается результативность сайта, улучшается юзабилити. Главное, что затрат практически нет. Если на сайте используется поиск, «прикрутить» для него плагин раз плюнуть.