Programar Formularios Dinámicos en HTML y JavaScript

En este video te mostraré como se puede programar manualmente un formulario dinámico en HTML y JavaScript.
Mis Cursos de PROGRAMACIÓN: hdeleon.net/cu...
🖥️ Mi Monitor: amzn.to/3dtnDkk
⌨️ Mi Teclado: amzn.to/3BtjKnq
⌨️ Mi Deck elgato: amzn.to/3dvEKC3
🎧 Mis Orejeras: amzn.to/3BwQYm0
🎤 Mi Micrófono: amzn.to/3qPvFHh
Si quieres apoyarme y darme para una cerveza puedes hacerlo por aquí: paypal.me/Hecto...
Puedes apoyarme desde 0.5 USD al mes uniéndote como miembro al canal aquí: / @hdeleonnet
🐦Twitter: / powerhdeleon
🌎Mi Sitio web: hdeleon.net
📻Raw Radio en Spotify: open.spotify.c...
#programación #programming #javascript

[@hdeleonnet]

Mis cursos de Programación: hdeleon.net/cursos-premium/

[@hawaranghamada2220]

El próximo éxito de Héctor de León - A quién le importa ¿cómo programe? A quién le importa ¿cómo lo haga? Yo soy así... Así programaré

[@kzual]

Ya se que a Héctor De León no le importa mi comentario ni que opine yo. Por eso es que vengo a ver sus videos y le doy like de una. Grande Héctor, gracias por enseñarnos, entretenernos y NO intentar ser políticamente correcto.

[@materialknight]

Por accesibilidad, en usen el atributo for, dándole como valor el id de su respectivo , por ejemplo: JavaScript Eso hace que los lectores de pantalla identifiquen y hagan saber que tal describe tal , y también hace que al tocar o clicar el se marque su respectivo (en este caso, tocar o clicar el texto "JavaScript" hace que se marque su respectivo botón de opción). También, en vez de usar el atributo for, se puede lograr el mismo efecto simplemente envolviendo el con el , así: JavaScript

[@enriqueazarquiel]

Interesante el video, quería comentar unas cosillas ya que en mi trabajo he tenido que implementar un formulario genérico dada una configuración similar a un json, puedes incluir eliminar controles añadir de forma dinámica hacer a aparecer o desaparecer elementos, etc. Una especie de macromonstruo (en angular con primeng). Y quería aportar mi opinión sobre estos temas a esto en España se le llama hacer una churrera (maquina de hacer churros) llevado a la practica el quiero algo generico que haga cosas magicas es imposible de mantener en el tiempo ya que las necesidades van en aumento y cada vez es mas complicado. Expongo mi caso (perdonar por lo pesado que soy) primer formulario formulario dinamico que puedas incorporar controles y que estos se bindeen a un objeto de salida (controles de primeng) controles tipicos cuadros de textos, labels, control de errores, algún dropdown. segunda necesidad quiero elementos agrupadores típicos como acordeones y fieldset si incorporan son mas elementos pero puede ademas se aplican determinadas mejoras de eventos primer problema que se da y no es fácil de gestionar por como esta montado con las referencias de los arrays y en los elementos agrupadores y es que el back retorna errores y no se muestra debajo de los campos que eso lo hacia antes (primera feature que ya no se puede utilizar) segundo desarrollo quiero elementos que aparezcan y desaparezcan pudiendo cargarse en medio y post renderizado. se cambia la orientación de formulario a contenido por eventos que ocurre los ciclos de vida de angular se rompen porque ya no seria retro compatible con los primeros formularios y no dan tiempo de desarrollo. y así muchas cosas (autocomplete, carga demorada, atomización y compartimentación de configuraciones de componentes, tablas, rendering de otros componentes, etc)a que hemos llegado a tener un franquestein que ni esta terminado de definir y esta terminado de implementar ni termina de funcionar ni termina de hacer nada bien pero ellos se quedan con "hace muchas cosas y no funciona mal" y tu cabeza suena "es un desarrollo de usa semana y extra tiempo sacado a parches nunca va a funcionar bien de verdad". Por eso solo como dato importante es lo dinámico esta muy bien pero para casos pequeños como este o cosas que se tengan bien definidas y acotadas o para casos personales. Cosas buenas de elementos dinámicos mejor tiempo de desarrollo muy reutilizable etc. Cosas mala si no esta perfectamente definido nunca nunca nunca va a salir bien el desarrollo. PD: me ha encantado el video un saludo.

[@christophergarcia8569]

Un chingo de gracias por tus videos ya no programo en net jaja pero tus cursos me ayudaron mucho a enterder la logica

[@YhonBarrios]

Excelente me gustan tus temas y ejemplos siempre enfocados en ejemplos más reales

[@alexoliva9200]

