Cómo diseñar formularios en CSS

Hacer su forma estéticamente bien guapo es una tarea importante si desea mejorar la experiencia del usuario. Una forma HTML se compone más comúnmente de algunos campos de entrada, menús y un botón, por lo tanto, puede aplicar varias propiedades de CSS para mejorar la apariencia de la forma. Le vamos a presentar algunas formas que se pueden aplicar para embellecer los formularios HTML.

Empecemos.

Establezca el ancho de los campos de entrada

Todos sabemos que los campos de entrada tienen cierto ancho por defecto, sin embargo, podemos alterar el ancho de acuerdo con nuestro deseo también. Para alterar el ancho de un campo de entrada, siga el código a continuación.

Html

Ingrese el nombre

Aquí hemos creado un campo de entrada.

CSS

aporte
Ancho: 80%;

Estamos asignando al campo de entrada un ancho del 80%.

Nota: El ancho de un campo de entrada se puede especificar en px, Em, y porcentaje.

Producción

El ancho del campo de entrada ha sido alterado de acuerdo con nuestro deseo.

Agregar espacio dentro de los campos de entrada

Para mejorar el espacio dentro del campo de entrada, use la propiedad de relleno CSS. Además, para agregar espacio fuera del campo de entrada, cuando hay múltiples campos de entrada, ajuste el margen del campo de entrada.

CSS

entrada [type = text]
Ancho: 80%;
relleno: 15px 20px;
margen: 9px 0px;

Además de darle al campo de entrada un poco de ancho, también le hemos dado algunos acolchados y márgenes.

Producción

Se ha agregado espacio dentro y fuera del campo de entrada.

Como puede ver en el código anterior, hemos usado type = texto para peinar el campo de entrada. También hay algunos otros tipos sobre la base de los cuales puede diseñar los campos de entrada como Type = Password (esto solo peinará los campos de contraseña), o Tipo = Número (esto solo diseñará campos de números), etc.

Agregar bordes a los campos de entrada

Puede ajustar el tamaño y el color de los campos de entrada utilizando las propiedades del borde de CSS, además, para agregar más estilo, como las esquinas redondeadas, use la propiedad de radio fronterizo.

CSS

entrada [type = text]
Ancho: 80%;
relleno: 15px 20px;
margen: 9px 0px;
borde: 2px azul sólido;
Border-Radius: 5px;

En el código anterior, estamos asignando un borde de 2px a los campos de entrada junto con un color azul. Además, para hacer las esquinas en la ronda, hemos establecido el radio fronterizo en 5px.

Producción

El radio fronterizo y fronterizo de los campos se ha ajustado de acuerdo con el deseo.

Otra cosa divertida que puede hacer es agregar solo el borde inferior, usando la propiedad de fondo de borde como esta.

CSS

entrada [type = text]
Ancho: 80%;
relleno: 15px 20px;
margen: 9px 0px;
borde: ninguno;
Border-Bottom: 2px azul sólido;

Aquí hemos establecido el borde de los campos de entrada a ninguno y asignado un borde inferior de 2px.

Producción

Se ha agregado un borde inferior con éxito.

Sin embargo, ha notado que ha aparecido un esquema cuando nos centramos en el campo de entrada. ¿Qué pasa si queremos eliminar eso?.

Cómo eliminar el esquema del campo de entrada utilizando el enfoque

Para alterar o establecer el estilo cuando se enfoca un campo de entrada, puede usar el ":enfocar"Selector y para eliminar el esquema en el enfoque de un campo de entrada, puede utilizar el"describir"Propiedad y establecer su valor en"ninguno".

CSS

entrada [type = text]: foco
Esquema: ninguno;

Producción

El esquema se eliminó con éxito.

Agregar color a los campos de entrada

Simplemente usando las propiedades de color, como el color y el color de fondo, puede agregar color al texto y el fondo de los campos de entrada respectivamente.

CSS

entrada [type = text]
Ancho: 80%;
relleno: 15px 20px;
margen: 9px 0px;
Color de fondo: Bisque;
color azul;

En el código anterior, estamos proporcionando un color bisque al fondo de los campos de entrada y al color azul al texto.

Producción

Hemos proporcionado con éxito algo de color al fondo y el texto.

Cómo agregar un estilo sobre el enfoque de los campos de entrada

Puede agregar algo de color de borde o fondo o cualquier estilo CSS a los campos de entrada en el enfoque utilizando el estado de enfoque: cada vez que el usuario hace clic en el campo, se le da un cierto estilo.

CSS

entrada [type = text]: foco
Color de fondo: SkyBlue;

El color de fondo del campo de entrada cambiará a SkyBlue cuando el usuario haga clic en él.

Producción

El estilo personalizado sobre el enfoque se agrega al campo de entrada correctamente.

Agregar una imagen o icono en el campo de entrada

Para hacer que sus campos de entrada sean más interesantes, puede agregarles imágenes o iconos. Así es como lo haces.

CSS

entrada [type = text]
IMAGEN DE ANTECEDENTES: URL ('Correo electrónico.png ');
Posición de fondo: 10px 6px;
tamaño de fondo: 30px;
Background-Repeat: sin repetición;
relleno: 12px 20px 12px 40px;

En el código anterior, primero agregamos un icono de correo electrónico y ajustamos su tamaño y posición dentro del campo de entrada utilizando varias propiedades CSS.

Producción

Se agregó un icono de correo electrónico dentro del campo de entrada correctamente.

Agregar estilo a los menús

A menudo tenemos que agregar menús en formas HTML, por lo tanto, diseñarlos también es necesario. Esto se puede hacer usando algunas propiedades básicas de CSS. Aquí hay un ejemplo.

Html

Fútbol
Grillo
Hockey

En el código anterior, hemos creado un menú muy básico.

CSS

seleccionar
Ancho: 80%;
relleno: 20px;
borde: ninguno;
Border-Radius: 5px;
Color de fondo: LightGray;

opción
estilo de fuente: cursiva;
tamaño de fuente: 20px;

Usando algunas propiedades básicas de CSS, como el borde, el radio fronterizo y el color de fondo, hemos diseñado el menú. Además, también hemos dado algo de estilo a las opciones.

Producción

El menú ha sido diseñado.

Agregar estilo a los botones

Los botones son una parte crucial de una forma y estos se pueden diseñar con propiedades CSS. Aquí hay un ejemplo.

Html

Aquí simplemente hemos creado un campo de entrada de tipo envío.

CSS

Entrada [type = enviar]
Color de fondo: rosa;
Font-Weight: Bold;
borde: ninguno;
relleno: 20px 25px;
Decoración de texto: ninguna;
margen: 6px 4px;

Usando varias propiedades de CSS como color de fondo, peso de fuente y relleno, hemos diseñado el botón.

Producción

El botón ha sido diseñado.

Conclusión

Hacer que su forma HTML sea atractiva es absolutamente necesaria y puede hacerlo dando estilo a diferentes elementos que son parte de la forma, como campos de entrada, menús o botones. Puede usar varias propiedades CSS para diseñar estos elementos como; ancho, color de fondo, color, borde, borde de radio y muchos más. Además, puede agregar iconos o imágenes dentro de los campos de entrada. Todo esto y mucho más sobre las formas de estilo en CSS se destaca en esta publicación.