Главная
›
Новости
Формы поиска для сайтов
Опубликовано: 01.09.2018
Здравствуйте дорогие читатели моего блога. Сегодня у меня было вдохновение написать хороший пост, но я не знал о чем именно писать. Хочется писать посты о том, что вас сильно бы интересовало. Отсылайте мне письма через форму обратной связи , предлагайте темы, которые вы хотели бы видеть на моем блоге. Буду рад с вами держать связь через e-mail. Спасибо.
Сегодня с вами хочу поделиться красивыми формами поиска для сайта или блога. Но знайте, это просто форма поиска, без обработчика. Вы должны понимать, что любая форма без обработчика работать не будет, другими словами сказать, не будет выдавать задаваемый результат. Наверное я вас запутал?! Я не специально, так просто получилось.
Простой поиск для сайта.
Это простая форма поиска, без всяческих наворотов. Само название "простой поиск для сайтов" говорит само за себя.
Вставьте этот код на сайте между тег <body> форма поиска </body>
<form method="get" action="">
<input class="search-text" type="text" name="s" id="s" value="Поиск..." onfocus="if (value == 'Поиск...') {value = ''}" onblur="if (value == '') {value = 'Поиск...'}" />
<input class="search-btn" type="submit" value="ok" />
</form>
Форма поиска с подсветкой.
Сама форма для ввода поиска имеет серый фон, но при нажатии для написания текста в поле поиска, серый фон исчезает.
Вставьте этот код на сайте между тег <body> форма поиска </body>
<form method="get" action="">
<input
onblur="this.value=(this.value=='')?this.title:this.value;this.style.backgroundColor='#ccc';"
onfocus="this.value=(this.value==this.title)?'':this.value;this.style.backgroundColor='#fff';"
value="Поиск"
title="Поиск"
type="text"
style="text-align: center; background-color: #ccc;" />
<input class="search-btn" type="submit" value="ok" />
</form>
Простая, но красивая форма поиска.
В этой форме поиска используется картинка. Вы можете подставить свою любую картинку, которую захотите.
Вставьте этот код на сайте между тег <body> форма поиска </body>
<form method="get" action="">
<input name="nomer2" value="" size="20" type="text" style="
color: rgb(255, 255, 255);
border: 2px solid rgb(100, 117, 134);
padding: 5px 2px 5px 30px;
background: url(1.png) no-repeat scroll 5% 50% rgb(68, 85, 102);
">
</form>
background: url( 1.png ) no-repeat scroll 5% 50% rgb(68, 85, 102);
- я выделил красным картинку, которую вы можете смело поменять.
Резиновая форма поиска.
Почему именно резиновая форма? Да потому, что при нажатии на форму, поле ввода растягивается по ширине на столько, сколько вы прописали в коде.
.......до нажатия
......и после нажатия формы поля
<html>
<head>
<style>
.form-search {
display: inline-block;
background: -moz-linear-gradient(#D3D3D3, #CACACA 50%, #A9A9A9 50%, #9B9B9B);
background: -ms-linear-gradient(#D3D3D3, #CACACA 50%, #A9A9A9 50%, #9B9B9B);
background: -o-linear-gradient(#D3D3D3, #CACACA 50%, #A9A9A9 50%, #9B9B9B);
background: -webkit-linear-gradient(#D3D3D3, #CACACA 50%, #A9A9A9 50%, #9B9B9B);
border-radius: 5px;
padding: 4px;
}
.form-search input {
width: 75px;
height: 32px;
line-height: 32px;
font: 13px Helvetica, Arial, sans-serif;
color:#6E7074;
text-shadow: 0 1px 0 #FFF;
-moz-transition: all .2s ease-out;
-webkit-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
padding: 0 30px 0 6px;
background-image: url("search.png"), -moz-linear-gradient(#BCBCBC, #EBEBEB);
background-image: url("search.png"), -ms-linear-gradient(#BCBCBC, #EBEBEB);
background-image: url("search.png"), -o-linear-gradient(#BCBCBC, #EBEBEB);
background-image: url("search.png"), -webkit-linear-gradient(#BCBCBC, #EBEBEB);
background-repeat: no-repeat;
background-position: 100% 50%, 100% 100%;
border: 1px solid #747474;
border-radius: 3px;
box-shadow: inset 0 1px 1px #575555, 0 1px 0 #FFF;
}
.form-search input:focus {
width: 160px;
box-shadow: inset 0 1px 1px #46575b, 0 1px 0 #FFF;
color: #25464D;
background-image: url("search.png"), -moz-linear-gradient(#9CC2CA, #DFECEF);
background-image: url("search.png"), -ms-linear-gradient(#9CC2CA, #DFECEF);
background-image: url("search.png"), -o-linear-gradient(#9CC2CA, #DFECEF);
background-image: url("search.png"), -webkit-linear-gradient(#9CC2CA, #DFECEF);
}
</style>
</head>
<body>
<form class="form-search" method="get" action="/search" target="_blank">
<input type="text" name="q" placeholder="поиск" value=""/>
</form>
</body>
</html>
search.png - это картинка, вы можете поменять на свою.
.form-search input - параметры в CSS до нажатия,
width: 75px; - ширина поля,
height: 32px; - высота поля,
.form-search input:focus - параметры в CSS после нажатия,
width: 160px; - ширина поля после нажатия.
Красивая форма поиска.
В этой форме не используется картинка. Все сделано на чистейшем CSS.
<html>
<head>
<style>
.searchform {
display: inline-block;
zoom: 1;
*display: inline;
border: solid 1px #d2d2d2;
padding: 3px 5px;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
box-shadow: 0 1px 0px rgba(0,0,0,.1);
background: #f1f1f1;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
background: -moz-linear-gradient(top, #fff, #ededed);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */
}
.searchform input {
font: normal 12px/100% Arial, Helvetica, sans-serif;
}
.searchform .searchfield {
background: #fff;
padding: 6px 6px 6px 8px;
width: 202px;
border: solid 1px #bcbbbb;
outline: none;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}
.searchform .searchbutton {
color: #fff;
border: solid 1px #494949;
font-size: 11px;
height: 27px;
width: 27px;
text-shadow: 0 1px 1px rgba(0,0,0,.6);
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
background: #5f5f5f;
background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545));
background: -moz-linear-gradient(top, #9e9e9e, #454545);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */
}
</style>
</head>
<body>
<form class="searchform">
<input class="searchfield" type="text" value="Поиск..." onfocus="if (this.value == 'Поиск...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Поиск...';}" />
<input class="searchbutton" type="button" value="Да" />
</form>
</body>
</html>
Вот и все формы поиска, что я хотел выложить на блоге. Если что-то будет интересное, я обязательно выложу... я не жлоб, хотя...... не, точно не жлоб. Удачи!!!
Есть вопросы, предложения, идеи?!! Пишите в комментариях.
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Похожие статьи
Популярные статьи:
Добавить комментарий
Метки: html , для сайта , поиск
