en Blog profesional

Hoy me he tropezado con una necesidad en un formulario y es que el número de campos tenía que ser dinámico y no predefinido, para que no sea el ejemplo con el que he tenido que lidiar y sea algo más entretenido vamos a pensar en un formulario en el que introduzcamos las canciones de un CD de música, no sabemos como se llama el CD y lo mejor, no sabemos cuantas canciones tiene.

Así que vamos a hacer un formulario que pida el nombre del CD, el autor y todas las canciones junto con la duración de cada una.

Para que quede mono el formulario podemos ir a lo fácil y usar bootstrap, para definir los cuadros podemos ir a shoelace.io que es una web que nos ayudará a crear los cuadros de una forma muy fácil y visual, en mi caso:

shoelace

El código que nos ha generado es el siguiente:

Obviamente para estas cajas no es necesario usar ninguna aplicación externa, pero que sepáis que existe, a mi me ha venido muy bien.

En cuanto tenemos esto procedemos a meter nuestro formulario ahí dentro.

Como primer paso hemos rellenado la plantilla que nos ha generado la aplicación de antes para usar los campos para distribuir el formulario, sólo hemos añadido un pequeño detalle, y es ese botón “+” que han en la segunda caja y que solo ocupa una columna. La distribución de las columnas es la de bootstrap.

Por supuesto en la cabecera hemos metido el css indicado

Y en cuanto al javascript utilizado la función addCancion() que lo que hace es añadir al div canciones, el último y que aparece vacío en el HTML de arriba dos cajas más con los inputs del formulario.

Por supuesto, cada vez que se le da al “+” verde se crea una nueva fila

El formulario en un navegador al final queda como la imagen que os pongo a continuación:

formulairo_cd

El código completo, todo juntito, es el siguiente:

 

Escribir un comentario

Comentario