Excelente ejercicio Héctor, actualmente desarrollo con React pero en su momento aprender esto era clave para entender como funciona la lógica de los formularios que tanto se suele encontrar uno en trabajos reales, gracias por compartir y enseñar estos temas! 🙌

[@Elver_Galarga33]

Excelente video, cada día aprendo algo nuevo gracias a tus videos, saludos desde Colombia.

[@macjmdc4130]

Perfeccion en todos sus videos! A ver si se puede uno del manejo de GIT o por lo menos como lo manejas Hector! excelente Contenido!!!🤟

[@gonzalogarcia8288]

Excelente Video Amigo Metalero. Amigo Metalero Héctor. Usted haga sus videos a su criterio y estilo. Es muy fácil criticar y solo hablar. Del dicho al hecho hay un gran trecho. Saludos desde Iztapalapa Amigo 🤟🤟👍

[@rguere]

Hector no te preocupes por los nombres, los que nos interesa el contenido como tal, que no nos interesa lo importante es lo que estas enseñando, a mi me ha servido cada cosa que estas enseñando y si ya lo se lo repaso!! saludos!!!

[@nicomendezdev]

Gracias Héctor, me encanta la forma en que explicas, muy buen video. Voy por el curso de SQL

[@valdirmarquez9587]

Se aprende mucho.. Gracias..

[@pauldev06]

Viendo este video porque ha llegado el día de enfrentarme con formularios dinámicos 🥲

[@MEJA98]

Muy buen video, soy un backend developer pero no está de más saber este tipo de cosas

[@luissarmiento421]

Rapunzel pero con piedras en el riñón jajaja buen video por cierto

[@sergioacuna1772]

Con esto se puede hacer un arreglos con mensajes con archivos adjuntos, texto común, archivos adjuntos en común, formato en común, una web que ayude a secretaría a acelerar el envío de mensajes.

[@cipolletti7]

Excelente! Muchas gracias, muy útil

[@luismonagas573]

Excelente mi pana.. Saludos desde Venezuela 28/09/2023

[@fabianquintero9944]

Excelente tu forma de explicar, gracias.

[@rubenvilla1295]

Excelente video, gracias

[@DiegoHirschfeld]

Buenos días, Héctor. Soy un "mal" programador que aun utiliza jQuery pero cuando hago eso, no genero un form para no tener que utilizar el preventDefault. Solo utilizo el form cuando tengo muchos inputs dentro y, para no tener que tomar el valor de cada input, utilizo la función serialize. No sé si es una buena práctica pero es raro que tenga etiquetas form utilizando JavaScript. Muy buenos todos tus videos. Saludos desde Argentina

[@natvgameplays6087]

Mi momento ha llegado!!! Es hora de pelearse con los formularios dinamicos

[@ccc85384]

Muy útil

[@JoséCarmenHernández-b4u]

Cómo decimos en México : Rifado tu video brother. Nuevo suscriptor

[@solpropyme5360]

Apoyo esta excelente idea de ir por estos temas.

[@akucfh1867]

que buen video LCDSPM asi se explica js, gracias hector sos un idolo man

[@Deus-lo-Vuilt]

Luego de escuchar varios , No me importa dije , tengo que seguirlo ajajja que grande 😂

[@pablobonfante633]

Este año yo me tuve que enfrentar a este mismo problema. Y lo resolví de una manera muy parecida.

[@lucasruiz6176]

El rapunzel de C# jajajaja te banco fuerte. Hector un curso de Rust por favor !

[@emermichacosta6]

Gracias Sensei por esto...

[@julian888s]

Mis respetos!

[@sergiomontiel4559]

Hector, gracias por estos videos!!

[@victorgutierrez2206]

jajaja hermoso Rapunzel

[@rogerm412]

👐👐👐 gracias

[@elar10]

Gracias mano

[@davevo3932]

Muy interesante, gracias amigo Héctor!

[@hechados]

Me gusto, fine, fine ,fine

[@gpalmadev]

El mes pasado hice forms dinámicos con vue.js y me costó un montón tmb!

[@luismiguelmaradiagagaitan4286]

Buenísimo!.

[@rafaeljimenezrodriguez9311]

buen video, me das una idea de como funciona y manipula, Esto me servira para mis practicas y no repetir codigo en mis formularios. Muchas gracias

[@deybyariza7780]

Grande, Héctor

[@bryanportillo9772]

Gracias por tan buen video, una vez me toco hacer eso jaja, en efecto banda, llore sangre jajaja, pero se pudo solucionar xd

[@hectorfragoso4840]

Tocayo Rapunzel... justo me tope con un desmadre así como ese. No uso framework alguno, es html con php (backend) y bootstrap.... te explico que pex . El usuario tiene que llenar un select que llamare opciones escogiendo un elemento de un select que le presento en un modal, agrego el elemento elegido al select opciones. necesito que ese select opciones pueda borrar, agregar elementos y que al presentar el select opciones se rellene con los valores de una base de datos. todo en forma dinamica, hermoso despapaye.

