Programar Formularios Dinámicos en HTML y JavaScript

Поделиться
HTML-код
  • Опубликовано: 29 дек 2024

Комментарии • 86

  • @hdeleonnet
    @hdeleonnet  Год назад +11

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

  • @hawaranghamada2220
    @hawaranghamada2220 Год назад +39

    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
    @kzual Год назад +8

    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
    @materialknight Год назад +2

    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
    @enriqueazarquiel Год назад +2

    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.

  • @alexoliva9200
    @alexoliva9200 Год назад +1

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

  • @gonzalogarcia8288
    @gonzalogarcia8288 Год назад +1

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

  • @christophergarcia8569
    @christophergarcia8569 Год назад +2

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

  • @macjmdc4130
    @macjmdc4130 Год назад +4

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

  • @Elver_Galarga33
    @Elver_Galarga33 Год назад +1

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

  • @luismonagas573
    @luismonagas573 Год назад +1

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

  • @rguere
    @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!!!

  • @YhonBarrios
    @YhonBarrios Год назад +6

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

  • @nicomendezdev
    @nicomendezdev Год назад +1

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

  • @MEJA98
    @MEJA98 Год назад +1

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

  • @sergiomontiel4559
    @sergiomontiel4559 Год назад

    Hector, gracias por estos videos!!

  • @akucfh1867
    @akucfh1867 Год назад +1

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

  • @JoséCarmenHernández-b4u
    @JoséCarmenHernández-b4u 9 месяцев назад

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

  • @DiegoHirschfeld
    @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

  • @valdirmarquez9587
    @valdirmarquez9587 Год назад

    Se aprende mucho.. Gracias..

  • @lucasruiz6176
    @lucasruiz6176 Год назад

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

  • @fabianquintero9944
    @fabianquintero9944 Год назад

    Excelente tu forma de explicar, gracias.

  • @deybyariza7780
    @deybyariza7780 Год назад +1

    Grande, Héctor

  • @cipolletti7
    @cipolletti7 Год назад +1

    Excelente! Muchas gracias, muy útil

  • @natvgameplays6087
    @natvgameplays6087 10 месяцев назад +1

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

  • @pauldev06
    @pauldev06 10 месяцев назад +1

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

  • @solpropyme5360
    @solpropyme5360 Год назад

    Apoyo esta excelente idea de ir por estos temas.

  • @RicardoGarcíaFlores-e9d
    @RicardoGarcíaFlores-e9d Год назад

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

  • @luissarmiento421
    @luissarmiento421 Год назад +7

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

  • @rubenvilla1295
    @rubenvilla1295 Год назад

    Excelente video, gracias

  • @davevo3932
    @davevo3932 Год назад

    Muy interesante, gracias amigo Héctor!

  • @Deus-lo-Vuilt
    @Deus-lo-Vuilt Год назад

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

  • @luismiguelmaradiagagaitan4286
    @luismiguelmaradiagagaitan4286 Год назад +1

    Buenísimo!.

  • @pablobonfante633
    @pablobonfante633 Год назад +1

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

  • @rafaeljimenezrodriguez9311
    @rafaeljimenezrodriguez9311 4 месяца назад

    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

  • @rogerm412
    @rogerm412 Год назад +1

    👐👐👐 gracias

  • @bryanportillo9772
    @bryanportillo9772 Год назад

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

  • @emermichacosta6
    @emermichacosta6 Год назад

    Gracias Sensei por esto...

  • @sergioacuna1772
    @sergioacuna1772 4 месяца назад

    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.

  • @hectorfragoso4840
    @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
      @hdeleonnet  Год назад

      Parte de esto puede servirte: ruclips.net/video/ugicfhMdKa4/видео.html

  • @victorgutierrez2206
    @victorgutierrez2206 Год назад +1

    jajaja hermoso Rapunzel

  • @FernandoZamudioC
    @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 !

  • @gpalmadev
    @gpalmadev Год назад +1

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

  • @davemour
    @davemour Год назад

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

  • @droid-jr9940
    @droid-jr9940 Год назад

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

  • @EzequielRizzo
    @EzequielRizzo Год назад +1

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

  • @arturorodiguez9053
    @arturorodiguez9053 Год назад

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

  • @kf_11
    @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.

  • @julian888s
    @julian888s Год назад

    Mis respetos!

  • @ccc85384
    @ccc85384 Год назад +1

    Muy útil

  • @hechados
    @hechados Год назад +1

    Me gusto, fine, fine ,fine

  • @elar10
    @elar10 Год назад +1

    Gracias mano

  • @angrir3471
    @angrir3471 Год назад

    Excelente video

  • @felipepino834
    @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 😊

  • @fabriqr2930
    @fabriqr2930 10 месяцев назад

    Con Jquery es casi similar pero mas corto verdad? 😊

  • @mnlo
    @mnlo Год назад

    Toma tu like

  • @neganuniverse5547
    @neganuniverse5547 Год назад +2

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

  • @Mirador-recurrente
    @Mirador-recurrente Год назад

    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

  • @another_developer
    @another_developer Год назад +2

    Quedas calvo como Nicolas de Hola mundo hahahhah

  • @davidvelazquez7604
    @davidvelazquez7604 Год назад

    Está Wapa la chava

  • @dogemc_pro5386
    @dogemc_pro5386 5 месяцев назад

    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

  • @danielzapata9099
    @danielzapata9099 Год назад

    El Rapumzel se c# , 😂😂 que bueno

  • @IronMan0-h6j
    @IronMan0-h6j Год назад +3

    Rapunzel de C#

  • @reliquia66
    @reliquia66 Год назад

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

    • @changoviejo9575
      @changoviejo9575 Год назад +1

      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
      @reliquia66 Год назад

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

  • @heroduty2466
    @heroduty2466 Год назад

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

  • @joseagrela2522
    @joseagrela2522 Год назад

    le di like y me cobraron una multa

  • @CristianMartinez-hm8cz
    @CristianMartinez-hm8cz Год назад

    Qué pluggin de wordpress manejas jajajajajajajaj xD

  • @jeffersonledesmanaupa7808
    @jeffersonledesmanaupa7808 Год назад

    Contexto: No me importa.
    Buen video bro.

  • @247431
    @247431 Год назад +1

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

  • @dibujahoy4443
    @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
      @hdeleonnet  Год назад +1

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

    • @dibujahoy4443
      @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 :*

  • @grumrm5369
    @grumrm5369 Год назад

    Calvo como NIcolas de HolaMundo xd

  • @vulcanobyte
    @vulcanobyte Год назад

    Ahora sos JSlover?

  • @agustinzavalatotozintle5946
    @agustinzavalatotozintle5946 Год назад

    😂😂😂

  • @gris_opaco
    @gris_opaco Год назад +2

    "No me importa.."

  • @angelnavarro3327
    @angelnavarro3327 Год назад

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

  • @guillermocalfuqueo6338
    @guillermocalfuqueo6338 Год назад

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

  • @robotpolacosoymatrix.9106
    @robotpolacosoymatrix.9106 Год назад

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

  • @GalurkYT
    @GalurkYT Год назад

    paquillo esa no es tu familia...

  • @aiitoor10
    @aiitoor10 9 месяцев назад

    Me da miedo