Html код поисковой строки для WordPress

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

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

Структура поля поиска

Чем отличается <input type="search"> от <input type="text">? Оба этих поля создают однострочное текстовое поле для ввода текста, но type="search" добавлено в стандарт HTML и является семантической подсказкой для браузеров. Все браузеры, кроме Mozilla Firefox, добавляют крестик очистки в поле. Чтобы его убрать, можно поменять тип поля на type="text".

Чем отличается <input type="submit"> от <button type="submit">? Разницы в действии кнопок отправки, созданных первым или вторым способом, нет. Отличие состоит в том, что элемент <button> является контейнером, следовательно внутрь него можно помещать другие элементы, например, изображения или иконки.

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

Если вам надо вставить поисковую строку на ваш сайт через html, то вы можете воспользоваться кодами ниже.

Важно!!! Вместо http://вашсайт.ru вставьте url вашего сайта.

1. Простейший код

Строка подстраивается под дизайн сайта.

<form role="search" method="get" class="search-form" action="http://вашсайт.ru">
   <label>
<input type="search" class="search-field" placeholder="Поиск…" value="" name="s">
   </label>
   <input type="submit" class="search-submit" value="Поиск">
  </form>

Пример:

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

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

HTML код:

<form action="http://вашсайт.ru" method="get">
  <input name="s" placeholder="Введите слово и нажмите Enter..." type="search">
  <button type="submit"></button>
</form>

Стиль CSS:

* {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 #967adc;
}
button {
  background: #967adc;
  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: #000;
}

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

HTML код:

<form action="http://вашсайт.ru" method="get">
  <input name="s" placeholder="Искать здесь..." type="search">
  <button type="submit"></button>
</form>

Стиль CSS:

* {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: #eeeeee;
  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;
}

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

HTML код:

<form action="http://вашсайт.ru" method="get">
  <input name="s" placeholder="Искать здесь..." type="search">
  <button type="submit"></button>
</form>

Стиль CSS:

* {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 #967adc;
}
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: #9355e4;
}
input:focus {
  border-color: #311c24;
}

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

HTML код:

<form action="http://вашсайт.ru" method="get">
  <input name="s" placeholder="Искать здесь..." type="search">
  <button type="submit"></button>
</form>

Стиль CSS:

* {box-sizing: border-box;}
form {
  position: relative;
  width: 300px;
  margin: 0 auto;
  background: #8c8cfe;
}
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: #000;
}