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/cursos-premium/
🖥️ 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/HectorDeLeonGuevara
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.com/show/3obLU60...
#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é

[@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

[@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.

[@YhonBarrios]

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

[@nicomendezdev]

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

[@christophergarcia8569]

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

[@Elver_Galarga33]

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

[@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! 🙌

[@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!!!🤟

[@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.

[@fabianquintero9944]

Excelente tu forma de explicar, gracias.

[@sergiomontiel4559]

Hector, gracias por estos videos!!

[@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!!!

[@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 🤟🤟👍

[@davevo3932]

Muy interesante, gracias amigo Héctor!

[@cipolletti7]

Excelente! Muchas gracias, muy útil

[@valdirmarquez9587]

Se aprende mucho.. Gracias..

[@user-id9qe8eq9w]

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

[@rubenvilla1295]

Excelente video, gracias

[@deybyariza7780]

Grande, Héctor

[@MEJA98]

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

[@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

[@luismiguelmaradiagagaitan4286]

Buenísimo!.

[@cristiancortesobando5384]

Muy útil

[@luismonagas573]

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

[@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

[@julian888s]

Mis respetos!

[@angrir3471]

Excelente video

[@user-ys2xx8uu8u]

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

[@rogerm412]

👐👐👐 gracias

[@emermichacosta6]

Gracias Sensei por esto...

[@pablobonfante633]

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

[@gabrielpalma7163]

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

[@mnlo]

Toma tu like

[@bryanportillo9772]

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

[@natvgameplays6087]

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

[@droid-jr9940]

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

[@elar10]

Gracias mano

[@lucasruiz6176]

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

[@pauldev06]

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

[@hechados]

Me gusto, fine, fine ,fine

[@victorgutierrez2206]

jajaja hermoso Rapunzel

[@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

[@Deus-lo-Vuilt]

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

[@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.

[@user-et6lg2jd7w]

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

[@luissarmiento421]

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

[@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 😊

[@neganuniverse5547]

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

[@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 !

[@davidvelazquez7604]

Está Wapa la chava

[@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

[@davemour]

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

[@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

[@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

[@fabriqr2930]

Con Jquery es casi similar pero mas corto verdad? 😊

[@danielzapata9099]

El Rapumzel se c# , 😂😂 que bueno

[@heroduty2466]

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

[@user-ro5dq5xd7n]

Rapunzel de C#

[@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?

[@agustinzavalatotozintle5946]

😂😂😂

[@CristianMartinez-hm8cz]

Qué pluggin de wordpress manejas jajajajajajajaj xD

[@247431]

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

[@jeffersonledesmanaupa7808]

Contexto: No me importa. Buen video bro.

[@joseagrela2522]

le di like y me cobraron una multa

[@grumrm5369]

Calvo como NIcolas de HolaMundo xd

[@gris_opaco]

"No me importa.."

[@vulcanobyte]

Ahora sos JSlover?

[@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 :*

[@angelnavarro3327]

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

[@guillermocalfuqueo6338]

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

[@hdeleonnet]

Sigue C#

[@aiitoor10]

Me da miedo

[@robotpolacosoymatrix.9106]

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

[@GalurkYT]

paquillo esa no es tu familia...