Главная CSS-верстка

Пример верстки поисковой формы для сайта на HTML5 и CSS3

После публикации вчерашней статьи по верстке поисковой формы меня раскритиковали, мол верстка отстой, есть же современные HTML5 и CSS3.

Поисковая форма

Я, конечно, понимаю, последние стандарты это круто и все такое. Но дело в том, что верстаю я, как правило, под заказ, а там в большинстве случаев важна полная идентичность в разных браузерах, что не позволяет использовать последние технологии. Поэтому я ориентируюсь в первую очередь на кроссбраузерность и поисковую форму по привычке сверстал “по-старому”.

В общем, этим постом исправляю ситуацию (в угоду недовольным прошлой статьей =) и предлагаю свой вариант верстки той же самой поисковой формы, но уже с использованием технологий HTML5 и CSS3.

Пример того, что получится в результате, можно увидеть здесь.

Что мы теряем при верстке данной формы с помощью HTML5 и CSS3

  1. IE9 и ниже – не увидим текст по умолчанию (атрибут placeholder).
  2. IE8 и ниже – не увидим закругленных углов и внутренних теней.
  3. IE7 – для него приходится указать другую ширину формы, т.к. он не поддерживает свойство box-sizing.
  4. IE6 – а его вообще в расчет не берем =)

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

HTML-код формы поиска

Выглядит он вот так:

<form action="" method="post" class="search">
	<input type="search" name="" placeholder="поиск" class="input" />
	<input type="submit" name="" value="" class="submit" />
</form>

По сравнению с формой из предыдущей статьи здесь внесены следующее изменения в соответствии с технологией HTML5:

  1. Атрибут type="text" заменен type="search".
  2. Инлайновый скрипт заменен на 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. Спасибо критикам за комментарии к предыдущей статье! Благодаря вам, у меня в голове отложились некоторые новые для меня моменты по верстке.

