Пример верстки поисковой формы для сайта на HTML5 и CSS3
После публикации вчерашней статьи по верстке поисковой формы меня раскритиковали, мол верстка отстой, есть же современные HTML5 и CSS3.
Я, конечно, понимаю, последние стандарты это круто и все такое. Но дело в том, что верстаю я, как правило, под заказ, а там в большинстве случаев важна полная идентичность в разных браузерах, что не позволяет использовать последние технологии. Поэтому я ориентируюсь в первую очередь на кроссбраузерность и поисковую форму по привычке сверстал «по-старому».
В общем, этим постом исправляю ситуацию (в угоду недовольным прошлой статьей =) и предлагаю свой вариант верстки той же самой поисковой формы, но уже с использованием технологий HTML5 и CSS3.
Пример того, что получится в результате, можно увидеть здесь.
Что мы теряем при верстке данной формы с помощью HTML5 и CSS3
- IE9 и ниже — не увидим текст по умолчанию (атрибут
placeholder). - IE8 и ниже — не увидим закругленных углов и внутренних теней.
- IE7 — для него приходится указать другую ширину формы, т.к. он не поддерживает свойство
box-sizing. - IE6 — а его вообще в расчет не берем =)
В остальных современных браузерах все замечательно. Я считаю, что вышеуказанные недостатки не критичны, поэтому для своего сайта я бы смело использовал форму, сверстанную по последним технологиям.
HTML-код формы поиска
Выглядит он вот так:
<form action="" method="post" class="search">
<input type="search" name="" placeholder="поиск" class="input" />
<input type="submit" name="" value="" class="submit" />
</form>
По сравнению с формой из предыдущей статьи здесь внесены следующее изменения в соответствии с технологией HTML5:
- Атрибут
type="text"замененtype="search". - Инлайновый скрипт заменен на
placeholder="поиск".
CSS-код
Вот все необходимые стили с комментариями:
.search {
/* устанавливаем необходимую ширину формы в зависимости от дизайна
** форма без проблем растягивается */
width: 35%;
/* кнопку отправки будем позиционировать абсолютно,
** поэтому необходимо это свойство */
position: relative;
}
.search input {
/* отключаем бордюры у инпутов */
border: none;
}
/* стили для поля ввода */
.search .input {
/* растягиваем поле ввода на всю ширину формы */
width: 100%;
/* за счет верхнего (8px) и нижнего (9px) внутренних отступов
** регулируем высоту формы
** внутренний отступ справа (37px) делаем больше левого,
** т.к. там будет размещена кнопка отправки */
padding: 8px 37px 9px 15px;
/* чтобы ширина поля ввода (100%) включала в себя внутренние отступы */
-moz-box-sizing: border-box;
box-sizing: border-box;
/* добавляем внутренние тени */
box-shadow: inset 0 0 5px rgba(0,0,0,0.1), inset 0 1px 2px rgba(0,0,0,0.3);
/* закругляем углы */
border-radius: 20px;
background: #EEE;
font: 13px Tahoma, Arial, sans-serif;
color: #555;
outline: none;
}
/* меняем оформление поля ввода при фокусе */
.search .input:focus {
box-shadow: inset 0 0 5px rgba(0,0,0,0.2), inset 0 1px 2px rgba(0,0,0,0.4);
background: #E8E8E8;
color: #333;
}
/* оформляем кнопку отправки */
.search .submit {
/* позиционируем кнопку абсолютно от правого края формы */
position: absolute;
top: 0;
right: 0;
width: 37px;
/* растягиваем кнопку на всю высоту формы */
height: 100%;
cursor: pointer;
background: url(https://dimox.name/wp-content/uploads/2023/10/go.png) 50% no-repeat;
/* добавляем прозрачность кнопке отправки */
opacity: 0.5;
}
/* при наведении курсора меняем прозрачность кнопки отправки */
.search .submit:hover {
opacity: 0.8;
}
/* данное свойство необходимо для того, чтобы в браузерах
** Chrome и Safari можно было стилизовать инпуты */
input[type="search"] {
-webkit-appearance: none;
}
И стили для IE ниже 9-й версии:
/* задаем отдельные стили для браузеров IE ниже 9-й версии */
*+html .search {
/* для IE7 подгоняем ширину под другие браузеры и добавляем правый
** внутренний отступ, чтобы кнопка отправки встала на свое место */
width: 28%;
padding: 0 52px 0 0;
}
.search .input {
border: 1px solid #DFDFDF;
border-top: 1px solid #B3B3B3;
padding-top: 7px;
padding-bottom: 8px;
}
.search .input:focus {
border: 1px solid #CFCFCF;
border-top: 1px solid #999;
}
.search .submit {
filter: alpha(opacity=50);
}
.search .submit:hover {
filter: alpha(opacity=80);
}
P.S. Спасибо критикам за комментарии к предыдущей статье! Благодаря вам, у меня в голове отложились некоторые новые для меня моменты по верстке.
Смотрите также
Пример верстки поисковой формы для сайта
Предлагаю один из возможных вариантов верстки поисковой формы для сайта, которая будет выглядеть вот так: Ее особенность заключается в том, что вся видимая часть формы — это поле ввода текста ...
Верстка красивых тегов для сайта + бонус
Замечательный дизайнер Orman Clark однажды представил своим читателям очень красивый дизайн облака тегов, который я использовал на одном моем сайте. Расскажу, как сверстать такие теги для вашего сайта. Для начала ...
Зеленый свет CSS-свойствам при верстке под IE8 и выше
Пришло время, и я наконец-таки решился отказаться от верстки под устаревший браузер Internet Explorer 7. Если это будет верстка на заказ, то вносить изменения под него буду только за дополнительную ...
Эмуляция псевдо-селектора :nth-child() в IE7 и IE8
Неоднократно при верстке сайтов мне приходилось сталкиваться с ситуацией, когда строки в таблице или пункты вертикального списка необходимо было оформить зеброй. Т.е. одна строка, к примеру, с белым фоном, вторая ...
Комментарии (62)
ещё значёк лупы с помощью canvas зафигачить) только хардкор!
Это пять!
И еще один :)
Это реальная жесть! Хоть многое можно было бы сократить, сделать иначе и т.д. Но я полностью доволен вашей самоотверженностью, поэтому плюсанул.
Это в каком смысле? =)
Пример можете показать?
Ну, это я так, для контраста. А вообще многое проблем содают именно старые IE. Из оптимизации могу сказать, что opacity можно же в RGBA вставлять. А так много нового почерпнул.
Да, это традиция =)
RGBA — если указывается цвет. А тут же картинка используется.
Прикольно. А я забил на IE7, зато placeholder эмулировал для IE8-9. А иконку лупы сделал шрифтом, чтоб ее можно было легко настраивать размер, цвет, через css.
Ссылку надо было добавить свою, чтобы другие тоже посмотрели — http://alexriz.kodingen.com/css3search/
Я считаю — нерационально использовать jQuery только ради этого.
ну вообще да, не могу не согласиться с этим фактом. но как правило так и так jquery применяется в проектах, по-этому, раз оно применяется, то почему бы и не вставить эту приблуду, кушать то особо не просит.
В такой ситуации — согласен.
Дим, я не читал прошлую статью.
Верстка под заказ = всегда поиск компромиссов. Где то костыли прикрутить, а гдето в тз написано IE9+ ))
По теме же попробуй использовать вот такую вещь:
и «костыли» для IE можно писать прямо в основном файле стилей. очень удобно.
например для ie7 будет свой цвет фона
приведённый выше код — часть из html5bp, давно уже использую как основу совместно с твоим генератором.
Я знаю этот способ, но не люблю его.
почему, если не секрет?
Да просто не нравится такая конструкция. Некрасиво.
filter нужно вынести в CSS для IE.
Действительно, спасибо за подсказку!
Мне кажется это абсолютно не обязательно, и не есть неоспоримым правилом.
Мне например не нравится подключать по несколько файлов стилей, а тем более впихивать в html такой мусор как CC. ИМХО
А как же тогда «бороться» с IE?
А, что с ним бороться то? есть вагон простых приемов для применения тех или иных стилей для конкретной версии IE. Делов то.
Просветите пожалуйста. Я действительно не знаю лучшего чем СС способа применить определённые стили для разных IE.
ну например спасибо, dimox’у, за это
как правило использую * (звездочка) для отрезания IE7- (минус) от всего остального, т.к. IE6 не поддерживаю в принципе (собственно я и IE7 по стоку по скольку поддерживаю так по привычке хаки кидаю)
А для IE8 персонально в конце css храниться конструкция (да да она не очень красивая, но мне нравится больше чем мусор в html)
хак для IE9 не использую т.к. нет необходимости, он и так нормально страницы рисует, ну и пример dimox’а срабатывает так же и в IE10.
Но если проявить смекалку, то можно отрезать в некоторых частных случаях и IE9 от IE10
Для IE6 персонально есть хак с чертой -. Но я им не пользуюсь по выше указанным причинам
такие способы хороши для «сделал и забыл» или когда проектом занимаются максимум 2 верстальщика, когда же проект делает минимум 3-4 человека, да ещё и занимаются поддержкой в течении определённого времени, при этом тот же программер, которому поставили простенькую задачу по прикрутке какого-то функционала оформив его в стиль сайта, даже не вспомнит чем отличается *background: от -background: и уж 100% не станет выискивать какой-то стиль не там где он должен быть.
А вот конструкция .lt-ie8 не требует запоминания всяких префиксов и хаков, её просто донести до непрофессионала в области css (коими по сути являются бОльшая часть программистов), что гораздо ускоряет процесс получения заказчиком решения его проблемы или выполнения поставленной задачи.
В первую очередь каждый должен заниматься своим делом. Верстальщик верстать и заниматься программированием клиентской части, а программист серверный должен заниматься программированием серверной части (простите за тавтологию). Если принимаешь участие в разработке еще и клиентской части, то будь любезен разбираться в ней на должном уровне, иначе отдавай задачу специалисту в этой области.
А вот из-за таких смешанных обязанностей, когда каждому приходится влезать туда куда ему не следует, и получаются фэйлы в проектах.
Вы работали в компании, занимающейся в т.ч. сложными проектами?
Зачастую бывают случаи, когда мелкую проблему нужно решить быстро, а все верстальщики заняты…
нет я работаю сам на себя, по-этому мой опыт со сложными проектами в данном контексте неуместен.
А в крупных компаниях как правило есть соглашения по способу разработки, и все просто его придерживаются, по-этому там может программист взять и сделать задачу верстальщика, при необходимости, потому что программист осведомлен до нужного уровня.
Это не правило, а общепризнанная рекомендация, чтобы избегать странных глюков в нормальных браузерах и делать все в соответствии со спецификациями.
Это html должен быть валидным и соответствовать спеке. А с css так сложилась история, что если его довести до валидного состояния, то страница ровным счетом не будет адекватно выглядеть не в одном браузере, ну разве, что если это ну совсем примитивная страничка.
Из-за трюков в css абсолютно никаких глюков в браузерах не происходит, и ошибок не вызывает.
Да нужно стремиться придерживаться спеке, но с css так не получается в принципе, что поделать.
Установил у себя на сайте. Но при поиске ничего не выдает и страница куда должны выводится результаты не открывается. Другими словами при поиске страница по просту обновляется. Сайт на ucoz
Так естественно, это же только HTML-форма. Чтобы она работала, ее нужно интегрировать в CMS. Читайте документацию по шаблонам ucoz.
Спасибо. Я счастлив :)
ОТДЕЛЬНОЕ СПАСИБО Dimoxу
Вставьте там где хотели бы видеть. Это поиск ищет совсем не как от ucoz. Стили сами поменяете
прочитал обе статьи. однако. по поводу последнего кода — классы input и submit там точно лишние. По поводу поддержки ИЕ и прочих — давно обсуждаю с заказчиками и использую PIE + jquery для костылей IE, хотя еще недавно страсть как любил фильтры с экспрешнами. просто уже не до них, совсем.
В современных браузерах можно и обойтись. А как же старые версии IE?
PIE я тоже практикую, только если в дизайне не слишком много элементов, для которых он применяется.
ie6 ? если очень надо, на JQ вставьте класс специального для него.
IE6 не важен, хотя бы IE7. Я вижу только такой вариант:
1) вместо
.search .inputиспользовать.search input:first-child2) вместо
.search .submitиспользовать.search input + inputНо мне такое решение не нравится.
?
ie7+ отлично понимает input[type=»text»] и прочее
велосипедов не надо
IE7 понимает
input[type="text"], но не понимаетinput[type="search"], который используется в примере.верно, мой косяк. Тогда можно что стилем, что first-child`om, что навеской класса на JQ специально для IE 7. в 2012 я выбираю последнее…
что-то я вчера перемудрил :)
В данном случае все отлично! Для норм. браузеров пишем input[type=»search»], в css для IE — input[type=»text»] с теми же стилями. И все ок! а кнопку с input[type=»submit»] все понимают как надо.
А вот если полей бы было много — тогда те методы, что уже обсуждали…
Ничего себе! Интересная особенность. Проверил — действительно работает.
Только непонятно, каким образом в IE срабатывает
input[type="text"]? Ведь в коде этого параметра нет.IE magic ^_^
Возможно IE сам назначает type=»text», если не указано ничего, либо тупо воспринимает type=»search» как type=»text».
В общем очередной баг, идущий ему на пользу))))
Да, это хорошо =)
Чтот тег code у вас блочным выводится хотя в предварительном просмотре inline
Если в
ИЕуinputне указанtype— он автоматом становитсяtext, если он не понимает тип — сбрасывает его опять же наtextСпасибо за информацию.
Как-то я это не замечал (в предпросмотре). Исправил. Плагин подсветки кода этот тег делает блочным, поэтому для внутристрочного кода использую тег
<tt>.Очень симпатичная кнопка, спасибо за скрипты! Правда, не сразу всё получилось, как хотелось. Опишу подробно, может быть информация кому-нибудь пригодится.
После установки кнопки поиска на мой сайт ( движок WordPress) вместо поиска выполнялось обновление текущей страницы. Исправила name=»» на name=»s» (как в моём старом скрипте) — поиск начал выполняться, но нормально только с главной страницы. В статье и на статической странице
поиск выполнялся только на текущей странице, после чего выдавалась 404 ошибка. После исправления action=»» на action=»/» этот нюанс был положительно реализован. Можно вместо «/» задать ссылку на главную страницу сайта.
Размер кнопки был очень короткий. Исправила проценты 35% и 28% на 100% — кнопка приняла нормальный вид и размер.
Ув. Dimox, не могли бы вы описать действия по интеграции формы поиска в WordPress?
Большое Спасибо! Выручили :)
Dimox, совсем забыл добавить, что хотелось бы данный код, именно в файл «function.php» поместить. Но совсем не понимаю как правильно прописать php код, дабы работало. Прошу помощи!
А смысл? Добавьте форму в нужное место шаблона и все.
В том, что бы не грузить сайт лишними файлами. Помещать все что помещается в function.php. Плагины, хуки и прочее.
Это глупость.
как отслеживать клик на кнопку поиска?
Интересно, ничего нельзя в ие8 придумать, чтобы за кнопку запрос не уезжал, это всетаки доступность элемента, а не рюшечки http://clip2net.com/clip/m150515/1356539127-clip-6kb.png
Да это вообще во всех версиях IE, не только в 8-й. Еще один косяк ослика. Не представляю, как это можно победить.
Да, ниже девятки. Ничего не придумалось кроме как обернуть и кнопку и поле дивчиком.