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

search-field-dog

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

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

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

1. Разметка HTML

<form action="" method="get">
  <input name="s" placeholder="Искать здесь..." type="search" required>
  <button type="submit">Поиск</button>
</form>

Элемент <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="текст">
Цвет отображаемого текста будет серого цвета. С помощью следующих правил можно задать тексту-подсказке любой цвет, поменять начертание и фон поля. Эти селекторы нельзя совмещать в одно правило, иначе они не будут работать.

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 {
  color: #B6C0A5; 
  font-style: italic; 
  background: #E0EFCA;
}

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

input {
  color: white;
}

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

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

<form>
  <input type="text" placeholder="Искать здесь...">
  <button type="submit"></button>
</form>
* {box-sizing: border-box;}
form {
  position: relative;
  width: 300px;
  margin: 0 auto;
}
input {
  width: 100%;
  height: 42px;
  padding-left: 10px;
  border: 2px solid #7BA7AB;
  border-radius: 5px;
  outline: none;
  background: #F9F0DA;
  color: #9E9C9C;
}
button {
  position: absolute; 
  top: 0;
  right: 0px;
  width: 42px;
  height: 42px;
  border: none;
  background: #7BA7AB;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
}
button:before {
  content: "\f002";
  font-family: FontAwesome;
  font-size: 16px;
  color: #F9F0DA;
}

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

<form>
  <input type="text" placeholder="Искать здесь...">
  <button type="submit"></button>
</form>
* {box-sizing: border-box;}
form {
  position: relative;
  width: 300px;
  margin: 0 auto;
}
input, button {
  border: none;
  outline: none;
  border-radius: 3px;
}
input {
  width: 100%;
  height: 42px;
  background: #F9F0DA;
  padding-left: 15px;
}
button {
  height: 26px;
  width: 26px;
  position: absolute;
  top: 8px;
  right: 8px;
  background: #F15B42;
  cursor: pointer;
}
button:before {
  content: "\f105";
  font-family: FontAwesome;
  color: #F9F0DA;
  font-size: 20px;
  font-weight: bold;
}

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

<form>
  <input type="text" placeholder="Искать здесь...">
  <button type="submit"></button>
</form>
* {box-sizing: border-box;}
form {
  position: relative;
  width: 300px;
  margin: 0 auto;
  background: #A3D0C3;
}
input, button {
  border: none;
  outline: none;
  background: transparent;
}
input {
  width: 100%;
  height: 42px;
  padding-left: 15px;
}
button {
  height: 42px;
  width: 42px;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}
button:before {
  content: "\f002";
  font-family: FontAwesome;
  font-size: 16px;
  color: #F9F0DA;
}

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

<form>
  <input type="text" placeholder="Искать здесь...">
  <button type="submit"></button>
</form>
* {box-sizing: border-box;}
form {
  position: relative;
  width: 300px;
  margin: 0 auto;
  background: #F9F0DA;
  border-bottom: 4px solid #be290e;
}
input, button {
  border: none;
  outline: none;
  background: transparent;
}
input {
  width: 100%;
  height: 42px;
  padding-left: 15px;
}
button {
  height: 42px;
  width: 42px;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}
button:before {
  content: "\f178";
  font-family: FontAwesome;
  font-size: 20px;
  color: #be290e;
}

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

<form>
  <input type="text" placeholder="Искать здесь...">
  <button type="submit"></button>
</form>
* {box-sizing: border-box;}
form {
  position: relative;
  width: 300px;
  margin: 0 auto;
}
input, button {
  outline: none;
  background: transparent;
}
input {
  width: 100%;
  height: 42px;
  padding-left: 15px;
  border: 3px solid #F9F0DA;
}
button {
  border: none;
  height: 42px;
  width: 42px;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}
button:before {
  content: "\f002";
  font-family: FontAwesome;
  font-size: 16px;
  color: #F9F0DA;
}
input:focus {
  border-color: #311c24
}

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

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

