Tag HTML <fieldset>

Le tag <fieldset> regroupe visuellement les éléments logiquement liés du formulaire, ce qui définit le tag HTML <form>. Dans le navigateur par défaut, le contenu du tag est attribué par une bordure et comporte des retraits internes de tous les côtés.

Pour définir le titre du groupe logique définit par l’élément <fieldset>, on utilise le tag <legend>.

Syntaxe

Le contenu du tag est écrit entre le tag ouvrant(<fieldset>) et le tag fermant (</fieldset>).

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div { 
        margin-bottom: 10px; 
      }
      label { 
        display: inline-block; 
        width: 120px; 
      }
    </style>
  </head>
  <body>
    <form>
      <fieldset style="background:#e1eff2;">
        <legend style="padding:20px 0; font-size:20px;">Informations personnelles:</legend>
        <div><label>Nom:</label><input type="text"></div>
        <div><label> Email:</label><input type="text"></div>
        <div><label>Date de naissance:</label><input type="text"></div>
        <div><label>Lieu de naissance:</label><input type="text"></div>
      </fieldset>
    </form>
  </body>
</html>

Résultat

Attributs

Attribut Valeur Description
disabled dsabled Indique, que le groupe d'éléments de formulaire associés doit être désactivé.
form form_id Définit un ou plusieurs identificateurs de formulaire (id), auxquels appartient l'ensemble d'éléments associés. S'il y a plusieurs identifiants, ils doivent être séparés par des espaces.
name text Définit un nom pour le groupe d'éléments joint. Le nom dans le navigateur n'est pas affiché, il est utilisé dans le travail des scripts.

Le tag <fieldset> supporte également les Attributs globaux et les Attributs d'événements.

Comment styler le tag HTML <fieldset> ?

Propriétés communes pour modifier le poids visuel/emphase/taille du texte dans le tag <fieldset>:

Coloration du texte dans le tag HTML <fieldset>:

Styles de mise en page du texte pour la tag HTML <fieldset>:

Autres propriétés utiles pour le tag HTML <fieldset>:


Support de Navigateurs



Trouvez-vous cela utile?

Articles Associées