Верстка формы поиска

В статье описаны особенности верстки поисковой формы сайта, приведен пример семантичной разметки кода, оформление на CSS3, плюс в конце немного магии jQuery.

Содержание статьи

  1. Разметка
  2. Особенности оформления поисковой формы
  3. Скрипты jQuery

Разметка

До появления HTML5 форма поиска делалась обычным текстовым полем, с постепенным приходом в нашу жизнь новой версии языка разметки для нее появился специальный тип поля search. Так что в HTML коде современного сайта мы можем увидеть что-то вроде этого:

<form action="#" class="search-form">
  <input type="search" class="search" placeholder="поиск по сайту...">
  <input type="submit" class="submit-btn" value="Найти">
</form>

Результат кода в FF, Opera, IE9:

Поле поиска без оформления
Поле поиска без оформления

И немного по другому в браузерах на движке вебкит (Chrome, Safari):

Поле поиска в браузерах на движке webkit
Поле поиска в вебкитах

Как видите, при фокусе на поле добавляется подсветка, а при вводе текста появляется кнопка очистки, при нажатии на нее содержимое поля удаляется, что само по себе достаточно удобно.

Без CSS оформления наша форма поиска пока выглядит достаточно просто, в этой статье мы попробуем сделать нечто вроде этого:

Пример поисковой формы
Пример поисковой формы

Я немного усложнил себе задачу и добавил ниже формы поисковую подсказку, которую чуть позже реализуем на jQuery, HTML разметка уже будет немного сложнее, у меня получилось так:

<div class="wrap-search-form">
  <form action="#" class="search-form">
    <input type="search" class="search" placeholder="введите запрос..."/>
    <input type="submit" class="submit-btn" value="Найти"/>
  </form>
  <div class="notice">
    <div class="rect"></div>
    <p>например: <span>верстка формы поиска</span></p>
  </div>
</div>

Если не планируется поддержка старых браузеров, пустой несемантичный элемент <div class="rect"></div> можно заменить псевдоэлементом :before.

Особенности оформления поисковой формы

Поскольку я решил использовать достаточно много CSS3 свойств, в старых браузерах Internet Explorer эти чудеса работать не будут, и чтобы добиться кроссбраузерности, нужно подключать костыли, что-то делать картинками и т.д.

Первым делом хотелось бы обратить внимание на некоторые особенности, а именно:

  • стилизация <input type="search"> в браузерах на движке вебкит
  • стилизация placeholder

Стили формы поиска в браузерах Chrome, Safari

Добавим к полю с классом .search какой-нибудь стиль:

.search {
  background: #d8e6ef;
  border: 1px solid #000;
}

Результат на скриншоте:

Search в различных браузерах
Search в браузерах FF, Opera, Chrome и Safari

Как обычно в браузерах наблюдается шатание и разброд, в Chrome как-то странно работает border (появляются поля, как будто задаем padding), Safari же полностью игнорирует правила. Но есть решение в данной ситуации, добавляем такое правило в CSS-код:

.search {
  -webkit-appearance: none;
}

Теперь в вебкитах все стало нормально, но они все еще отличаются подсветкой полей при фокусе по умолчанию и кнопкой очистки. Эти элементы, хоть часто и бывают удобны, иногда могут портить задумку дизайна и их необходимо отключать. Подсветку убрать очень просто:

.search:focus {
  outline: none; /* убрали подсветку при фокусе */
  -moz-box-shadow: inset 0 0 2px #000;
  -o-box-shadow: inset 0 0 2px #000;
  -webkit-box-shadow: inset 0 0 2px #000;
  box-shadow: inset 0 0 2px #000; /* добавили внутреннюю тень в качестве альтернативы для всех браузеров */
}

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

/* правило только к элементу с классом search */
.search::-webkit-search-cancel-button {
  display: none; /* убрали кнопку очистки */
}
/* или ко всем полям с типом search в документе */
input[type="search"]::-webkit-search-cancel-button {
  display: none;
}

Оформление текстовой подсказки placeholder

К сожалению с текстовой подсказкой все немного сложнее, чем кажется на первый взгляд. Во-первых, она не работает в IE9, не говоря уже о старых браузерах, поэтому в критичных местах, где обязательно изначально нужен какой-то текст в поле, следует использовать JavaScript. Во-вторых, placeholder плохо поддается оформлению в браузерах Firefox, Chrome, Safari и совсем не поддается в Opera:

:-moz-placeholder {
  color: #304e62; /* изменили цвет в FF */
}
::-webkit-input-placeholder {
  color: #304e62; /* изменили цвет в вебкитах */
}

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

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

Скрипты jQuery

Напоследок добавим немного скриптов нашей форме, а именно:

  • сделаем отмену запроса и вывод сообщения об ошибке при отправлении пустого поля
  • при фокусе на поле добавим небольшую всплывающую подсказку внизу

Очень просто это все реализовать мощью jQ, у меня получился такой код с комментариями:

$(function() {
  /* обрабатываем отправку формы */
  $('.search-form').submit(function() {
    var errVal = 'пустой запрос';
    /* Если поле пустое или содержит значение errVal */
    if($('.search').val() == '' || $('.search').val() == errVal) {
      /* добавить в поле значение errVal, изменить цвет фона и */
      $('.search').val(errVal).css({backgroundColor: 'rgba(0,0,0,.1)'});
      /* возвратить false - форма не отправляется */
      return false;
    };
  });
  /* при фокусе на поле */
  $('.search').focus(function() {
    /* выставить пустое значение поля, задать цвет фона в изначальный */
    $(this).val('').css({backgroundColor: '#d8e6ef'});
    /* показать всплывающую подсказку */
    $('.notice').fadeIn(400);
  });
  /* при снятии фокуса */
  $('.search').blur(function() {
    /* убрать всплывающую подсказку */
    $('.notice').fadeOut(400);
  });
});

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

Итоги

Таким образом мы сверстали и запрограммили поисковую форму для сайта, работает в последних версиях Firefox, Chrome, Opera, Safari и IE9+. При большом желании можно сделать более-менее кроссбраузерную версию, начиная хоть с IE6.

Проверено

  • Internet Explorer 9+
  • Opera
  • Firefox
  • Chrome
  • Safari

Рейтинг статьи

Похожие статьи

Комментариев пока нет.