Пример верстки поисковой формы для сайта
Предлагаю один из возможных вариантов верстки поисковой формы для сайта, которая будет выглядеть вот так:
Ее особенность заключается в том, что вся видимая часть формы — это поле ввода текста и нужно учесть, что его оформление будет меняться при получении фокуса, т.е. когда мы ставим курсор в это поле. Выглядеть это будет так:
А кнопка отправки формы накладывается поверх поля ввода.
Для бывалых верстальщиков эта информация вряд ли будет полезной, а вот начинающим может пригодиться.
Готовый сверстанный пример можно посмотреть здесь.
HTML-код формы поиска
Выглядит он следующим образом:
<form action="" method="post" id="search">
<input type="text" name="" value="поиск" onblur="if(this.value=='') this.value='поиск';" onfocus="if(this.value=='поиск') this.value='';" class="input" />
<input type="submit" name="" value="" class="submit" />
</form>
CSS-код
Я приготовил вот такой спрайт, который и будет использоваться при смене фокуса у поля ввода:
Привожу весь CSS-код с комментариями:
#search {
/* устанавливаем ширину формы,
** равную ширине поля ввода (183 + 37 + 15) */
width: 235px;
height: 29px;
}
/* делаем инпуты плавающими, чтобы убрать лишние отступы,
** и отключаем бордюры */
#search input {
float: left;
border: none;
}
/* стили для поля ввода */
#search .input {
width: 183px;
height: 28px;
/* внутренний отступ справа (37px) делаем больше левого,
** т.к. там будет размещена кнопка отправки */
padding: 0 37px 1px 15px;
background: #EEE url(https://dimox.name/wp-content/uploads/2023/10/search.png) no-repeat;
color: #555;
font: 13px/28px Tahoma, Arial, sans-serif;
outline: none;
}
/* приходится использовать хак для FireFox
** для вертикального выравнивания текста,
** т.к. у него свои особые представления об этом */
@-moz-document url-prefix() {
#search .input {
height: 27px;
padding-bottom: 2px;
}
}
/* меняем оформление поля ввода при фокусе */
#search .input:focus {
background-color: #E8E8E8;
background-position: 0 -29px;
color: #333;
}
/* оформляем кнопку отправки */
#search .submit {
width: 37px;
height: 29px;
cursor: pointer;
/* смещаем кнопку влево на собственную ширину,
** чтобы она оказалась над полем ввода */
margin-left: -37px;
/* по-нормальному, здесь достаточно было бы указать background: none;
** но приходится указывать фон из-за бага в IE */
background: url(dontexist.png);
}
Про баг в Internet Explorer
Internet Explorer как-то неожиданно для меня преподнес очередной сюрприз. Причем столкнулся я с ним совсем недавно. Суть в том, что, если у кнопки отправки убрать фон, то в IE она становится некликабельной, т.е. как будто прячется под поле ввода. И хоть добавляй к ней позиционирование (position), хоть повышай индекс слоя (z-index) — ни в какую не реагирует. Но стоит кнопке задать какую-нибудь фоновую картинку, даже несуществующую, проблема устраняется.
Данный баг наблюдается только в IE8 и IE9.
Смотрите также
Пример верстки поисковой формы для сайта на HTML5 и CSS3
После публикации вчерашней статьи по верстке поисковой формы меня раскритиковали, мол верстка отстой, есть же современные HTML5 и CSS3. Я, конечно, понимаю, последние стандарты это круто и все такое. Но ...
Верстка красивых тегов для сайта + бонус
Замечательный дизайнер Orman Clark однажды представил своим читателям очень красивый дизайн облака тегов, который я использовал на одном моем сайте. Расскажу, как сверстать такие теги для вашего сайта. Для начала ...
Зеленый свет CSS-свойствам при верстке под IE8 и выше
Пришло время, и я наконец-таки решился отказаться от верстки под устаревший браузер Internet Explorer 7. Если это будет верстка на заказ, то вносить изменения под него буду только за дополнительную ...
Эмуляция псевдо-селектора :nth-child() в IE7 и IE8
Неоднократно при верстке сайтов мне приходилось сталкиваться с ситуацией, когда строки в таблице или пункты вертикального списка необходимо было оформить зеброй. Т.е. одна строка, к примеру, с белым фоном, вторая ...
Комментарии (56)
Как-то не люблю я все эти картинки в бэкграундах. Лучше уж всё в CSS сделать, разве что иконку на кнопку поиска. Проблема тут и в фиксации размеров. Да таблицы CSS как-то глюкавят в разных браузерах и с резиновостью у меня лично ну никак, приходится всё ещё пользоваться таблицами.
Еще бы написать про алгоритм поиска для сайта с подсказками, а то до сих пор не могу найти нормального решения
jquery UI autocomplete
А если задать
, ничего не изменится? (Сейчас проверять негде.) Я недавно столкнулся с тем, что Вебкит-браузеры по-разному отображают текстовые поля, если задан
, вместо
. При это у ФФ и Оперы такой проблемы нет.
Да, на вебките сразу все портится. Так что не стоит.
Детский сайт какой то, статья видимо запоздала на года 2-3:
1. #search? А если 2 строки поиска на странице?
2. input type=»search» — уже пора под это постраиваться, HTML5 как бы.
3. Фиксированная ширина и высота? Очень не практично.
4. Cтатичная картинка на фоне, причем в 2ух стейтах? а как же CSS3?
5. Float? за что? :)
Кто мешает поменять?
Комментом выше написано про это.
Слишком редко мне встречается необходимость растягивать форму. Все зависит от конкретного случая.
Для простоты и кроссбраузерности. На CSS3 что, свет клином сошелся?
А в чем проблема?
1. А зачем заведомо не правильны пример показывать людям? Имей ответственность, если учишь людей.
3. Опять же, если учить и показывтаь пример, то показывать лучший вариант, а не тривиальную, по простому накиданную реализацию. Согласитесь, резиновый вариант явно лучше?
4. На css3 проще, чем с картинкой, border-radius да box-shadow. Gracefull degradation никто не отменял.
5. Флоты не для таких задачь были придумыны — они отрисовываются сложней, требуют клирфиксов и оверфловов…
Я его не считаю неправильным, иначе бы не стал писать такой код.
Не претендую на лучший вариант. И резиновый не лучше.
Ширина и высота у формы служат клирфиксом, так что ничего тут не требуется, и не надо придираться.
Согласен, не использовать input type=”search”, потому что в хроме и сафари появляется крестик глупо, ведь уже давно написано
input[type=»search»] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
input[type=»search»]::-webkit-search-decoration {
-webkit-appearance: none;
}
используйте более современный сброс стилей
Я предпочту и дальше использовать
input type=”text”, нежели дописывать такой кусок кода.Вы слишком агрессивно отвечаете, совсем не распологаете к диалогу.
Пора развиваться и бросать писать привычный код времен динозавров.
Код времен диназавров???
Где он — в упор не вижу :)
А вот ваш код напоминает стиль времен динозавров — когда надо было все захать до потери пульса.
Ну как не видите? Фон картинкой, фиксировынные размеры, флоуты, отстутствие HTML5, очень даже диназаврово.
Вот же вам картинки поперек горла стали :)
И почему фиксированные размеры, флоуты и отсутсвие не полностью поддерживаемого языка — динозавтровы?
Это где то утверждено? Можно ссылку?
Это просто плохая вёрстка. Про фикс размеры — сетка сайта изменится, резиновое поле подтсроится, а все фиксированные элементы придётся править в ручную.
Про флоуты — клирфикс, это или лишний элемент в доме, или занятый псевдоэлемент, а оверфлоу хидден это вообще треш, когда нужно высунуть какой нить тултип за пределы блока.
А HTML5 это будущее, зачем делать уже заведомо устаревшие сайты, когда можно делать со расчетом на будующие?
Ну так я и не говорю что это не будущее, просто у половины работать будет не так как надо.
Меня это беспокоит.
Вот, наткнулся на пруфлинк, который вы просили — http://css-tricks.com/judging-css-spotting-bad-code/
Предпоследний пункт как раз про фиксированный размеры. Я думаю вам тоже стоит прислушаться к мнению Криса Койера.
СПС
Я бы крести вообще оставил, это ведь удобно.
Рановато еще совать в сайты CSS3 и HTML5.
На отдельных элементах в качестве оформления можно использовать.
Но панацею из этого делать еще рано.
Это не поймет половина браузеров ;-)
Не поймет, но и ничего не сломает. А последние поймут и добавят удобство. Прогресс не стоит на месте, почему бы не вводить постепенно удобства?
Есть еще такое дело, как верстка на заказ. Если для своих сайтов можно пренебречь поддержкой современных фишек в старых браузерах, то с заказчиком это не пройдет (не с любым, конечно).
вместо onblur и onfocus я сейчас всегда делаю так:
Есть еще атрибут placeholder, работает из коробки, в современных браузерах.
По моему и современные браузеры не все его понимают.
Какой то один точно — просто не помню уже.
Плюс обрабатывают его они вроде тоже по разному немного.
Назови Internet Explorer, не ошибешься =)
Это да :)
Пользователи не смотрят 1 сайт в разных браузерах, нету смысла добиватся идентичного поведения во всех браузерах.
Ну что за ерунда…
При чем здесь пользователи не смотрят сайт в разных браузерах???
По ходу на вашем сайте либо один пользователь, либо все ваши пользователи пользуются одним браузером…
Бред.
На нашем сайте за 150 миллионов пользователей :)
:) Ну так тем более!
Это я со своей бандой в пару сотен могу плюнуть на кроссбраузерность — но явно не вы.
Мы за graceful degradation, в рамках разумного. И кроссбраузерность != одинаковое отображение во всех браузерах.
И я за «в рамках разумного» — но по ходу они у нас разные — эти рамки.
Graceful degradation, все верно. Ведь ничего страшного если пользователи со старыми браузерами не увидят подсказку, поиск от этого не станет сложнее или неочевиднее. Зато для всех остальных подсказка прекрасно отобразится.
В результате избавимся от скриптов, и избавим пользователей с отключенными скриптами от нужды стирать плейсхолдер вставленный текстом.
Разные пользователи смотрят в разных браузерах, в том числе и старых. Так что, действительно, полный бред.
Пользователь ие не знает что в соседнем браузере «уголки квадратные», но на доступность контента это не влияет.
Ну это если на сайте используется jQuery для чего-то еще. Только ради поискового поля не стоит его подключать.
Да, кстати, можно вполне обойтись и без хака под лисицу, правда кода будет больше :)
И еще вопрос — а почему нельзя вообще отказаться от кнопки???
Можно пример?
Кнопку я по привычке использую. Иконка лупы ассоциируется с кнопкой.
А я ее при таком дизайне удаляю.
Ну а если использовать кнопку — то почему бы не сделать два спрайта — один обрезать для поля, другая сторона для кнопки???
Код завтра выложу, сегодня бежать надо.
Тут пример инпутов (логин, парот), с ровным выравниванием текста, без хака под фф.
Специально готовил большую спеку по формам, приводя всё к одному стандарту и одинаковому отображению во всех браузерах.
Я там не вижу ничего особенного, чтобы бы отличалось от моих стилей. Вообще, выравнивание в FF зависит и от размера шрифта, и от высоты поля, поэтому в одном случае все может быть в порядке, в другом случае текст может сместиться.
Например потому что многие ленивы и вставляют текст правой кнопкой мыши, а потом левой кликают на кнопку поиска. А не продвинутые пользователи могут и не знать что по энтеру форма отправится и будут кликать по иконке.
Вот именно — многие ленивы и тыцкают клавишу ентер.
Да и статистики я не видел на эту тему.
Почерпнул для себя информацию, как сделать кнопку как бы внутри, над окошком поиска)
А почему не использовать просто background:transparent; так не надо добавлять фон и работает нормально
В IE кнопка станет некликабельной.
По моему через IE вряд ли кто будет читать блоги )) Пустая трата времени на верстку под IE ))
А при чем тут блоги? Поисковые формы ставятся, вообще-то, не только на блоги.
А че к словам цепляешься? Я имел ввиду что все сайты
Мудак ты, Ринат. На IE (хоть и новом) сидят еще около 20-25%.
Почему при сохранении подложки формы поиска к себе на пк и замене url
c https://lh4.googleusercontent.com/-EllJnywnmlY/UAaKJYSYYMI/AAAAAAAABUU/IaRo-yUcRmc/s235/search.png
на img/search.png
перестает подгружаться подложка. В чем ошибка, добрые люди, подскажите?
Скорее всего, неправильно указываете путь.
так че в «актион» писать? хренли не дописать статью полностью для чайников. с джиквери кодом и всей прочей — чтоб работало
А нету ли инструкция для вордпресс чтоб установить этот код?