html - form - ¿Cuáles son las ventajas de usar la etiqueta fieldset?

formularios html

Question

¿Cuáles son las ventajas de usar la etiqueta <fieldset> ?

Realmente no entiendo para qué se usa.

Answer 1

Las formas a menudo se dividen en varios conjuntos de campos.

La etiqueta fieldset le permite agrupar lógicamente conjuntos de campos para que sus formularios sean más descriptivos.

También notará que puede usar el fieldset para estilizar sus formularios y mostrar esas asociaciones lógicas entre campos.

Al igual que las formas que se encuentran en el mundo "real".

Las "ventajas" de usar un fieldset son que le permiten marcar sus datos (en este caso, un formulario) de la manera más semántica disponible. Considere que colocar sus campos en un conjunto de campos es más descriptivo que colocar sus campos en un div. El div no le dice nada sobre la relación entre los campos, un fieldset le dice que hay una relación.

Es un principio similar a muchos de los nuevos conjuntos de etiquetas HTML5. <footer> por ejemplo, le brinda más información sobre el significado de los datos que contiene dentro de un <div> ambiguo.

Answer 2

Si echa un vistazo a la especificación HTML5 para desarrolladores :

http://developers.whatwg.org/forms.html#the-fieldset-element

El elemento fieldset representa un conjunto de controles de formulario agrupados opcionalmente bajo un nombre común.

(Hay mucha más información si sigues el enlace)

Combinado con el elemento de legend , le permite hacer esto fácilmente, lo cual es difícil de recrear sin usar fieldset / legend :

Answer 3

Te permite agrupar un conjunto de campos relacionados y darles una leyenda.

<fieldset>
<legend>Gender</legend>
<input type="radio" name="gender" id="male" value="male">
<label for="male">Male</label>
<input type="radio" name="gender" id="female" value="female">
<label for="female">Female</label>
<fieldset>
<fieldset>
<legend>Address</legend>
<label for="line1">Line 1</label>
<input name="address1" id="line1">
<label for="line2">Line 2</label>
<input name="address2" id="line2">
<label for="town">Town</label>
<input name="town" id="town">
<label for="country">country/label>
<input name="country" id="country">
</fieldset>

Answer 4

Ustedes agrupan cosas con eso. Lo que es útil si necesita acceder a elementos para CSS o JavaScript, y no quiere pasar por la molestia de asignar ID a todo.

Además, la leyenda se ve bastante bien.