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

Опубликовано: 19 февраля 2016 Обновлено: 30 апреля 2019 59 комментариев

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

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

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

1. Разметка HTML

<form action="" method="get">
  <input name="s" placeholder="Искать здесь..." type="search">
  <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;
}

Поделиться: