Como criar uma barra de pesquisa em HTML

Componentes diferentes compõem as páginas da web do aplicativo, como o carregador, barras de navegação, barras de pesquisa e muito mais. As propriedades CSS são utilizadas para estilizar esses componentes. Mais especificamente, o componente que é quase obrigatório para cada aplicativo é o “Barra de pesquisa”. As barras de pesquisa são usadas para dar melhor acessibilidade aos usuários de uma maneira que os usuários pesquisem componentes em vez de navegar no site inteiro.

Este post guiará sobre:

• O que é uma barra de pesquisa?
• Como criar a barra de pesquisa em html?
• Como adicionar propriedade de transição ao botão da barra de pesquisa?

O que é uma barra de pesquisa?

A barra de pesquisa é um elemento de controle gráfico de qualquer aplicativo. Consiste principalmente em uma caixa de texto de linha única e um botão. Funciona de tal maneira que o usuário digita as informações no campo de entrada para pesquisar e depois pressiona o botão para obter os resultados.

Como criar a barra de pesquisa em html?

Em primeiro lugar, adicione um elemento div com a classe “Pesquisa principal““. Adicione outra tag div com o nome da classe “Barra de pesquisa”Dentro desta div. Em seguida, coloque uma etiqueta de entrada e uma tag de botão dentro dela. A tag de entrada está associada aos atributos “tipo"Com um valor como"texto", E um"espaço reservado”É usado para mostrar algum texto em um campo de entrada.

Aqui está o código HTML:

Procurar

CSS

No CSS, diferentes propriedades são utilizadas para estilizar a barra de pesquisa. Vamos discuti -los um por um!

Estilo todos os tipos de elementos

*
margem: 0;
preenchimento: 0;
Timing de caixa: caixa de fronteira;
Fonte-família: Verdana, Genebra, Tahoma, Sans-Serif;

O símbolo do asterisco é usado para representar todos os tipos de elementos e, se for seguido por qualquer elemento, classe ou nomes de identificação, ele representará todo esse nome especificado em todo o documento.

• ““margem”Propriedade com valor 0 não fornecerá espaço em torno de nenhum elemento.
• ““preenchimento”Com o valor 0 define nenhum espaço é atribuído ao redor do conteúdo.
• ““tamanho de caixa"Com o valor da caixa de fronteira inclui o preenchimento e a borda para a altura e largura totais do elemento.
• ““família de fontes”É utilizado para selecionar a fonte de todos os elementos.

Elemento de "corpo" de estilo

corpo
Background-Color: DarkSlategrey;

A cor de fundo de toda a seção do corpo é definida como “DarkSlategrey" cor.

Estilo “pesquisa-main” div

.Pesquisa-Main
Background-Color: RGBA (0, 0, 0, 0.159);
MAX-LUDA: 700PX;
Margem: Auto de 150px;
Altura: 400px;
Radio de fronteira: 30px;

O elemento com o atributo de classe que a busca é ter propriedades diferentes descritas abaixo:

• ““largura máxima”Especifica o limite máximo de largura.
• ““altura”Especifica a altura total da div para 400px.
• ““Radio de fronteira”Fornece um raio de 30px em torno do elemento div.
• O "cor de fundo" e "margem”As propriedades funcionam como discutido acima.

Estilo “barra de busca” div

.Barra de pesquisa
exibição: flex;
Justify-Content: Center;
alinhado-itens: centro;
Altura: 100%;

A DIV da barra de busca é estilizada com as propriedades CSS discutidas abaixo:

• ““mostrar”Property Flex é utilizado para tornar o layout flexível responsivo da div.
• ““Justify-Content”Alinham os itens flexíveis da div horizontalmente.
• ““alinhado-itens”Define o alinhamento dos itens flexíveis verticalmente.
• ““altura”A propriedade é executada como explicado acima.

Elemento de “entrada” de estilo

.Entrada da barra de pesquisa
borda: 1px RGB sólido (47, 63, 63);
preenchimento: 20px 30px;
Size da fonte: 24px;
Background-Color: RGB (85, 104, 104);
Cor: #ffffff;
Esboço: Nenhum;

O campo de entrada da barra de pesquisa Div recebe propriedades que são explicadas abaixo:

• ““fronteira”Propriedade define a borda ao redor do campo de entrada com a largura, o estilo de linha e a cor.
• ““tamanho da fonte”Propriedade especifica o tamanho da fonte do texto.
• ““cor”Define a cor do texto do campo de entrada.
• ““contorno”Propriedade com valor 0 definirá nenhuma linha ao redor da fronteira do elemento, principalmente quando clicado.
• O "preenchimento" e "cor de fundo”As propriedades são executadas como afirmado acima.

Espaço de espaço estilista

.Entrada da barra de pesquisa :: espaço reservado
Cor: #dadada;

O atributo de espaço reservado do campo de entrada da barra de busca é atribuído com o “cor”Propriedade #dadada. Aplicará a cor ao texto do espaço reservado.

Botão de estilo

.Botão da barra de pesquisa
borda: 1px RGB sólido (47, 63, 63);
preenchimento: 20px 30px;
Size da fonte: 22px;
cor de fundo: RGB (12, 33, 33);
Cor: #A3A3A3;
Cursor: Ponteiro;
margem-esquerda: 10px;

As propriedades do elemento do botão da divisão da barra de pesquisa são explicadas abaixo:

• ““cursor”Propriedade especifica o estilo do cursor do mouse ao apontar para o botão.
• ““margem-esquerda”Vai adicionar algum espaço à esquerda do botão.
• Todas as outras propriedades funcionam da mesma forma.

Ao executar o código acima mencionado, obteremos o resultado como mostrado na imagem abaixo:

Como sabemos, as propriedades de transição e animação nos itens os tornam mais interativos e divertidos. Portanto, a próxima seção descreve a adição de uma transição no botão de pesquisa.

Como adicionar propriedade de transição ao botão da barra de pesquisa?

Adicione a propriedade de transição com o valor definido como “tudo 0.3s facilitar" para o ".Botão da barra de pesquisa”, Onde todos indicam todas as propriedades, 0.3s indica a duração da transição e a facilidade significa um início lento, depois rápido e termina lentamente:

transição: tudo 0.3s facilitar;

Agora, a fim de fazer a transição no botão no Hover, o elemento do botão é estilizado conforme mencionado no bloco de código abaixo.

Botão de estilo no mouse

.Botão da barra de pesquisa: Hover
Transform: tradutor (-5px);

O elemento do botão é estilizado utilizando a propriedade da propriedade com o valor “tradução (-5px)”O que significa que no mouse o mouse, o botão se moverá em uma posição vertical.

O efeito adicionado pode ser visto na imagem abaixo:

Isso é ótimo! Uma barra de pesquisa interativa é criada com sucesso em HTML usando CSS.

Conclusão

No HTML, uma barra de pesquisa consiste principalmente em um campo de entrada e um botão, usando e elementos. Os componentes da web podem ser estilizados como interativos, fornecendo propriedades de animação e transição, como mencionado. Este blog explicou como criar uma barra de pesquisa em HTML com um exemplo completo.