<form>
  <input type="text" placeholder="Искать здесь...">
  <button type="submit"></button>
</form>
* {box-sizing: border-box;}
form {
  position: relative;
  width: 300px;
  margin: 0 auto;
  height: 42px;
}
input {
  height: 42px;
  width: 0;
  padding: 0 42px 0 15px;
  border: none;
  border-bottom: 2px solid transparent;
  outline: none;
  background: transparent;
  transition: .4s cubic-bezier(0, 0.8, 0, 1);
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
}
input:focus {
  width: 300px;
  z-index: 1;
  border-bottom: 2px solid #F9F0DA;
}
button {
  background: #683B4D;
  border: none;
  height: 42px;
  width: 42px;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}
button:before {
  content: "\f002";
  font-family: FontAwesome;
  font-size: 16px;
  color: #F9F0DA;
}

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

<form>
  <input type="text" placeholder="Искать здесь...">
  <button type="submit"></button>
</form>
* {box-sizing: border-box;}
form {
  width: auto;
  float: right;
  margin-right: 30px;
}
input {
  width: 250px;
  height: 42px;
  padding-left: 15px;
  border-radius: 42px;
  border: 2px solid #324b4e;
  background: #F9F0DA;
  outline: none;
  position: relative;
  transition: .3s linear;
}
input:focus {
  width: 300px;
}
button {
  width: 42px;
  height: 42px;
  background: none;
  border: none;
  position: absolute;
  top: -2px;
  right: 0;
}
button:before{
  content: "\f002";
  font-family: FontAwesome;
  color: #324b4e;
}
  • Создание Сайтов

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

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

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

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

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

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

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

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

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

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

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

            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;}, а для иконки укажите высоту строки за минусом толщины верхней и нижней рамки, например:

          input { height: 30px;  border: 2px solid #7BA7AB;}
          button:before {line-height: 26px;}
          • Эдгар

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

            form {
              position: relative;
              width: 300px;
              margin: 0 auto;
            }
             input, button {
              outline: none;
              background: #ffffff;
            }
            input {
              width: 100%;
              height: 25px;
              padding-left: 15px;
              border: 2px solid #aaaaaa;
            }
            button {
              border: none;
              height: 26px;
              width: 42px;
              position: absolute;
              top: 0;
              right: 0;
              cursor: pointer;
             }
            button:before {
              content: "f002";;
              font-family: FontAwesome;
              font-size: 16px;
              color: #a1a1a1;
            }
            input:focus {  border-color: #311c24}
          • Вот посмотрите http://codepen.io/html5book/pen/XpBxWM. Убрала белый фон у кнопки, высоту кнопки сделала равной высоте поля.

          • Эдгар

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

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

  • Тамара

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

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

        
        
      
  • Евгений

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

  • ximik

    Спасибо огромное за статью!
    Все просто, интересно и полезно

  • chprof

    Не совсем могу понять: как будет отправляться запрос для поиска на сервер, после ввода текста?
    button type=»submit», являясь дочерним элементом формы также как и input type=»text», по умолчанию реализует отправку введённого пользователем текста в input type=»text» по нажатии клавиши Enter?

    • Разметка формы в данных примерах неполная, нет атрибутов формы, потому что у вас они могут быть собственные.
      После заполнения полей формы пользователем и щелчка на кнопке типа submit данные формы группируются браузером в пары имя-значение. Элемент form указывает браузеру, куда отправить данные после нажатия пользователем кнопки отправки, предоставляя соответствующее URL в атрибуте action, а также способ передачи данных method этой формы серверу — GET или POST.

      • chprof

        Спасибо за исчерпывающий ответ, меня интересовало как верстальщика реализация, так как с движком лично не работаю. Но раз связать можно, то огромное спасибо.

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

    Обнаружил, что при записи font-size для текста, разваливается форма. Как это исправить.