¿Cómo crear MovimientosForm en HTML?

En un artículo anterior de KeepCoding hemos estado trabajando con la creación de formularios y ahora vamos a crear MovimientosForm en HTML para poder pintarlo en nuestro programa de código. Este es un proceso importante, ya que el lenguaje de marcado HTML es representativo para la creación de programas de código. Así pues, a continuación, te presentamos el proceso para crear MovimientosForm en HTML.

Tabla de movimientos para una app de ingresos y gastos

Antes de pasar al proceso para crear MovimientosForm en HTML, creemos que debes tener en cuenta para qué tenemos que crear este formulario y de qué forma los datos otorgados en dicho elemento se verán reflejados en nuestro programa de código.

A continuación, te traemos una tabla de movimientos donde veremos, debajo de las etiquetas, los campos con los valores que ha entregado el usuario a partir del formulario. Estos son la fecha, la hora, el concepto, el tipo de movimiento (es decir, ingreso o gasto) y la cantidad.

ID	Fecha	Hora	Concepto	Ingreso o gasto	Cantidad

Cómo crear MovimientosForm en HTML

Para crear MovimientosForm en HTML debemos tener claro varios conceptos y herramientas que son extraídos de la teoría y práctica del trabajo y desarrollo de app web con el lenguaje de marcado de HTML. A continuación, te presentamos algunos de ellos:

• En primer lugar, para crear el fichero MovimientosForm en HTML a partir del desarrollo de otro fichero, deberás utilizar la opción de herencia de plantillas o template inheritance para traer todos los elementos de otro fichero sin tener que reproducir los mismos elementos para crear bloques de contenido o la misma conformación de todo el fichero.
  Para utilizar el template inheritance, utilizarás el método {%extends “nombre del fichero principal” %}, {%block “nombre del bloque de contenido” %} y {% endblock “nombre del bloque de contenido” %}.
• Para configurar el form y los métodos de petición que se establecen a partir de él, deberás utilizar el método POST, donde establecerás la herramienta de csrf token, y del label, el cual también deberás modificar desde el tamaño o size de la fuente.
• Ahora, para construir cada uno de los campos de contenido del formulario, deberás crearlo desde las clases dentro de los métodos <div> </div>. Cada uno de ellos deberá configurarse con el método form y etiquetarse con los nombres que le corresponden. Este puede ser fecha, hora y concepto para el caso que estamos desarrollando en este artículo.
  Cada una de estas clases debe tener un método que permita que el usuario conozca qué debe hacer para rellenar cada uno de los campos del formulario. Para la fecha y la hora, se deberá establecer el type; para el concepto, por otro lado, deberá utilizar el método placeholder.
• Por otro lado, para definir el campo para establecer si un movimiento es un ingreso o un gasto, en HTML deberás utilizar el método de subfield que, como los demás, tendrá un label determinado.
• Por último, estableceremos un campo que almacene un botón para guardar y subir el formulario una vez completado. Este será realizado con el método submit.

Representación de MovimientosForm en HTML

A continuación, te presentamos la representación para el proceso de cómo crear MovimientosForm en HTML:

{%extends “base.html” %}

{%block head_title%}

Modificar movimiento – {{ super ()}

{% endblock head_title%}

{% block pagetitle %}

Modificar movimiento

{% endblock pagetitle %}

{% block content %}

{{ super() }

<form method = “POST” action = “/modificar/ {{ mov.id }}”>

{{form.csrf_token}}

{{form.name.label}} {{form.name (size = 20}}

< div class = “campo – formulario”>

{{ form.fecha.label }}

{{ form.fecha (type = “date”) }}

</div>

< div class = “campo – formulario”>

{{ form.hora.label }}

{{ form.hora (type = “time”) }}

</div>

< div class = “campo – formulario”>

{{ form.concepto.label }}

{{ form.concepto (placeholder= “Pon el concepto”) }}

</div>

< div class = “campo – formulario”>

{% for subfield in form.ingreso_gasto %}

{{ subfield }}

{{ subfield.label }}

{% endfor %}

</div>

< div class = “campo – formulario”>

{{form.cantidad.label}}

{{form.cantidad}}

</div>

< div class = “acciones”>

{{form.submit}}

</div>

</form>

{% endblock %}

De esta manera, si reproduces este mismo proceso sobre cómo crear MovimientosForm en HTML en tus proyectos de código, ya podrás establecer y pintar formularios en cualquier lugar y momento.

Sigue aprendiendo con KeepCoding

Ahora que has aprendido cómo crear MovimientosForm en HTML, después de generarlo y pintarlo con dependencias del lenguaje de programación de Pyhton, estás listo para programar otro tipo de proyectos. ¡No olvides que la práctica es la mejor forma de aprender!

Si quieres seguir adentrándote en este mundillo con la ayuda de una guía experta, te recomendamos matricularte en nuestro Aprende a Programar desde Cero Full Stack Jr. Bootcamp. Esta es la oportunidad perfecta para cumplir tu sueño de convertirte en un programador en menos de un año. ¡No te lo pierdas!