Widgets

3 formulários de pesquisas customizáveis e adaptáveis a qualquer layout

3 comentários
formulrio-de-pesquisas-custumizvel_t



Recentemente, mais precisamente no inicio do deste ano, em fevereiro, disponibilizei aqui uma caixa de pesquisa que fez muito sucesso, por ser única e que agregava valor ao seu blog ou site, pois todas as pesquisas feitas, eram transformadas em um pesquisa a sua url via google, o que lhe dava alguns bônus de autoridade para sua url.. mas, na ocasião um de meus leitores, fez a seguinte pergunta:

Como eu faço pra colocar um texto dentro da caixa de busca?

Infelizmente não posso dar os créditos a pergunta, pois o mesmo estava logado como anônimo. Então como a dúvida dele pode ser a de muitos resolvi disponibilizar algumas formas de se editar este e qualquer outro formulário de pesquisas que você tenha em seu blog ou site. então  vamos ao que nos interessa:

Nota: o formulário de pesquisa ocupa o mínimo de espaço em blogs e sites, e essa é uma razão pela qual sempre é ignorado . Especialmente, quando se é novo em HTML, CSS ou design do site em geral, deixam este item sempre relegado a segundo plano no contexto geral do designer, mas em se falando de usabilidade ele tem uma importância fundamental. Então, para facilitar esta tarefa, irei disponibilizar três formulários de pesquisas que você possa ter visto por ai na rede. estarão  pronto para personalização, você apenas tem que copiar e colar o código HTML e os estilos para seu modelo e alterar os valores de acordo com seu gosto e  estará pronto.

Colocar texto dentro de formulários de pesquisa

Três linhas de argumentos foram adicionados para uma mensagem para aparecer dentro de cada formulário de pesquisa em uso (ONFOCUS).


value = "Digite e tecle enter para pesquisar" onfocus = "if (this.value == this.defaultValue) this.value ='';" onblur = "if (this.value =='') this.value = this.defaultValue;"

É obrigatório declarar  o valor do CCS background-color,  porque o navegador   Opera  tem configurações de fundo transparentes para formulário de pesquisas por padrão do navegador...

FOMULARIO DE PESQUISAS PADRÂO:


<div class="custom-search-form1"><form method="get" action="/search"><div><input name="q" size="26" type="text" value="Type and hit Search" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" class="custom-search-box1" /><input type="submit" id="btw" class="btn-1" value="Search" class="btn" /></div><br class="clear" /></form></div>


Estilo bloco Inserir no seu CSS.


. Custom-search-form1 { background: # fff url (insert_image_url.jpg) no-repeat; color: # 515151; border: 1px solid # d7d7d7; padding: 10px 0 0 8px; width: 282px; } . Custom-search-box1 { background: # fff; border: 1px solid # ddad08; padding: 7px 0 0 8px; margin: 0 0 0 0; color: # 515151; font-weight: normal; font-size: 13px; height: 16px; width: 210px; } . Btn-1 { padding: 2px; margin-right: 8px; width: 52px; height: 25px; }

Formulário 2 - Formulário de pesquisas com botão
Este Formulário de Pesquisas tem sua largura definida de 291px e podem ser diferentes se instalado em largura diferente. Ajuste os valores de largura. Sua formatação assim,para que os quatro cantos sejam clicáveis.

<div class="custom-search-form2"><form method="get" action="/search"><div><input type="submit" id="btw" class="btn-2" value="" /><input name="q" size="26" type="text" value="Type and hit enter or search button" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" class="custom-search-box2" /></div><br class="clear" /></form></div>

Estilo bloco Inserir no seu CSS.

. Custom-search-form2 { background: # fff url (insert_image_url.jpg) no-repeat; color: # 515151; border: 1px solid # d7d7d7; width: 282px; padding: 0 0 0 0; margin: 0 0 0 0; } . Custom-search-box2 { background: # fff; border: 1px solid # ddad08; padding: 7px 0 0 8px; color: # 515151; font-weight: normal; font-size: 13px; height: 17px; width: 219px; position: relative; top: 23px-; left: 26px; } . Btn-2 { position: relative; top: 10px; esquerda: 9px; height: 40px; width: 263px; }

Se preferir usar CSS imagens de fundo, basta definir a cor de fundo para transparente, fronteira a 0, o cursor para cursor e, em seguida, adicionar uma imagem de fundo.
Formulário 3 - Sem botão

<div class="custom-search-form3"><form action="/search" method="get"><input name="q" size="26" type="text" value="Type and hit enter to search" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" class="custom-search-box3" /></form></div>

Estilo bloco Inserir no seu CSS.

. Custom-search-form3 { background: # fff url (insert_image_url.jpg) no-repeat; color: # 515151; border: 1px solid # d7d7d7; padding: 10px 0 0 8px; width: 282px; } . Custom-search-box3 { background: # fff; border: 1px solid # ddad08; padding: 7px 0 0 8px; margin: 2px 0 23px 0; color: # 515151; font-weight: normal; font-size: 13px; height: 16px; width: 263px; }

A intenção destes 3 formulários de pesquisas é a simplicidade,e faz com que seja  fácil de personalizar os treis.Os formulários 1 e 2 terão possibilidade de apresentar problema de cross-brouser, mas o 3 não. pois a tecla enter esta sendo usada para informar aos visitantes que eles só precisam pressionar a tecla enter depois de digitar o termo pesquisado.
Bom espero que estes 3 formulários de pesquisas, mas o que já disponibilizei anteriormente sirva para melhorar a interação de seus leitores em seus magníficos sites e blogs, estarei esperando como de costume a avalanche de perguntas..
 


3 comentários:

  1. existe em html este formulário de busca ?

    ResponderExcluir
    Respostas
    1. Ola amigo editor de Pajeú Viagens, estes são em HTML seguidos de seus css para dar estilos aos mesmos... se esta for sua dúvida, espero ter respondido, mas caso não tenha entendido, por favor refaça a pergunta com mais detalhes e terei prazer em responde-la.. obrigado pela sua participação...

      Excluir
    2. Ola pajeú viagens, acredito que o que você gostaria de ter era ele em html puro.. correto? então eu lhe digo que este própriamente não, mas lhe digo que existe sim, em html puro..aqui tem uma demonstração de como ter um formulario de pesquisas em html http://www.html5rocks.com/pt/tutorials/forms/html5forms/

      Excluir

Todo comentário é bem vindo, pois acrescenta muito aos nossos posts, portanto, fique a vontade para debater sobre nossos assuntos...

setaretornoaotopo