Как сделать поиск на сайте html css

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

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 Русаков Михаил Юрьевич. Все права защищены.

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

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

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

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

1. Разметка HTML

 
 Поиск 

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

Чем отличается от ? Оба этих поля создают однострочное текстовое поле для ввода текста, но 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.

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

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

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