<fieldset>: l'elemento "Campo impostato"

L' elemento HTML <fieldset> viene utilizzato per raggruppare diversi controlli e etichette (<label>) all'interno di un modulo Web.

Attributi

Gli attributi di questo elemento includono gli attributi globali.

disabled

Se questo attributo booleano è impostato, tutti i controlli modulo che sono discendenti di <fieldset>, sono disabilitati, il che significa che non sono modificabili e non verranno inviati insieme a <form>. Non riceveranno alcun evento di navigazione, come clic del mouse o eventi relativi alla messa a fuoco. Per impostazione predefinita, i browser visualizzano tali controlli in grigio. Nota che gli elementi del modulo all'interno dell'elemento <legend> non saranno disabilitati.

form

Questo attributo prende il valore id dell'attributo di un elemento <form> di cui vuoi che <fieldset> faccia parte, anche se non è all'interno del form. Si noti che l'utilizzo di questo è fonte di confusione: se si desidera che gli elementi <input> all'interno di <fieldset> siano associati al modulo, è necessario utilizzare l'attributo form direttamente su tali elementi. Puoi controllare quali elementi sono associati a un modulo tramite JavaScript, utilizzando HTMLFormElement.elements.

name

Il nome associato al gruppo.

Nota: la didascalia per il fieldset è data dal primo elemento <legend> nidificato al suo interno.

Stilizzare con CSS

Ci sono diverse considerazioni di stile speciali per <fieldset>.

Il suo valore predefinito di display è block e stabilisce un contesto di formattazione del blocco. Se <fieldset> ha uno stile display con un valore inline-level , si comporterà come inline-block, altrimenti si comporterà come block. Per impostazione predefinita è presente un bordo 2px groove che circonda il contenuto e una piccola quantità di riempimento predefinito. L'elemento ha per impostazione predefinita min-inline-size: min-content.

Ci sarà una casella anonima contenente il contenuto del <fieldset>, che eredita alcune proprietà da <fieldset>. Se <fieldset> ha uno stile con display: grid o display: inline-grid, la casella anonima sarà un contesto di formattazione della griglia. Se lo stile di <fieldset> è con display: flex o display: inline-flex, la casella anonima sarà un contesto di formattazione flessibile. In caso contrario, stabilisce un contesto di formattazione del blocco.

Puoi sentirti libero di modellare <fieldset> e <legend> in qualsiasi modo desideri adattarlo al design della tua pagina.

Esempi

Campo semplice

Questo esempio mostra un esempio molto semplice di un <fieldset>, con un <legend>, e un singolo controllo al suo interno.

<form action="#">
  <fieldset>
    <legend>Un semplice fieldset</legend>
    <input type="radio" id="radio">
    <label for="radio">Pulsante radio </label>
</form>

Fieldset disabilitato

Questo esempio mostra un <fieldset> disabilitato con due controlli al suo interno. Nota come entrambi i controlli sono disabilitati perché si trovano all'interno di un <fieldset> disabilitato.

<form action="#">
  <fieldset disabled>
    <legend>Un fieldset disabilitato</legend>
    <div>
      <label for="nome">Nome:</ label>
      <input type="text" id="nome" value="Chris">
    </div> 
    <div>
    <label for="pwd">Password:</ label>
      <input type="text" id="pwd" value="Wookie"> 
    </div> 
  </fieldset>
</form>

Liste utili