0

Desde que uso HTML no he seguido ningún 'manual' para saber si lo que funciona realmente esta hecho de la mejor forma, una vez tuve un conflicto con un form y lo solucione pero hoy quiero confirmar si esta bien.

Primera alternativa:

<div class='card'>
   <div class='card-header'>Registrar</div>
   <div class='card-body'>
      <form>
         <div>
            <label>Ejemplo1</label>
            <input>
         </div>
         <div>
            <label>Ejemplo2</label>
            <input>
         </div>
         <div>
            <label>Ejemplo3</label>
            <input>
         </div>
   </div>
   <div class='card-footer'>
       <button value='Enviar'></button>
       </form>
   </div>
</div>

Primera alternativa

Segundo alternativa

<div class='card'>
   <div class='card-header'>Registrar</div>
   <form>
      <div class='card-body'>
         <div>
            <label>Ejemplo1</label>
            <input>
         </div>
         <div>
            <label>Ejemplo2</label>
            <input>
         </div>
         <div>
            <label>Ejemplo3</label>
            <input>
         </div>
      </div>
      <div class='card-footer'>
         <button value='Enviar'></button>
      </div>
   </form>
</div>

Segunda alternativa

Como podemos ver podría realizar el mismo diseño con cualquiera de esas dos formas, pero quiero saber cual es la mejor y por qué? Supongo que la segunda, se ve mas limpio y ordenado aunque ambas funcionan.

El problema que veo en la segunda alternativa es que los elementos del footer pierden el diseño de esa clase.

En resumen: Esta mal abrir un form en un div y cerrarlo en otro diferente?

Gracias

1 respuesta 1

0

Mira, el lenguaje de etiquetas funciona como contenedores, donde cada etiqueta debe abrir y cerrar, y dentro puedes meter mas y mas contenedores. Cruzar contenedores no deberia de ser correcto, porque deforma la estructura, Eso lleva despues a problemas de dise;o dentro del mismo html.

En tu primer ejemplo, estas cruzando un con una a la mitad. lo cual es incorrecto.

La segunda opcion esta correcta, porque abres el contenedor del y dentro acomodas los demas y ya despues cierras ese contenedor.

Solo velo de esa manera, contenedores.

7
  • Queda claro, pero una duda no se porque con boostrap al aplicar la segunda alternativa parece que pierde el diseño de las clases, por ejemplo en card-footer ya todo me queda sin bordes.
    – kevinrueda
    Commented el 4 feb. 2022 a las 3:14
  • Porfa, puedes revisar las imagenes
    – kevinrueda
    Commented el 4 feb. 2022 a las 3:20
  • en bootstrap la idea del card es poner todo dentro de un card-body , card-footer, o card-header es como esta dise;ado su css. eso significa o que tienes que pasar el form dentro del card-body Commented el 4 feb. 2022 a las 3:34
  • O tambien puedes mover los tags del form para contener dentro del el el card Commented el 4 feb. 2022 a las 3:36
  • 1
    No, la mejor solución es que el form quede contenido dentro del .card-body, tanto su inicio como su cierre
    – masterguru
    Commented el 4 feb. 2022 a las 4:17

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.