Caixa de pesquisa HTML: desenvolvendo layouts em p�ginas web

Os primeiros passos para desenvolver o campo de busca

Quem trabalha com desenvolvimento de p�ginas para a web j� deve ter se deparado, em algum momento, com a necessidade de implementar um campo de busca. Atualmente, � raro encontrar um site que n�o possua um mecanismo de busca geral para localizar registros em seus hist�ricos.

Relacionado: c�digos HTML

O procedimento de busca, na pr�tica, depende de v�rios fatores como, por exemplo, a linguagem que se est� utilizando, algum framework que possa estar em uso, a forma de armazenamento dos dados, etc.

Ent�o, o objetivo deste artigo n�o � explicar como implementar esse tipo de consulta, mas sim propor alguns modelos de layout para essas caixas de pesquisa, explicando o c�digo utilizado e o funcionamento.

O intuito aqui n�o � desenvolver controles complexos, abusando de recursos gr�ficos e scripts, mas sim apresentar t�cnicas e ideias que podem servir como base para o desenvolvimento de estruturas mais elaboradas.

Ser�o apresentados aqui tr�s modelos, ordenados por ordem de complexidade visual.

Observaç�o: vale salientar que nenhum tutorial foi consultado para o desenvolvimento dos c�digos a seguir. Os modelos aqui apresentados foram desenvolvidos unicamente para este artigo.

Ideias gerais

Antes de partirmos para os modelos, eu gostaria de explicar qual � a ideia ou modelo HTML no qual se baseiam todos as soluç�es aqui expostas.

Quando vemos as caixas de buscas com imagens, bordas arredondadas, cores, etc, imaginamos que tudo aquilo est� dentro de um input do tipo text. De fato � poss�vel estilizar esse elemento utilizando CSS e obter um bom resultado, por�m, inserir um bot�o ou uma imagem j� seria algo mais complicado.

Ent�o, utilizaremos um layout base para desenvolver nossas �search boxes�, que consiste em uma div contendo um input e algumas imagens e/ou button. Observe a Figura 1 onde isso � ilustrado.

Figura 1. Layout base das caixas de texto

� importante ter em mente esse modelo para entender a disposiç�o e configuraç�o dos elementos posteriormente.

HTML5 e CSS3

Considerando que a maioria dos browsers suporta boa parte dos recursos do HTML5 e das CSS3, n�o � pecado aproveitas essas funcionalidades, n�o � mesmo?

Aqui utilizaremos o atributo �placeholder� do HTML5 e �border-radius� das CSS3, bem como a funç�o �rgba�, tamb�m das folhas de estilo.

Primeiro modelo

Figura 2. Primeiro modelo

Esse primeiro modelo, como dito, � o mais simples. Cont�m apenas uma div com um input e uma img. Abaixo segue o c�digo HTML utilizado.

<div id="divBusca">
  <input type="text" id="txtBusca" placeholder="Buscar..."/>
  <img src="search3.png" id="btnBusca" alt="Buscar"/>
</div>

Listagem 1. C�digo HTML do primeiro modelo

A seguir, est� a folha de estilos utilizada para este modelo. Observe que � bastante simples e direta.

#divBusca{
  background-color:#2F4F4F;
  border:solid 1px;
  border-radius:15px;
  width:300px;
}

#txtBusca{
  float:left;
  background-color:transparent;
  padding-left:5px;
  font-style:italic;
  font-size:18px;
  border:none;
  height:32px;
  width:260px;
}

Listagem 2. CSS do primeiro modelo

Os principais pontos desse c�digo CSS s�o a propriedade border-radius da div e as propriedades background-color, float e border do input que fazem parecer que o texto est� sendo digitado diretamente na div.

Segundo modelo

Figura 3. Segundo modelo

Esse segundo modelo � um pouco mais elaborado. Cont�m uma imagem no in�cio, dando uma ideia de marca d��gua e o bot�o de pesquisa ficou claramente separado da caixa de texto. Por�m, repare que o c�digo HTML n�o � muito diferente, como mostra a Listagem 3.

<div id="divBusca">
  <img src="search3.png" alt="Buscar..."/>
  <input type="text" id="txtBusca" placeholder="Buscar..."/>
  <button id="btnBusca">Buscar</button>
</div>

