- Página Inicial
- Códigos CSS Prontos
- Barra de pesquisa html
- Voltar
Barra de pesquisa html

O que é uma Barra de Pesquisa HTML?
Uma barra de pesquisa é um elemento fundamental em muitos sites, permitindo que os usuários encontrem rapidamente o conteúdo desejado. Em HTML, essa barra é construída utilizando elementos básicos como <form>
, <input>
e <button>
.
Por que Criar uma Barra de Pesquisa?
- Melhora a experiência do usuário: Facilita a navegação e a busca por informações específicas.
- Aumenta o engajamento: Incentiva os usuários a explorarem mais o seu site.
- Organiza o conteúdo: Ajuda a manter o conteúdo do seu site organizado e acessível.
Vamos ver o exemplo no HTML:
<form class="box-search"> <input class="campo-search" type="text" placeholder="Faça uma pesquisa..."> <input class="btn-search" type="submit" value="Buscar"> </form>
type="text"
: Especifica que o campo de entrada é para texto. placeholder="Pesquisar"
: Exibe um texto de dica dentro do campo, indicando o propósito do campo. type="submit"
: Especifica que o botão envia um formulário.
Estilizando a Barra de Pesquisa com CSS
Para personalizar a aparência da barra de pesquisa, utilizamos CSS. Podemos definir a cor, tamanho, fonte, espaçamento e outros atributos visuais.
.box-search { width: 100%; height: auto; padding: 10px; margin: 100px auto 50px; overflow: hidden; background-color: #f8f8f8; border-radius: 12px; border-width: 1px; border-style: solid; border-color: #eaebec #dfdfdf #d2d2d2; } .campo-search, .btn-search { float:left; } .campo-search { width: 75%; height: 35px; padding: 5px 9px; border: 1px solid #d2d2d2; font-size:16px; background: #f1f1f1; -moz-border-radius: 12px 0px 0px 12px; border-radius: 12px 0px 0px 12px; -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1); } .btn-search{ background-color: #007cff; -moz-border-radius: 0px 12px 12px 0px; border-radius: 0px 12px 12px 0px; border: none; width: 25%; height: 35px; margin: 0; padding: 0; cursor: pointer; font-size:16px; font-weight: bold; color: #ffffff; } .btn-search:hover{ background: #202020; } .btn-search:active { background: #007cff; outline: none; } .btn-search::-moz-focus-inner { border:none; } .campo-search::-webkit-input-placeholder { color: #9c9c9c; font-style: italic; } .campo-search:-moz-placeholder { color: #9c9c9c; font-style: italic; } .campo-search.placeholder { color: #9c9c9c !important; font-style: italic; } .campo-search:focus{ border-color: #dfdfdf; background: #fff; outline: none; } /*768PX BREAKPOINT*/ @media (min-width:48em){ .box-search { width:380px; } }
Considerações Adicionais
- Formulário: Para enviar dados para o servidor, é comum envolver a barra de pesquisa em um formulário HTML.
- Placeholder: Use um placeholder claro e conciso para orientar o usuário.
- Ícones: Adicione um ícone de lupa para indicar a função da barra de pesquisa.
- Responsividade: Certifique-se que a barra de pesquisa se adapte bem a diferentes tamanhos de tela.
- Acessibilidade: Garanta que a barra de pesquisa seja acessível a todos os usuários, incluindo aqueles com deficiências.
Este é apenas um ponto de partida. As possibilidades são infinitas! Ajuste este código de acordo com suas necessidades e crie uma barra de pesquisa personalizada para o seu site.
Veja o Resultado baixo!
Barra de pesquisa html
Baixar Código Veja Funcionando
Neste artigo, você aprendeu o passo a passo de como criar uma barra de pesquisa com html css
.
Lembre-se:
- Este é apenas um exemplo básico. Você pode personalizar a aparência e a funcionalidade do seu formulário de busca acordo com suas necessidades.
- Existem muitos recursos e bibliotecas disponíveis para ajudá-lo a criar formulários de buscas mais complexos.
Com um pouco de esforço, você pode criar caixas de pesquisa personalizada que seja útil, bonita e aprimore a experiência do usuário em seu site.
existem diversas formas de estilizar formulários de pesquisa com efeitos, cores, formas e animações diferentes.
Fica o desafio para você tentar criar um novo design do zero a criatividade é sua.
faça um exemplo e comente aqui em baixo e deixe um link do seu desafio.
Publicado por: Loop Nerd
181 Visualizações
Deixe um comentário