<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
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>