Tag HTML <fieldset>

Definizione e uso

<fieldset> Il tag viene utilizzato per raggruppare elementi correlati nei moduli.

<fieldset> Il tag disegna un riquadro intorno agli elementi correlati.

<legend> Il tag fieldset definisce un titolo per l'elemento.

Vedere anche:

Manuale di riferimento DOM HTML:Oggetto Fieldset

Esempio

Esempio 1

Raggruppa gli elementi correlati nel modulo:

<form action="/action_page.php">
  <fieldset>
    <legend>Informazioni personali:</legend>
    <label for="fname">Nome:</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">Cognome:</label>
    <input type="text" id="lname" name="lname"><br><br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br><br>
    <label for="birthday">Birthday:</label>
    <input type="date" id="birthday" name="birthday"><br><br>
    <input type="submit" value="Invia">
  </fieldset>
</form>

Prova tu stesso

Esempio 2

Imposta lo stile di <fieldset> e <legend> utilizzando CSS:

<html>
<head>
<style>
fieldset {
  colore di sfondo: #eeeeee;
}
legend {
  colore di sfondo: grigio;
  colore: bianco;
  riempimento: 5px 10px;
}
input {
  margine: 5px;
}
</style>
</head>
<body>
<form action="/action_page.php">
  <fieldset>
    <legend>Informazioni personali:</legend>
    <label for="fname">Nome:</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">Cognome:</label>
    <input type="text" id="lname" name="lname"><br><br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br><br>
    <label for="birthday">Compleanno:</label>
    <input type="date" id="birthday" name="birthday"><br><br>
    <input type="submit" value="Invia">
  </fieldset>
</form>
</body>
</html>

Prova tu stesso

Suggerimenti e note

Suggerimento:Il tag <legend> viene utilizzato per definire il titolo dell'elemento <fieldset>.

Proprietà

Proprietà Valore Descrizione
disabled disabled Definire che un gruppo di elementi del modulo deve essere disabilitato.
form form_id Definire a quale modulo appartiene il set di campi.
name Testo Definire il nome del set di campi.

Proprietà globali

<fieldset> Il tag supporta anche Proprietà globali nell'HTML。

Attributo evento

<fieldset> Il tag supporta anche Attributo evento nell'HTML。

Impostazioni CSS predefinite

La maggior parte dei browser visualizzerà i seguenti valori predefiniti: <fieldset> Elemento:

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: 2px groove (valore interno);
}

Supporto browser

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Supporto Supporto Supporto Supporto Supporto