¿Por qué necesitamos una etiqueta fieldset?

129

¿Por qué necesitamos una etiqueta <fieldset>? Cualquiera que sea el propósito que atienda es probablemente un subconjunto de la etiqueta del formulario.¿Por qué necesitamos una etiqueta fieldset?

Miré hacia arriba algo de información sobre W3Schools, que dice:

La etiqueta <fieldset> se utiliza para los elementos relacionados con el grupo en una forma.
La etiqueta <fieldset> dibuja un cuadro alrededor de los elementos relacionados.

Más explicación para aquellos que están confundiendo "por qué existe en la especificación" para "lo que hace". Creo que la parte del dibujo es irrelevante, y no veo por qué necesitamos una etiqueta especial solo para agrupar algunos elementos relacionados en un formulario.

Fuente

2012-03-16 Eastern Monk

+25

¿Por qué es necesaria ninguna etiqueta? ¿Por qué necesitamos una etiqueta img cuando podemos crear una imagen de divs 1px con colores de fondo? – Oded

+104

Tenga en cuenta: [W3C] (http://www.w3.org/) no tiene nada *** que ver con w3schools. –

+65

No se refiere a w3schools. Solo use MDN: [fieldset @ MDN] (https://developer.mozilla.org/en/HTML/Element/fieldset). – Sirko

140

El, ejemplo práctico más obvia es:

<fieldset> 
 
    <legend>Colour</legend> 
 

 
    <input type="radio" name="colour" value="red" id="colour_red"> 
 
    <label for="colour_red">Red</label> 
 

 
    <input type="radio" name="colour" value="green" id="colour_green"> 
 
    <label for="colour_green">Green</label> 
 

 
    <input type="radio" name="colour" value="blue" id="colour_blue"> 
 
    <label for="colour_blue">Red</label> 
 

 
</fieldset>

Esto permite que cada botón de radio para ser etiquetado mientras que también proporciona una etiqueta para el grupo como un todo. Esto es especialmente importante cuando se usa tecnología asistencial (como un lector de pantalla) donde la asociación de los controles y su leyenda no puede estar implícita en la presentación visual.

Fuente

2012-03-16 16:57:49 Quentin

No tengo un enlace a mano, pero al parecer muchos lectores de pantalla leen el texto de la leyenda antes de * cada * etiqueta en el conjunto de campos. –

@Madmartigan - Eso es bueno, significa que usted sabe que todavía está tratando con el mismo conjunto de botones de radio. (También es una razón para asegurar que la leyenda sea * conciso *). – Quentin

"tecnología de asistencia" que tiene mucho sentido. –

Me resulta útil para el diseño de CSS y la asociación de etiquetas a los controles. Hace que sea fácil colocar un contenedor visual alrededor de un grupo de campos y alinear las etiquetas.

Fuente

2012-03-16 16:57:07

Fieldset organiza los elementos en formularios de forma lógica, pero también mejora la accesibilidad para quienes usan navegadores aurales. Fieldset es útil y, por lo tanto, era muy popular en el pasado en muchas aplicaciones, por lo que también lo implementaron en html.

Fuente

2012-03-16 16:57:47

Como se describe here, el objetivo de esta etiqueta es proporcionar claridad a la organización del formulario y permitir que un diseñador tenga acceso más fácil para decorar elementos del formulario.

Fuente

2012-03-16 16:58:06 dthagard

Es necesario para el acceso.

Salida: http://usability.com.au/2013/04/accessible-forms-1-labels-and-identification/

El HTML 4 elementos fieldset y legend le permiten a la presentación y organizar una forma grande con muchas áreas diferentes de interés de una manera lógica, sin usar tablas. La etiqueta fieldset se puede usar para crear cuadros alrededor de elementos seleccionados y la etiqueta legend dará un título a esos elementos. De esta forma, los elementos del formulario se pueden agrupar en categorías identificadas.

Diferentes navegadores pueden mostrar el borde predeterminado fieldset de diferentes maneras. Las hojas de estilo en cascada se pueden usar para eliminar el borde o cambiar su apariencia.

Fuente

2012-03-16 16:58:10

Uso fieldsets para agrupar entradas de formulario, cuando tengo una gran forma y quiero dividirla en una especie de asistente de formulario.

Estas mismas preguntas fueron respondidas here en SO.

Fuente

2012-03-16 16:58:42

Me gusta que cuando rodee sus radios con fieldset, y no ponga identificadores en las etiquetas de entrada de su botón de opción, entonces el grupo representado por fieldset se agrega a tabchain como si fuera un solo elemento.

Esto le permite desplazarse por un formulario, y cuando llega a un conjunto de campo, puede usar las teclas de flecha para cambiar la radio seleccionada, y luego tabular cuando haya terminado.

Además, no olvide la accesibilidad. Los lectores de pantalla necesitan fieldset + legend para comprender su formulario y poder leerlo para el usuario de una forma natural. Siéntase libre de desaparecer la leyenda si no desea que los usuarios con vista la vean. Diseñar y diseñar la leyenda con CSS es a veces peligroso, especialmente con navegadores heredados, por lo que me resulta invisible para usuarios de lectores de pantalla y agrego un span separado aria-hidden = "true" con el estilo de una etiqueta para Los usuarios con vista simplifican el estilo y lo mantienen accesible.

Fuente

2014-09-02 21:17:55 DWoldrich

'Esto le permite desplazarse por un formulario, y cuando llega a un conjunto de campo, puede usar las teclas de flecha para cambiar la radio seleccionada, y luego tabular cuando haya terminado. - Ese es el comportamiento predeterminado de las entradas de radio y no tiene nada que ver con los conjuntos de campo. Las casillas de verificación se comportan de manera diferente por defecto. –

Otra característica de fieldset es que deshabilitarla deshabilita todos los campos que contiene.

<fieldset disabled> 
 
    <legend>Disabled Fields</legend> 
 
    <input type="text" value="Sample"> 
 
    <textarea>Text Area</textarea> 
 
</fieldset> 
 

 
<fieldset> 
 
    <legend>Enabled Fields</legend> 
 
    <input type="text" value="Sample"> 
 
    <textarea>Text Area</textarea> 
 
</fieldset>

Fuente

2017-05-30 15:45:15

¿Por qué necesitamos una etiqueta fieldset?

Respuesta

Cuestiones relacionadas