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

search-field-dog

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

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

See the Pen yaBZRk by Elena (@html5book) on CodePen.

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, например:

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

2. Поле поиска с кнопкой-иконкой

3. Поле поиска с кнопкой внутри

4. Поле поиска в стиле «flat»

5. Поле поиска с толстой нижней границей

6. Поле поиска с меняющимся цветом границы

7. Выезжающее поле поиска

Поле поиска появляется при нажатии на кнопку с иконкой.

8. Увеличивающееся в ширину поле поиска

  • Создание Сайтов

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

    • Пожалуйста, пользуйтесь. Постараюсь добавить ещё несколько примеров.

      • Создание Сайтов

        В последнем уроке правда не понял, в чем фишка. Где поле должно появляться?

        • При нажатии на лупу выезжает

          • Создание Сайтов

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

          • Уже готовлю, может на выходных сделаю.

          • Создание Сайтов

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

            Работает только ссылкой на их таблицу.

            P.S. Разобрался. Там оказывается надо и шрифты подключить. Пути правильно прописать.

          • ))) Я про это как раз перед примерами напомнила.

          • Создание Сайтов

            Это я все сделал, просто я кинул шрифты в ту же папку, а пути не посмотрел. Потом пути в таблице исправил.

          • Создание Сайтов

            Про name=»s» ничего не написали. Без нее, например, поиск работать не будет на вордпрессе.

          • Я намеренно не указывала значения необязательных атрибутов, чтобы сделать пример универсальным. В других цмс другие значения.

  • Создание Сайтов

    Воспользовался 1 формой. Но вот мобильный яндекс-браузер на планшете не хочет скруглять углы. Из под бордера торчит белое поле.

    • посмотрите сейчас, добавила одно свойство, проверила на Sony Xperia Tablet S, Android 4.1.1 — все работает

      • Создание Сайтов

        overflow:hidden; поставил и в форму и в инпут ничего не меняется.

        • Напишите тип устройства и версию операционной системы. Протестирую в эмуляторе.

          • Создание Сайтов

            планшет техсет андроид браузер от яндекса

          • Создание Сайтов

            гугл андроид 4.2 Jelly Bean

          • Сергей, проверяла, работает:
            планшет Гугл нексус
            планшет Асер яндекс браузер
            китайский смартфон
            смартфон самсунг
            Поэтому, если не работает именно на этом устройстве, не стоит заморачиваться. Свойство введено примерно в 2011 году и должно поддерживаться без всяких костылей.

          • Создание Сайтов

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

          • Так я же как раз на яндекс браузере на стареньком acer тестировала — работает

          • Создание Сайтов

            Несовместимость яндекс-браузера с устройством.

          • Скорее всего. Поэтому при тестировании надо ориентироваться на распространенные устройства и не тратить время на остальные. На все устройствах сайт не может выглядеть одинаково, это факт.

          • Создание Сайтов

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

          • А что вы хотели от российской техники)))

  • fafa

    В седьмом варианте селектор .d6 button, в html коде такого класса нет. Как так?

  • Эдгар

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

    • Вероятно, вы не добавили какие-то атрибуты, в этих примерах форма пустая.

      • Эдгар

        Спасибо, и еще один вопрос, при уменьшении высоты поля поиска и, соответственно, высоты кнопки, контент внутри кнопки остается внизу, как можно сместить контент (иконку лупы) в центр поля, при этом не уменьшая размер иконки (если картинка) или шрифта?

        • Добавьте для всего * {box-sizing: border-box;}, а для иконки укажите высоту строки за минусом толщины верхней и нижней рамки, например:

          • Эдгар

            если не сложно можете показать на примере этого кода? я в этом деле новичок, только хочу понять как все работает…

          • Вот посмотрите http://codepen.io/html5book/pen/XpBxWM. Убрала белый фон у кнопки, высоту кнопки сделала равной высоте поля.

          • Эдгар

            У меня все равно иконка не в поле… открывал с разных браузеров и с телефона, все тоже самое. css вставил точно тот же что и вы отправили.
            https://uploads.disquscdn.com/images/cc7c25aabdb5711356067f48846a3187390f74665c26cb125fff004973dc66e4.png

          • Вероятно, у вас для этих элементов уже есть какие-то стили на сайте, поэтому так криво и выходит. Можете ссылку скинуть, посмотрю в чём дело.

  • Тамара

    Очень полезные примеры! Спасибо!
    Правда, есть вопрос. Если нужно добавить к форме поиска селектор, чтобы можно было выбрать раздел для поиска, то это уже реализовывается через скрипт?

    • Пожалуйста!
      Класс или идентификатор можно добавить к форме напрямую в разметку, например,

  • Евгений

    Спасибо за коллекцию!
    Есть небольшой вопрос. А можно ли как нибудь избавиться от голубой рамки, которая появляется при нажатии на лупу в 8-м варианте?

    • За рамку отвечает свойство outline. Чтобы её убрать, добавьте к button {outline: none;}.