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

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. Поле поиска с кнопкой-иконкой

Разметка HTML

CSS стили

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

Разметка HTML

CSS стили

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

Разметка HTML

CSS стили

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

Разметка HTML

CSS стили

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

Разметка HTML

CSS стили

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

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

CSS стили

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

Разметка HTML

CSS стили

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

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

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

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

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

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

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

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

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

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

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

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

            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 коде такого класса нет. Как так?