Комментарии (62)

  1. ещё значёк лупы с помощью canvas зафигачить) только хардкор!

  2. Это реальная жесть! Хоть многое можно было бы сократить, сделать иначе и т.д. Но я полностью доволен вашей самоотверженностью, поэтому плюсанул.

  3. Прикольно. А я забил на IE7, зато placeholder эмулировал для IE8-9. А иконку лупы сделал шрифтом, чтоб ее можно было легко настраивать размер, цвет, через css.

  4. Дим, я не читал прошлую статью.
    Верстка под заказ = всегда поиск компромиссов. Где то костыли прикрутить, а гдето в тз написано IE9+ ))
    По теме же попробуй использовать вот такую вещь:

    <!DOCTYPE html>
    
    <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="ru"> <![endif]-->
    <!--[if IE 7]><html class="no-js lt-ie9 lt-ie8" lang="ru"> <![endif]-->
    <!--[if IE 8]><html class="no-js lt-ie9" lang="ru"> <![endif]-->
    <!--[if gt IE 8]><!--><html class="no-js" lang="ru"> <!--<![endif]-->

    и “костыли” для IE можно писать прямо в основном файле стилей. очень удобно.
    например для ie7 будет свой цвет фона

    body {background: #fff;}
    .lt-ie8 body {background: #f00;}
    

    приведённый выше код – часть из html5bp, давно уже использую как основу совместно с твоим генератором.

  5. filter нужно вынести в CSS для IE.

    • Действительно, спасибо за подсказку!

    • Мне кажется это абсолютно не обязательно, и не есть неоспоримым правилом.
      Мне например не нравится подключать по несколько файлов стилей, а тем более впихивать в html такой мусор как CC. ИМХО

      • А как же тогда “бороться” с IE?

        • А, что с ним бороться то? есть вагон простых приемов для применения тех или иных стилей для конкретной версии IE. Делов то.

          • Просветите пожалуйста. Я действительно не знаю лучшего чем СС способа применить определённые стили для разных IE.

            • ну например спасибо, dimox’у, за это
              как правило использую * (звездочка) для отрезания IE7- (минус) от всего остального, т.к. IE6 не поддерживаю в принципе (собственно я и IE7 по стоку по скольку поддерживаю так по привычке хаки кидаю)

              .style {
                  *background: #F00; /* IE6-7 */
              }
              

              А для IE8 персонально в конце css храниться конструкция (да да она не очень красивая, но мне нравится больше чем мусор в html)

              @media 
              @media \0screen { /* IE8 only */
                  .style {
                      background: #F00;
                  }
              }
              
              screen { /* IE8 only */ .style { background: #F00; } }

              хак для IE9 не использую т.к. нет необходимости, он и так нормально страницы рисует, ну и пример dimox’а срабатывает так же и в IE10.
              Но если проявить смекалку, то можно отрезать в некоторых частных случаях и IE9 от IE10

              Для IE6 персонально есть хак с чертой -. Но я им не пользуюсь по выше указанным причинам

              .style {
                  -background: #F00; /* IE6 only */
              }
              
              • такие способы хороши для “сделал и забыл” или когда проектом занимаются максимум 2 верстальщика, когда же проект делает минимум 3-4 человека, да ещё и занимаются поддержкой в течении определённого времени, при этом тот же программер, которому поставили простенькую задачу по прикрутке какого-то функционала оформив его в стиль сайта, даже не вспомнит чем отличается *background: от -background: и уж 100% не станет выискивать какой-то стиль не там где он должен быть.
                А вот конструкция .lt-ie8 не требует запоминания всяких префиксов и хаков, её просто донести до непрофессионала в области css (коими по сути являются бОльшая часть программистов), что гораздо ускоряет процесс получения заказчиком решения его проблемы или выполнения поставленной задачи.

                • В первую очередь каждый должен заниматься своим делом. Верстальщик верстать и заниматься программированием клиентской части, а программист серверный должен заниматься программированием серверной части (простите за тавтологию). Если принимаешь участие в разработке еще и клиентской части, то будь любезен разбираться в ней на должном уровне, иначе отдавай задачу специалисту в этой области.

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

                  • Вы работали в компании, занимающейся в т.ч. сложными проектами?
                    Зачастую бывают случаи, когда мелкую проблему нужно решить быстро, а все верстальщики заняты…

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

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

        • Это html должен быть валидным и соответствовать спеке. А с css так сложилась история, что если его довести до валидного состояния, то страница ровным счетом не будет адекватно выглядеть не в одном браузере, ну разве, что если это ну совсем примитивная страничка.

          Из-за трюков в css абсолютно никаких глюков в браузерах не происходит, и ошибок не вызывает.

        • Да нужно стремиться придерживаться спеке, но с css так не получается в принципе, что поделать.

  6. Установил у себя на сайте. Но при поиске ничего не выдает и страница куда должны выводится результаты не открывается. Другими словами при поиске страница по просту обновляется. Сайт на ucoz

  7. прочитал обе статьи. однако. по поводу последнего кода – классы input и submit там точно лишние. По поводу поддержки ИЕ и прочих – давно обсуждаю с заказчиками и использую PIE + jquery для костылей IE, хотя еще недавно страсть как любил фильтры с экспрешнами. просто уже не до них, совсем.

  8. Очень симпатичная кнопка, спасибо за скрипты! Правда, не сразу всё получилось, как хотелось. Опишу подробно, может быть информация кому-нибудь пригодится.
    После установки кнопки поиска на мой сайт ( движок WordPress) вместо поиска выполнялось обновление текущей страницы. Исправила name=”” на name=”s” (как в моём старом скрипте) – поиск начал выполняться, но нормально только с главной страницы. В статье и на статической странице
    поиск выполнялся только на текущей странице, после чего выдавалась 404 ошибка. После исправления action=”” на action=”/” этот нюанс был положительно реализован. Можно вместо “/” задать ссылку на главную страницу сайта.
    Размер кнопки был очень короткий. Исправила проценты 35% и 28% на 100% – кнопка приняла нормальный вид и размер.

  9. Ув. Dimox, не могли бы вы описать действия по интеграции формы поиска в WordPress?

  10. как отслеживать клик на кнопку поиска?

  11. Интересно, ничего нельзя в ие8 придумать, чтобы за кнопку запрос не уезжал, это всетаки доступность элемента, а не рюшечки http://clip2net.com/clip/m150515/1356539127-clip-6kb.png

Ваш комментарий