Elemento fieldset en HTML

Elemento fieldset en html

El elemento html fieldset se utiliza para agrupar varios elementos y banners (label) en un formulario en un documento HTML. Esto hace que sus formularios sean más fáciles de usar y más claros.

Un ejemplo de uso del elemento <fieldset> en el que el elemento es su <legend> primer child, y los dos elementos <input><label>:

< form  action = "test.php"  method = "post" > 
  < fieldset > 
    < legend > título </ legend > 
    < input  type = "radio"  id = "radio" > 
    < label  for = "radio" > haga clic aquí </ label > 
    < input type = "enviar" valor = "enviar" > 
   </ fieldset > 
</ form >

Etiqueta html fieldset

Clasificaciones de contenidoUn elemento organizativo, un elemento divisional y un elemento relacionado con el modelo.
Contenido permitidoUn elemento <legend> opcional seguido de contenido normal.
AcrónimoLas etiquetas de inicio o finalización no se pueden omitir.
Elementos del padreCualquier elemento que acepte contenido normativo.
Interfaz DOMOHTMLFieldSetElement

Soporte de navegadores

ChromeFirefoxEdgeSafariÓpera
SoportadoSoportadoSoportadoSoportadoSoportado

La función form no se admite en ningún navegador importante en el momento en que se escribió esta página.

Características

En este elemento html fieldset se pueden utilizar propiedades globales.

disabled

Si se establece esta propiedad booleana, todos los hijos del modelo están deshabilitados, excepto los hijos del elemento <legend> opcional.

Los elementos deshabilitados son elementos no modificables que no recibirán eventos como clics del mouse o foco, y los navegadores generalmente los muestran en plateado.

Ejemplo de uso de la propiedad disabled para deshabilitar todos los campos dentro del elemento <fieldset>:

< form  action = "test.php"  method = "post" > 
  < fieldset  deshabilitado > 
    < legend > título </ legend > 
    < input  type = "radio"  id = "radio" > 
    < label  for = "radio" > haga clic aquí </ label > 
    < input type  = "enviar" valor = "enviar" ></ fieldset > 
</ form >

form

Esta propiedad es el valor de propiedad del id elemento con el <form> que está relacionado este elemento, el valor predeterminado es el valor de propiedad del elemento padre id más cercano <form> de ese elemento.

Un ejemplo del uso de la propiedad form para especificar qué forma debe seguir un elemento <fieldset>:

< form  action = "test.php"  method = "post"  id = "form1" > 
</ form > 
< fieldset  form = "form1" > 
  < legend > título </ legend > 
  < input  type = "radio"  id = " radio " > 
    < label  for = " radio " > haga clic aquí </ label > 
    < input type  = "enviar" value = "enviar" > 
</ fieldset >

name

El nombre asociado con este grupo.

< fieldset  name = "myset" > 
  < legend > Título </ legend > 
  < input  type = "radio"  id = "radio" > 
  < label  for = "radio" > Haz clic en mí </ label > 
  < input  type = "submit" > 
</ fieldset >

Formato predeterminado

La mayoría de los navegadores muestran el elemento de <fieldset> establecer la propiedad display de block, y el establecimiento de márgenes ( margin-leftmargin-right), las notas al pie ( padding-toppadding-rightpadding-bottompadding-left), y el marco ( border-widthborder-styleborder-colorborder-image):

fieldset { 
  display: block;
  margin-left: 2px;
  margin-right: 2px;
  padding-top: 0.35em;
  padding-bottom: 0.625em;
  padding-left: 0.75em;
  padding-right: 0.75em;
  border-width: 2px;
  border-style: groove;
  border-color: threedface;
  border-image: initial;
}