[@hdeleonnet]

Parte de esto puede servirte: kzbin.info/www/bejne/q5jMlJmegsl-l5Y

[@mnlo]

Toma tu like

[@droid-jr9940]

buena clase... ahora intentare hacer mi propio map o un reduce ... pero puro codigo vanilla

[@kf_11]

Exactamente, no todo son frameworks. Para dar mantenimiento a código legancy es mucho mas sencillo meter mano directamente en js, un framework o libreria puede romper lo demás.

[@RicardoGarcíaFlores-e9d]

Excelente video Master de León!!! Más videos así :D

[@neganuniverse5547]

Bro estaría col ahora mandarlos al back y guardarlos en la db

[@EzequielRizzo]

un dia mas sobreviviendo a js jajajaj, buen video bro!!

[@arturorodiguez9053]

Le di like, confirmo que no me costo nada ^^ , y esta notificación del banco?...

[@another_developer]

Quedas calvo como Nicolas de Hola mundo hahahhah

[@angrir3471]

Excelente video

[@felipepino834]

Después de estar con react es raro ver html puro , No lo digo de presumido porque estoy aprendiendo,pero con esto me doy cuenta que hay que aprender mask html puro y js para entender lo que hago 😊

[@davidvelazquez7604]

Está Wapa la chava

[@dogemc_pro5386]

tranquilo amigo no hay que jusgar, ya que en reack o vue se hacen rapido. en paginas que son viejas necesitas hacerlo con javascript puro

[@davemour]

Es increíble todo lo que existe en vanilla y los años que tardamos en descubrirlo😂

[@FernandoZamudioC]

estimado amigo seguidor de grupos POP como Cathedral... soy puro backend y estoy incursionando mas profundamente con FRONT llamese JavaScript, la verdad yo m quede en Vanilla JavaScript q aprendi hace 20 años atras... ahora bien me llamo mucho la antecion de tu codigo el cual ya conocia en un 75% salvo lo del name y crear JSON bonito es el tema de las comillas... ahora en mi cabeza tengo comillas simples, comillas dobles y comillas torcidas... recomiendas q siempre use comillas torcidas a partir de ahora ? digo para no concatenar usando el + en cada parte ? parece tonto pero fue lo q aprendi en este video !

[@fabriqr2930]

Con Jquery es casi similar pero mas corto verdad? 😊

[@eliasolate9641]

estoy en esta misma situación pero el formulario esta en un wizard , por que a los doctores del hospital donde trabajo les da ansiedad scrollear

[@danielzapata9099]

El Rapumzel se c# , 😂😂 que bueno

[@heroduty2466]

UFFF Esto en C# es mas simple de construirlo con una clase

[@reliquia66]

yo estoy usando angular y formularios reactivos y fue un pedo validar el formulario formado por componentes aislados

[@changoviejo9575]

No valides dentro de los componentes, manda los datos con un @Output y eso lo validas en el formulario donde están los componentes.

[@reliquia66]

@@changoviejo9575 y cómo agregaría la leyenda de campo requerido debajo en tiempo real?

[@IronMan0-h6j]

Rapunzel de C#

[@CristianMartinez-hm8cz]

Qué pluggin de wordpress manejas jajajajajajajaj xD

[@jeffersonledesmanaupa7808]

Contexto: No me importa. Buen video bro.

[@247431]

Ahh pero es que yo eso lo hago con json schema form bien rápido jajaja

[@dibujahoy4443]

Hola cabezón, yo lo solucioné agregando el atributo name="email[]" en cada input de correo, esto te genera un array automáticamente al hacer submit y llega como array al backend

[@hdeleonnet]

Eso no lo soluciona para array de objetos, que es el caso del video

[@dibujahoy4443]

​@@hdeleonnet para el video está bien, en un caso real puedes usar el atributo name de esa manera y te ahorras un monton de chamba :*

[@joseagrela2522]

le di like y me cobraron una multa

[@grumrm5369]

Calvo como NIcolas de HolaMundo xd

[@vulcanobyte]

Ahora sos JSlover?

[@gris_opaco]

"No me importa.."

[@agustinzavalatotozintle5946]

😂😂😂

[@angelnavarro3327]

Yo me atoro con Angular y lo hago mejor asi jajaja oops 😂

[@guillermocalfuqueo6338]

al final puro js.... 😥😥😥😥😥😥😥😥

[@hdeleonnet]

Sigue C#

[@GalurkYT]

paquillo esa no es tu familia...

[@aiitoor10]

Me da miedo

[@robotpolacosoymatrix.9106]

Este parece salido de la mismísima deep web.🤣