Html создаем поисковые формы для сайта

Простая форма поиска.

  

<input name="имя" value="введите текст" size="ширина" type="text">

Усложним,добавим изображение лупу в форму поиска,поменяем цвета.

 "лупа" загружена в Picasa и имеет ссылку

<input name="nomer2" value="" size="20" type="text" style="
color: rgb(255, 255, 255); 
border: 2px solid rgb(192, 192, 192); 
padding: 5px 2px 5px 30px; 
background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhft3GTKYojn40WBoWAi9ia765DE_JqKFP1fexQUDhVWQVc_pvzHaRxCThsaQPKeopoM27TCf7ATd5R-jahnyXWR7t4iwBj1jTe-PwH4V6E8vRTXs4l6psz8lsqgh0sWSi2Q-6MOk_wsnA/s23/%25D0%25BB%25D1%2583%25D0%25BF%25D0%25B0-%25D0%25BF%25D0%25BE%25D0%25B8%25D1%2581%25D0%25BA.png&quot;) no-repeat scroll 5% 50% rgb(128, 128, 128);

192, 192, 192 - цвет  формы  поисковика (обвод )

128, 128, 128 - цвет формы поисковика (фон)

https:// ... ссылка на изображение "лупа" 

Форма поиска с исчезновением изначального текста .

<input
 onblur="this.value=(this.value=='')?this.title:this.value;"
 onfocus="this.value=(this.value==this.title)?'':this.value;"
 value="Поиск"
 title="Поиск"
 type="text"
/> 

подобная форма поисковика с применением HTML5

<input placeholder="поиск">

задаем стиль :

<style>
#form-query:-moz-placeholder { background: #DDD; color: CornflowerBlue;}
#form-query::-webkit-input-placeholder { background: #DDD; color: CornflowerBlue;}
#form-query:-ms-input-placeholder { background: #DDD; color: CornflowerBlue;}
</style>

<input id="form-query" placeholder="поиск">

Для того что бы  поиск работал  заключаем его в тег input

<form method="get" action="/search" target="_blank"><input name="q" id="form-query" value="" placeholder="поиск"></form> 

По желанию добавляем к поисковой форме кнопку искать

<form method="get" action="/search" target="_blank">
<input name="q" id="form-query" value="" placeholder="поиск"> <input type=submit value="искать"></form>

По желанию добавляем к поисковой форме изображение лупы.

<form method="get" action="/search" target="_blank">
<input name="q" id="form-query" value="" placeholder="поиск"> 
<input src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhft3GTKYojn40WBoWAi9ia765DE_JqKFP1fexQUDhVWQVc_pvzHaRxCThsaQPKeopoM27TCf7ATd5R-jahnyXWR7t4iwBj1jTe-PwH4V6E8vRTXs4l6psz8lsqgh0sWSi2Q-6MOk_wsnA/s23/%25D0%25BB%25D1%2583%25D0%25BF%25D0%25B0-%25D0%25BF%25D0%25BE%25D0%25B8%25D1%2581%25D0%25BA.png" type="image" style="vertical-align: bottom; padding: 0;"/></form>

Красивая форма поиска по сайту

<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: 60px;
  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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivdewuD-wIIMgEI3F6NtL0u6Fj5ByVtSz59Fa2gSFvBytKKqOxV0fLm7h5YcMap8jP-i2K3ns7T034yOv7qqQ_JkwgPB6kYfqpSEaNH0py_SddtR0dnMijvrp9uLernfdniT5y_DcJHNc/s32/search.png"), -moz-linear-gradient(#BCBCBC, #EBEBEB);
  background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivdewuD-wIIMgEI3F6NtL0u6Fj5ByVtSz59Fa2gSFvBytKKqOxV0fLm7h5YcMap8jP-i2K3ns7T034yOv7qqQ_JkwgPB6kYfqpSEaNH0py_SddtR0dnMijvrp9uLernfdniT5y_DcJHNc/s32/search.png"), -ms-linear-gradient(#BCBCBC, #EBEBEB);
  background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivdewuD-wIIMgEI3F6NtL0u6Fj5ByVtSz59Fa2gSFvBytKKqOxV0fLm7h5YcMap8jP-i2K3ns7T034yOv7qqQ_JkwgPB6kYfqpSEaNH0py_SddtR0dnMijvrp9uLernfdniT5y_DcJHNc/s32/search.png"), -o-linear-gradient(#BCBCBC, #EBEBEB);
  background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivdewuD-wIIMgEI3F6NtL0u6Fj5ByVtSz59Fa2gSFvBytKKqOxV0fLm7h5YcMap8jP-i2K3ns7T034yOv7qqQ_JkwgPB6kYfqpSEaNH0py_SddtR0dnMijvrp9uLernfdniT5y_DcJHNc/s32/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivdewuD-wIIMgEI3F6NtL0u6Fj5ByVtSz59Fa2gSFvBytKKqOxV0fLm7h5YcMap8jP-i2K3ns7T034yOv7qqQ_JkwgPB6kYfqpSEaNH0py_SddtR0dnMijvrp9uLernfdniT5y_DcJHNc/s32/search.png"), -moz-linear-gradient(#9CC2CA, #DFECEF);
  background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivdewuD-wIIMgEI3F6NtL0u6Fj5ByVtSz59Fa2gSFvBytKKqOxV0fLm7h5YcMap8jP-i2K3ns7T034yOv7qqQ_JkwgPB6kYfqpSEaNH0py_SddtR0dnMijvrp9uLernfdniT5y_DcJHNc/s32/search.png"), -ms-linear-gradient(#9CC2CA, #DFECEF);
  background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivdewuD-wIIMgEI3F6NtL0u6Fj5ByVtSz59Fa2gSFvBytKKqOxV0fLm7h5YcMap8jP-i2K3ns7T034yOv7qqQ_JkwgPB6kYfqpSEaNH0py_SddtR0dnMijvrp9uLernfdniT5y_DcJHNc/s32/search.png"), -o-linear-gradient(#9CC2CA, #DFECEF);
  background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivdewuD-wIIMgEI3F6NtL0u6Fj5ByVtSz59Fa2gSFvBytKKqOxV0fLm7h5YcMap8jP-i2K3ns7T034yOv7qqQ_JkwgPB6kYfqpSEaNH0py_SddtR0dnMijvrp9uLernfdniT5y_DcJHNc/s32/search.png"), -webkit-linear-gradient(#9CC2CA, #DFECEF);
}
</style>

<form class="form-search" method="get" action="/search" target="_blank">
<input type="text" name="q" placeholder="поиск" value=""/></form>

На этом все . Удачных Вам поисков =) .