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

Как сделать — Меню поиска

Узнайте, как создать меню поиска для фильтрации ссылок с помощью JavaScript.

Поиск/Фильтр меню

Как искать ссылки в меню навигации:

Содержание страницы

Начните вводить определенную категорию/ссылку в строке поиска, чтобы "отфильтровать" параметры поиска.

Какой-то текст..Какой-то текст..Какой-то текст..Какой-то текст..Какой-то текст..Какой-то текст..Какой-то текст..Какой-то текст..

Some other text..Какой-то текст..Какой-то текст..Какой-то текст..Какой-то текст..Какой-то текст..Какой-то текст..Какой-то текст..

Создать меню поиска

Шаг 1) Добавить HTML:

Пример

<input type="text" onkeyup="myFunction()" placeholder="Поиск.." title="Введите категорию">

Примечание: Мы используем href="#" в этой демонстрации, поскольку у нас нет страницы, на которую можно было бы сделать ссылку. В реальной жизни это должен быть реальный URL-адрес конкретной страницы.

Шаг 2) Добавить CSS:

Стиль окна поиска и меню навигации:

Пример

/* Стиль окна поиска */
#mySearch <
width: 100%;
font-size: 18px;
padding: 11px;
border: 1px solid #ddd;
>

/* Стиль меню навигации */
#myMenu <
list-style-type: none;
padding: 0;
margin: 0;
>

/* Стиль навигационных ссылок */
#myMenu li a <
padding: 12px;
text-decoration: none;
color: black;
display: block
>

#myMenu li a:hover <
background-color: #eee;
>

Шаг 3) Добавить JavaScript:

Пример

<script>
function myFunction() <
// Объявить переменные
var input, filter, ul, li, a, i;
input = document.getElementById("mySearch");
filter = input.value.toUpperCase();
ul = document.getElementById("myMenu");
li = ul.getElementsByTagName("li");

// Прокрутите все элементы списка и скройте те, которые не соответствуют поисковому запросу
for (i = 0; i < li.length; i++) <
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) <
li[i].style.display = "";
> else <
li[i].style.display = "none";
>
>
>
</script>

Совет: Удалите toUpperCase() если вы хотите выполнять поиск с учетом регистра.

ПАЛИТРА ЦВЕТОВ
ПРИСОЕДИНЯЙТЕСЬ!

Получите ваш
Сертификат сегодня!

Связь с админом

Если вы хотите сообщить об ошибке, а также внести предложение о работе сайта, добавить объявление или рекламу на сайт, не стесняйтесь отправить админу электронное письмо на email:

Топ Учебники
Топ Справочники
Топ Примеры
Веб Сертификаты

Этот сайт оптимизирован для обучения и тестирования. Примеры могут быть упрощены для улучшения чтения и базового понимания. Учебные пособия, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность и работоспособность всего контента. Используя этот сайт, вы соглашаетесь с тем, что прочитали и приняли условия использования, cookie и политику конфиденциальности.
Также вы можете абсолютно бесплатно скачать офлайн версию сайта W3Schools на русском архивом с GitHub и пользоваться локально на своём компьютере.
Также доступна версия сайта W3Schools на украинском языке.
Copyright 1999-2022 by Refsnes Data. All Rights Reserved.
Сайт работает на фреймворке W3.CSS.

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

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

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

  • Содержание:

1. Разметка HTML

Элемент <form> является контейнером для формы поиска, поле поиска создается при помощи элемента <input type="search"> или <input type="text"> , а кнопка отправки данных на сервер может создаваться с помощью элемента <input type="submit"> или <button type="submit"> .

searchbox-structure

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

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

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

2) <input type="text" value="текст">
Цвет отображаемого текста будет черного цвета. Задать свой цвет можно при помощи свойства color , например:

Как сделать кнопку внутри поля для поиска?

Разместить кнопку отправки формы внутри рамки для ввода текста.

Решение

Надо понимать, что напрямую добавить кнопку внутрь поля формы нельзя. Поэтому любые методы лишь имитируют этот эффект. Для создания подобной иллюзии следует убрать исходную рамку вокруг поля для поиска и добавить её к элементу, внутри которого располагается поле и кнопка. Данный метод лучше всего работает когда все размеры у нас имеют фиксированные значения. В примере 1 общая ширина формы задана как 300 пикселов, поле имеет ширину 274 пиксела, а кнопка — 20 пикселов. Ширина поля подобрана с учётом того, чтобы не возникало переносов в форме, это негативно скажется на общем виде.

Некоторых добавлений в код CSS потребуют браузеры Safari и Chrome. При получении фокуса поля формы подсвечиваются цветной рамкой, которая разрушает нашу иллюзию единого поля. Чтобы этого не возникало, в стиле поля для поиска добавим outline со значением none , это позволит заблокировать появление рамки в указанных браузерах. Вокруг поля поиска ( <input type="search"> ) в любом случае останется тонкая рамка, её можно удалить с помощью специфического свойства -webkit-appearance опять же со значением none .

Пример 1. Форма поиска

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат примера показан на рис. 1.

Вид поля для поиска с кнопкой

Рис. 1. Вид поля для поиска с кнопкой

Саму кнопку можно добавить по разному. Например, сделать её обычной кнопкой с надписью, через <input type="image"> , или, как в примере выше, в виде кнопки с фоновым рисунком.

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

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