Cómo crear una barra de búsqueda en HTML

Diferentes componentes componen las páginas web de la aplicación, como el cargador, las barras de navegación, las barras de búsqueda y más. Las propiedades de CSS se utilizan para diseñar estos componentes. Más específicamente, el componente que es casi obligatorio para cada aplicación es el "Barra de búsqueda". Las barras de búsqueda se utilizan para brindar una mejor accesibilidad a los usuarios de una manera que los usuarios buscan componentes en lugar de navegar por todo el sitio web.

Esta publicación guiará sobre:

• ¿Qué es una barra de búsqueda??
• Cómo crear barra de búsqueda en HTML?
• Cómo agregar propiedad de transición al botón Barra de búsqueda?

¿Qué es una barra de búsqueda??

La barra de búsqueda es un elemento de control gráfico de cualquier aplicación. Consiste principalmente en un cuadro de texto de una sola línea y un botón. Funciona de tal manera que el usuario escriba la información en el campo de entrada para buscar, luego presiona el botón para obtener los resultados.

Cómo crear barra de búsqueda en HTML?

En primer lugar, agregue un elemento Div con la clase "búsqueda principal". Agregue otra etiqueta Div con el nombre de la clase "barra de búsqueda"Dentro de este Div. Luego, coloque una etiqueta de entrada y una etiqueta de botón dentro de ella. La etiqueta de entrada está asociada con los atributos "tipo"Con un valor como"texto", Y un"marcador de posición"Se usa para mostrar algún texto en un campo de entrada.

Aquí está el código HTML:

Buscar

CSS

En CSS, se utilizan diferentes propiedades para diseñar la barra de búsqueda. Discutamos uno por uno!

Estilo todo tipo de elementos

*
margen: 0;
relleno: 0;
dimensionamiento de la caja: border-box;
Font-Family: Verdana, Ginebra, Tahoma, Sans-Serif;

El símbolo de asterisco "*" se usa para representar todos los tipos de elementos, y si es seguido por cualquier elemento, clase o nombres de identificación, representará todo ese nombre especificado en todo el documento.

• "margen"La propiedad con valor 0 no proporcionará espacio alrededor de ningún elemento.
• "relleno"Con el valor 0 define que no se asigna espacio alrededor del contenido.
• "dimensionador"Con el valor de la caja de borde incluye el relleno y el borde de la altura y el ancho total del elemento.
• "Familia tipográfica"Se utiliza para seleccionar la fuente de todos los elementos.

Elemento de estilo "cuerpo"

cuerpo
Color de fondo: Darkslategrey;

El color de fondo de toda la sección del cuerpo está establecido en "Darkslategrey" color.

Estilo "Search-Main" Div

.Search-Main
Color de fondo: RGBA (0, 0, 0, 0.159);
Max-Width: 700px;
Margen: 150px Auto;
Altura: 400px;
Radio fronterizo: 30px;

El elemento con la búsqueda de atributos de clase es tener diferentes propiedades que se describen a continuación:

• "anchura máxima"Especifica el límite de ancho máximo.
• "altura"Especifica la altura total del DIV a 400px.
• "radio fronterizo"Proporciona un radio de 30px alrededor del elemento div.
• El "color de fondo" y "margen"Las propiedades funcionan como se discutió anteriormente.

Estilo "Barra de búsqueda" Div

.barra de búsqueda
Pantalla: Flex;
Justify-Content: Center;
Alineación de ítems: Centro;
Altura: 100%;

El DIV de la barra de búsqueda está diseñada con las propiedades de CSS que se analizan a continuación:

• "mostrarSe utiliza la propiedad de la propiedad para hacer que el diseño flexible de la divs.
• "Justify-Content"Alinea los elementos flexibles del div horizontalmente.
• "ítems alineados"Establece la alineación de los elementos flexibles verticalmente.
• "altura"La propiedad se realiza como se explica anteriormente.

Elemento de "entrada" de estilo

.entrada de barra de búsqueda
borde: 1px sólido RGB (47, 63, 63);
relleno: 20px 30px;
tamaño de fuente: 24px;
Color de fondo: RGB (85, 104, 104);
Color: #ffffff;
Esquema: ninguno;

El campo de entrada de la barra de búsqueda Div se proporciona propiedades que se explican a continuación:

• "bordeLa propiedad establece el borde alrededor del campo de entrada con el ancho, el estilo de línea y el color.
• "tamaño de fuente"La propiedad especifica el tamaño de fuente del texto.
• "color"Define el color del texto del campo de entrada.
• "describir"La propiedad con el valor 0 no establecerá línea alrededor del borde del elemento, principalmente cuando se haga clic en.
• El "relleno" y "color de fondo"Las propiedades funcionan como se indicó anteriormente.

Marcador de posición de estilo

.Entrada de barra de búsqueda :: marcador de posición
Color: #Dadada;

El atributo de marcador de posición del campo de entrada de la barra de búsqueda Div se asigna con el "color"Propiedad #DADADA. Aplicará color al texto del marcador de posición.

Botón de estilo

.botón de barra de búsqueda
borde: 1px sólido RGB (47, 63, 63);
relleno: 20px 30px;
tamaño de fuente: 22px;
Color de fondo: RGB (12, 33, 33);
Color: #A3A3A3;
cursor: puntero;
margen-izquierda: 10px;

Las propiedades del elemento del botón del Div-Bar Div se explican a continuación:

• "cursorLa propiedad especifica el estilo cursor del mouse cuando apunta al botón.
• "margen de pesa"Agregará algo de espacio a la izquierda del botón.
• Todas las otras propiedades funcionan de la misma manera.

Al ejecutar el código mencionado anteriormente, obtendremos el resultado como se muestra en la imagen a continuación:

Como sabemos, las propiedades de transición y animación en elementos los hacen más interactivos y entretenidos. Entonces, la siguiente sección describe agregar una transición en el botón de búsqueda.

Cómo agregar propiedad de transición al botón Barra de búsqueda?

Agregue la propiedad de transición con el valor establecido como "todos 0.3s facilidad" hacia ".botón de barra de búsqueda", Donde todo indica todas las propiedades, 0.3s indica la duración de la transición, y la facilidad significa un comienzo lento, luego rápido y termina lentamente:

Transición: todos 0.3s facilidad;

Ahora, para hacer la transición en el botón en el flotador, el elemento del botón se diseña como se menciona en el siguiente bloque de código.

Botón de estilo en el flotador

.Botón de barra de búsqueda: Hover
Transform: traduce (-5px);

El elemento del botón se diseña utilizando la transformación de la propiedad con el valor "traducido (-5px)"Lo que significa en el mouse, el botón se moverá en una posición vertical.

El efecto agregado se puede ver en la imagen a continuación:

Genial! Una barra de búsqueda interactiva se crea con éxito en HTML usando CSS.

Conclusión

En HTML, una barra de búsqueda consiste principalmente en un campo de entrada y un botón, usando y elementos. Los componentes web se pueden diseñar como interactivos al proporcionar propiedades de animación y transición, como se mencionó. Este blog ha explicado cómo crear una barra de búsqueda en HTML con un ejemplo exhaustivo.