Cómo agregar estilos a un formulario de una app de ingresos y gastos

¿Sabes cómo agregar estilos a un formulario de una app de ingresos y gastos a partir del trabajo conjunto de HTML? Si quieres aprender a hacerlo, te recomendamos seguir leyendo este post, ya que te recordaremos de qué forma se puede escribir el formulario en el fichero inicio.html y, por otro lado, te contaremos de qué manera puedes agregar estilos a un formulario de una app de ingresos y gastos.

Agregar estilos a un formulario de una app de ingresos y gastos

Para agregar estilo a un formulario de una app de ingresos y gastos, debes cumplir con una serie de labores. Antes de darle dicha capa a la interfaz gráfica, deberás haber escrito las clases en el fichero de funcionalidades para programar, así como haber construido el formulario en HTML.

Escribir el formulario en el fichero inicio.html

Para agregar estilo a un formulario de una app de ingresos y gastos, en un principio y después de haber instanciado las clases en el fichero de funcionalidades, deberás escribir el formulario en el fichero inicio.html. A continuación, te presentamos el extracto de código que se representa en el fichero de HTML, el cual deberás integrar antes de ponerle estilos a tu formulario.

Aquí deberás establecer la clase del campo o formulario, de las acciones, los bloques para ingreso, gasto y cantidad.

<form>

<div class = «campo – formulario»>

<input type = «radio» name = «ingreso_gasto» id = «ingreso» value =»I»>

<label for = «ingreso» class = «radio – label»> Ingreso </label>

<input type = «radio» name = «ingreso_gast» id = «gasto» » value =»G»>

<label for = «gasto» class = «radio – label»> Gasto</label>

</div>

<div class = «campo – formulario»>

<label for = «cantidad»> Cantidad </label>

<input type = «text» name = «cantidad» id = «cantidad»

</div>

<div class = «acciones»>

<button type = «submit»> Agregar </button>

</div>

</form>

Estilos a un formulario de una app de ingresos y gastos

Ahora que ya tienes escrito el formulario, ya puedes empezar a agregar estilos a un formulario de una app de ingresos y gastos, que se han extraído de la hoja de estilos, es decir, CSS. Deberás adecuar todos los elementos en el fichero de styles.css de tu programa.

De esta manera, como primer paso, vamos a instanciar la clase de campo formulario y le pasaremos la siguientes variables:

• display para configurarlo con un valor.
• font-size para determinar el tamaño de la fuente.
• font-weight para configurar el grueso de la fuente.
• margin-top para la distancia del margen con el borde superior.

#en el fichero styles.css

/*Estilo para el formulario*/

.campo-formulario label {

display: block;

font – size: 1rem;

font – weight: bold;

padding – bottom: 0;

margin – top: .5rem;

}

En segundo lugar, tendrás que establecer las dimensiones del mismo campo del formulario cuando no haya un valor de ese tipo. Para agregar las dimensiones, deberás instanciar el parámetro de width.

.campo – formulario input: not ([type = «radio»]) {

width: 100%;

}

Por último, deberás configurar el elemento que has instanciado en el punto anterior. Allí configurarás el display y las distancias donde se ubicará el objeto en comparación al borde superior y al borde inferior.

.campo – formulario -radio – label {

display: inline – block;

margin – right: 2rem

margin – bottom: 7px;

}

De esta manera, no solo habrás pintado el formulario en tu programa, sino que tembién has aprendido cómo agregar estilos a un formulario de una app de ingresos y gastos.

¿Cuál es el siguiente paso?

Ahora que ya sabes cómo agregar estilos a un formulario de una app de ingresos y gastos, estás más cerca de finalizar de construir tu programa de código para desarrollar una plataforma o página web de cualquier índole.

Por lo tanto, si quieres seguir aprendiendo sobre programación, Python y desarrollo web, te recomendamos echarle un vistazo al programa de Aprende a Programar desde Cero Full Stack Jr. Bootcamp. Esta será la mejor forma de convertirte en un programador experto en menos de un año. ¿A qué estás esperando? ¡Matricúlate ya!