Поле для поиска



Влад Мержевич

На сайтах часто востребован поиск по ключевым словам, для ввода которых используется текстовое поле. В HTML5 для поиска добавлено новое поле, синтаксис его следующий:

<input type="search" атрибуты>

Используемые атрибуты совпадают с текстовым полем.

Разница между текстовым полем и полем для поиска состоит в стилистическом оформлении. На платформах, где поисковая форма имеет свой собственный уникальный вид, легко придать полю аналогичное оформлении. В большинстве браузеров поле для поиска по своему виду никак не отличается от текстового поля, за исключением Chrome, Safari и IE10, которые добавляют небольшой крестик в правой части для быстрой очистки введённого текста (рис. 1).

Рис. 1. Вид поля для поиска в Chrome

В примере 1 показано создание формы с полем для поиска.

Пример 1. Поле для поиска

HTML5IE 10+CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Поиск</title>
 </head>
 <body>
  <form>
   <p><input type="search" name="q" placeholder="Поиск по сайту"> 
   <input type="submit" value="Найти"></p>
  </form>
 </body>
</html>

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.