Desenvolvendo layouts para caixas de pesquisa 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.

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.

É 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

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>

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;
}

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

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>

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;
}

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

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>

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;
}

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.