¿Es correcto usar DIV dentro de FORM?

86

Me pregunto qué estás pensando acerca de DIV-tag dentro de FORM-tag.

Necesito algo como esto:

<form>
  <input type="text"/>
  <div> some </div>
  <div> another </div>
  <input type="text" />
</form>

¿Es práctica general usarlo en el DIVinterior FORMo necesito algo diferente?

html semantic-markup demas
fuente

Respuestas:

133

Está totalmente bien.

El formpresentarán sólo sus controles de tipo de entrada (* También Textarea, Selectetc ...).

No tiene nada de qué preocuparse divdentro de a form.

Royi Namir
fuente
2
¿Qué tal usar un formulario dentro de un div?
Kick Buttowski
1
@KickButtowski Un formulario dentro de un div no es ningún problema. Puede probarlo usted mismo en un validador de HTML. Además, es casi inevitable en estos días, ya que las páginas modernas se basan en div. Si no estuviera permitido, una simple envoltura o colocar el formulario en un contenedor ya invalidaría la página.
Nrzonline
La validación del formulario ha dejado de funcionar para mí desde que agregué divs dentro del formulario
Suhas
28

Es completamente aceptable usar un DIV dentro de una <form>etiqueta.

Si nos fijamos en el valor por defecto CSS 2.1 hoja de estilo , divy plos dos están en la display: blockcategoría. Luego, al mirar la especificación HTML 4.01 para el elemento de formulario, no solo incluyen <p>etiquetas, sino también <table>etiquetas, por lo que, por supuesto <div>, cumplirían los mismos criterios. También hay una <legend>etiqueta dentro del formulario en la documentación.

Por ejemplo, lo siguiente pasa la validación de HTML4 en modo estricto:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
</head>
<body>
<form id="test" action="test.php">
<div>
  Test: <input name="blah" value="test" type="text">
</div>
</form>
</body>
</html>
Alex W
fuente
11

Puede usar un <div>dentro de un formulario, no hay problema allí ... PERO si va a usar el <div>como etiqueta para el inputno ... labeles una opción mucho mejor:

<label for="myInput">My Label</label> 
<input type="textbox" name="MyInput" value="" />
Casa del pastor
fuente
3

Es incorrecto tener <input> como hijo directo de un <form>

Y por cierto <input / > puede fallar en algún tipo de documento

Compruébelo con http://validator.w3.org/check

el tipo de documento no permite el elemento "INPUT" aquí; falta una de las etiquetas de inicio "P", "H1", "H2", "H3", "H4", "H5", "H6", "PRE", "DIV", "ADDRESS"

<input type = "texto" />

El elemento mencionado no puede aparecer en el contexto en el que lo colocó; los otros elementos mencionados son los únicos que están permitidos allí y pueden contener el elemento mencionado. Esto puede significar que necesita un elemento contenedor, o posiblemente que ha olvidado cerrar un elemento anterior.

Una posible causa de este mensaje es que ha intentado colocar un elemento de nivel de bloque (como "<p>" o "<table>") dentro de un elemento en línea (como "<a>", "<span> ", o" <font> ").

stefan bachert
fuente
3

Su pregunta no aborda lo que desea poner en las etiquetas DIV, que probablemente sea la razón por la que recibió algunas respuestas incompletas / incorrectas. La verdad es que puede, como dijo Royi, poner etiquetas DIV dentro de sus formularios. No desea hacer esto para las etiquetas, por ejemplo, pero si tiene un formulario con un montón de casillas de verificación que desea distribuir en tres columnas, entonces, por supuesto, use etiquetas DIV (o SPAN, HEADER, etc. .) para lograr la apariencia que está tratando de lograr.

Clinton
fuente
3

Definición y uso

La etiqueta define una división o una sección en un documento HTML.

La etiqueta se utiliza para agrupar elementos de bloque para formatearlos con estilos. http://www.w3schools.com/tags/tag_div.asp

También DIV - MDN

