Question

como colocar barra de pesquisa em html urgente (0^0)

Answer 1

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.

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.