Listagem 3. C�digo HTML do segundo modelo

O CSS, por sua vez, � um tanto mais extenso.

#divBusca{
  background-color:#E0EEEE;
  border:solid 2px #5F9EA0;
  border-radius:10px;
  width:300px;
  height:32px;
}

#txtBusca{
  float:left;
  background-color:transparent;
  padding-left:5px; 
  font-size:18px;
  border:none;
  height:32px;
  width:191px;
}

#btnBusca{
  border:none;
  float:left;
  height:32px;
  border-radius:0 7px 7px 0;
  width:70px;
  font-weight:bold;
  background:#5F9EA0;
}

#divBusca img{
  float:left;
}

Listagem 4. CSS do segundo modelo

Note que apesar do border-radius da div ter o valor 10, a mesma propriedade do button tem o valor 7. Isso � necess�rio para que o bot�o se encaixe internamente no canto da div (que tem a borda de largura 2px).

Outro ponto importante � que todos os elementos internos tem o float definido como left, para que fiquem dispostos lateralmente dentro da div.

Terceiro modelo

Figura 4. Terceiro modelo

O terceiro e �ltimo modelo, � visualmente mais complexo, por�m o c�digo utilizado � bem semelhante ao anterior. O diferencial deste � que o bot�o de busca � uma imagem de dimens�es 135x37px. Por isso, a largura deste modelo � um pouco maior que os anteriores.

<div id="divBusca">
  <img src="search3.png" alt=""/>
  <input type="text" id="txtBusca" placeholder="Buscar..."/>
  <img src="search4.png" alt="Buscar..." id="btnBusca"/>
</div>

Listagem 5. C�digo HTML do terceiro modelo

O c�digo CSS utilizado tamb�m n�o � mais complexo, conforme consta na Listagem 6.

#txtBusca{
  float:left;
  background-color:transparent;
  padding-left:5px; 
  font-size:18px;
  border:none;
  height:32px;
  width:226px;
}

#btnBusca{
  float:left;
  cursor:pointer;
}

#divBusca img{
  float:left;
}

#divBusca{
  border:solid 10px rgba(47, 79, 79, 0.8);
  border-radius:10px;
  height:37px;
  width:400px;
}

Listagem 6. CSS do terceiro modelo

O ponto diferente neste c�digo � a utilizaç�o da funç�o �rgba� das CSS3, que permite aplicar um efeito de transpar�ncia no elemento. No caso, alteramos a opacidade da borda da div para 80%.

Criar layouts para caixas de pesquisa n�o � dif�cil, basta ter um pouco de criatividade, visualizar o modelo que se deseja e fazer uso dos recursos dispon�veis para implement�-lo.

As cores e imagens utilizadas ficam a crit�rio do leitor, por�m, disponibilizarei os arquivos usados neste artigo para download.

Como j� foi dito, a intenç�o aqui n�o � demonstrar t�cnicas avançadas de design, mas sim apresentar soluç�es simples e de f�cil compreens�o, principalmente para quem est� iniciando no desenvolvimento para web.

Grato pela atenç�o, finalizo aqui este artigo. Deixem seus coment�rios e at� a pr�xima publicaç�o.

Links �teis

Saiba mais sobre JavaScript ;)

Programando em HTML5:
Ao ser anunciada a vers�o 5 do padr�o HTML, inicialmente parte do mercado n�o recebeu com grande entusiasmo, acostumado a receber poucos recursos novos de uma vers�o para outra. A verdade � que, desde que a vers�o 4.0 foi lançada em 1997, poucos avanços aconteceram nos dez anos seguintes.
Comandos e tags HTML5:
Se voc� precisa conhecer comandos, dicas e tags HTML5 acesse nosso conte�do gratuito. Tudo sobre HTML5 voc� encontra no maior site para programadores do Brasil. Estude agora!
O que � o HTML5:
Veja neste artigo um pouco da hist�ria do HTML, o que � o HTML5 e suas principais mudanças em relaç�o �s vers�es anteriores.

Desenvolvendo layouts para caixas de pesquisa em p�ginas web

Veja neste artigo ideias e modelos para o desenvolvimento de layouts para caixas de pesquisa em páginas web. Serão apresentados três modelos que podem ser customizados e utilizados como base para o desenvolvimento de novos estilos.