El elemento HTML (o elemento de división de documentos HTML) es el contenedor genérico para el contenido de flujo, que no representa nada de forma inherente. Se puede usar para agrupar elementos con fines de estilo (usando los atributos class o id), o porque comparten valores de atributo, como lang. Debe usarse solo cuando ningún otro elemento semántico (como o) sea apropiado.

Puede usar div dentro del formulario, si está hablando de usar div en lugar de table, busque en Google sobre el diseño web sin tabla

Habib
fuente
3
¿De Verdad? referencia de w3schools?
Adonis K. Kakoulidis
2
@AdonisK., Sé todo acerca de por qué no se debe incluir una referencia a w3schools, pero creo que no merece un voto negativo, le pediría que vea esta discusión en Meta: meta.stackexchange.com/questions/120025/… También he actualizado la referencia de DIV de MDN
Habib
1

Como han dicho los demás, todo está bien, puedes hacerlo bien. Para mí, personalmente, trato de mantener una forma de estructura jerárquica con mis elementos con un divser el elemento principal más externo. Intento usar formularios únicos table p ule spaninternos. Simplemente me facilita el seguimiento de las relaciones entre padres e hijos dentro de mis páginas web.

JT Smith
fuente
0

Me di cuenta de que cada vez que iniciaba la etiqueta del formulario dentro de un div, los hermanos div subsiguientes no serían parte del formulario cuando inspeccionara (chrome inspect) en adelante, mi formulario nunca se enviaría. 

<div>
<form>
<input name='1st input'/>
</div>
<div>
<input name='2nd input'/>
</div>
<input type='submit'/>
</form>

Pensé que si ponía la etiqueta de formulario fuera de los DIV, funcionaría. La etiqueta del formulario debe colocarse al comienzo del DIV principal. Como se muestra a continuación. 

<form>
<div>
<input name='1st input'/>
</div>
<div>
<input name='2nd input'/>
</div>
<input type='submit'/>
</form>
Vincent Omondi
fuente
-5

¡Absolutamente no! Se procesará, pero no se validará. Usa una etiqueta.

No es correcto. No es accesible. Lo ves en algunos sitios web porque algunos desarrolladores son vagos. Cuando estoy contratando desarrolladores, esta es una de las primeras cosas que verifico en el trabajo de los candidatos. Los formularios son desagradables, pero tómate tu tiempo y aprende a hacerlos correctamente.

usuario2774731
fuente
-8

No, no es

<div>siempre se abusa de las etiquetas para crear un diseño web. Su propósito simbólico es dividir una sección / porción en la página para que se le pueda agregar o aplicar un estilo separado. [documento de w3schools] [W3C]

Depende en gran medida de lo que tenga somey anothertenga.

HTML5 tiene etiquetas de significado más lógico, en lugar de tener etiquetas de diseño simple. El section, header, nav, asidetodo tiene su propio significado semántico a la misma. Y se usan contra<div>

Starx
fuente
1
Tiendo a estar de acuerdo. Hay muchas cosas que puede hacer dentro de html. Pero debido a esas pautas flexibles, es por eso que nos encontramos excavando en el lío de los diseños web en tablas con código lleno de hacks. La única forma en que la web puede crecer es si continuamos siguiendo las nuevas pautas a medida que se nos presentan.
JT Smith
Bueno, necesito un área en la página web. Los usuarios hacen clic en estas áreas y establecen valores en las entradas del formulario. ¿Qué elemento HTML se adapta a este caso?
demas
1
@demas, Para el uso de su definición <select>encaja perfecto si se dan las opciones, si no <a>o <buttons>son buenas.
Starx
27
-1 estás totalmente equivocado. CADA SITIO GRANDE usa div dentro de un formulario. dio en html 5 ejemplos que no tienen nada que ver con la pregunta. muéstrame un sitio grande que no tenga div dentro del formulario. personas aquí en este sitio a través de respuestas sin verificar y engañar a otros usuarios
Royi Namir
4
la forma de no construir algo es mirar cómo lo hizo el código empresarial, como regla. si solo está usando esos div para contener texto, si el texto se aplica a los controles de formulario, use una etiqueta. si no, utilice una p. la semántica importa. la accesibilidad importa.
albert