mozilla

<fieldset>

Résumé

L'élément HTML <fieldset> est utilisé pour regrouper plusieurs contrôles interactifs ainsi que des étiquettes (<label>) dans un formulaire web.

Attributs

Cet élément supporte les attributs globaux.

disabled HTML5
La présence de cet attribut booléen indique que les contrôles de formulaire enfants sont désactivés, c'est-à-dire non modifiables. Ils apparaîssent souvent en grisé dans les navigateurs et ne reçoivent plus les événements de navigation comme un clic de souris ou ceux en relation avec le focus.
form HTML5
Cet attribut contient la valeur de l'attribut id de l'élément <form> auquel celui-ci est rattaché. Par défaut, il est rattaché à l'élément <form> qui est son plus proche ancêtre.
name HTML5
Le nom associé au groupe, qui est soumis avec les données du formulaire.
L'étiquette du groupe de contrôle est donné par le premier élément enfant <legend> du <fieldset>.

Exemples

Exemple 1 : Formulaire avec fieldset, legend et label

<form action="test.php" method="post">
  <fieldset>
    <legend>Titre</legend>
    <input type="radio" name="radio" id="radio"> <label for="radio">Cliquez moi</label>
  </fieldset>
</form>

Exemple 2 : Simuler un <select> éditable par un fieldset de bouton radio et de champs texte

L'exemple suivant est fait de pur HTML et CSS. Il n'y a pas de code JavaScript.

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Editable [pseudo]select éditable</title>
<style type="text/css">

/* Generic form fields */

fieldset.elist, input[type="text"], textarea, select, option, fieldset.elist ul, fieldset.elist > legend, fieldset.elist input[type="text"], fieldset.elist > legend:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

input[type="text"] {
    padding: 0 20px;
}

textarea {
    width: 500px;
    height: 200px;
    padding: 20px;
}

textarea, input[type="text"], fieldset.elist ul, select, fieldset.elist > legend {
    border: 2px #cccccc solid;
    border-radius: 10px;
}

input[type="text"], fieldset.elist, select, fieldset.elist > legend {
    height: 32px;
    font-family: Tahoma;
    font-size: 14px;
}

input[type="text"]:hover, textarea:hover, select:hover, fieldset.elist:hover > legend {
    background-color: #ddddff;
}

select {
    padding: 4px 20px;
}

option {
    height: 30px;
    padding: 5px 4px;
}

option:not(:checked), textarea:focus {
    background-color: #ffcccc;
}

fieldset.elist > legend:after, fieldset.elist label {
    height: 28px;
}

input[type="text"], fieldset.elist {
    width: 316px;
}

input[type="text"]:focus {
    background: #ffcccc url("data:image/gif;base64,R0lGODlhEAAQANU5APnoxuvr6+uxPdvb2+rq6ri4uO7qxunp6dPT06SHV+/rx8vLy+nezLO0sbe3t9Ksas+qaaCEV8rKyp2dnf39/QAAAK6ursifZHFxcc/Qzu3mxYyMjExCJnV1dc6maO7u7o+Pj2tXNoaGhtfDpKCDVu3lxM+tcaKEV9bW1qOFVWNjY8KrisTExNra2nBbObGxsby8vO/mu7Kyso9ZAuzs7MSgAIiKhf///8zMzP///wAAAAAAAAAAAAAAAAAAAAAAACH5BAEAADkALAAAAAAQABAAAAaXwJxwSCwOYzWkMpkkZmoAqDQaJdpqAqw2m53NRjlboAarFczomcE0C99o8DgNMVM8Tm3bbYDr9x11DwkzDG5yc2oQJIRCenx/MxoeETM2Q3pxATMlF4MYlo17OAsdLispMyAioIY0BzMcITMTKBasjgssFTMqGxItMjYUoTQBBAQHxgE0wZcfMtDRMi/QrA022NnaNg1CQQA7") no-repeat 2px center !important;
}

input[type="text"]:focus, textarea:focus, select:focus, fieldset.elist > legend {
    border: 2px #ccaaaa solid;
}

fieldset {
    border: 2px #af3333 solid;
    border-radius: 10px;
}

/* Editable [pseudo]select (i.e. fieldsets with [class=elist]) */

fieldset.elist {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    overflow: visible;
    padding: 0;
    margin: 0;
    border: none;
}

fieldset.elist ul {
    position: absolute;
    width: 100%;
    max-height: 320px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background-color: transparent;
}

fieldset.elist:hover ul {
    background-color: #ffffff;
    border: 2px #af3333 solid;
    left: 2px;
    overflow: auto;
}

fieldset.elist ul > li {
    list-style-type: none;
    background-color: transparent;
}

fieldset.elist label {
    display: none;
    width: 100%;
}

fieldset.elist input[type="text"] {
    width: 100%;
    height: 30px;
    line-height: 30px;
    border: none;
    background-color: transparent;
    border-radius: 0;
}

fieldset.elist > legend {
    display: block;
    margin: 0;
    padding: 0 0 0 5px;
    position: absolute;
    width: 100%;
    cursor: default;
    background-color: #ccffcc;
    line-height: 30px;
    font-style: italic;
}

fieldset.elist:hover > legend {
    position: relative;
    overflow: hidden;
}

fieldset.elist > legend:after {
    width: 20px;
    content: "\2335";
    float: right;
    text-align: center;
    border-left: 2px #cccccc solid;
    font-style: normal;
    cursor: default;
}

fieldset.elist:hover > legend:after {
    background-color: #99ff99;
}

fieldset.elist ul input[type="radio"] {
    display: none;
}

fieldset.elist input[type="radio"]:checked ~ label {
    display: block;
    width: 292px;
    background-color: #ffffff;
}

fieldset.elist:hover input[type="radio"]:checked ~ label {
    width: 100%;
}

fieldset.elist:hover label {
    display: block;
    height: 100%;
}

fieldset.elist label:hover {
    background-color: #3333ff !important;
}

fieldset.elist:hover input[type="radio"]:checked ~ label {
    background-color: #aaaaaa;
}

</style>

</head>
<body>

<form name="tshirt" method="get" action="test.php">

<fieldset>
    <legend>Order a T-Shirt</legend>
    <p>Write your name (simple textbox): <input type="text" name="myname" /></p>
    <p>Choose your size (simple select):
    <select name="size">
        <option value="s">Small</option>
        <option value="m">Medium</option>
        <option value="l">Large</option>
        <option value="xl">Extra Large</option>
    </select></p>
    <div>What address do you want to use? (editabile pseudoselect)
    <fieldset class="elist">
        <legend>Address&hellip;</legend>
        <ul>
            <li><input type="radio" name="address-chosen" value="1" id="address-switch_1" checked /><label for="address-switch_1"><input type="text" name="address-item_1" value="19 Quaker Ridge Rd. Bethel CT 06801" /></label></li>
            <li><input type="radio" name="address-chosen" value="2" id="address-switch_2" /><label for="address-switch_2"><input type="text" name="address-item_2" value="1000 Coney Island Ave. Brooklyn NY 11230" /></label></li>
            <li><input type="radio" name="address-chosen" value="3" id="address-switch_3" /><label for="address-switch_3"><input type="text" name="address-item_3" value="2962 Dunedin Cv. Germantown TN 38138" /></label></li>
            <li><input type="radio" name="address-chosen" value="4" id="address-switch_4" /><label for="address-switch_4"><input type="text" name="address-item_4" value="915 E 7th St. Apt 6L. Brooklyn NY 11230" /></label></li>
        </ul>
    </fieldset>
    </div>
    <p>Write a comment:<br />
    <textarea name="comment"></textarea></p>
    <p><input type="reset" value="Reset" /> <input type="submit" value="Send!" /></p>
</fieldset>

</form>

</body>
</html>

Voir l'exemple en action

Spécifications

Spécification Statut Commentaires
WHATWG HTML Living Standard
La définition de '<fieldset>' dans cette spécification.
Standard évolutif Définition de l'élément fieldset
WHATWG HTML Living Standard Standard évolutif Suggestion de l'affichage par défaut à utiliser pour le rendu des éléments fieldset et legend
HTML5
La définition de '<fieldset>' dans cette spécification.
Recommendation  
HTML 4.01 Specification
La définition de '<fieldset>' dans cette spécification.
Recommendation  

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple (Oui) 1.0 (1.7 ou moins) (Oui) (Oui) (Oui)
attribut disabled (Oui) (Oui) ? [1] ? (Oui)
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple (Oui) 1.0 (1.0) (Oui) (Oui) (Oui)
attribut disabled ? ? ? ? ?

Contrairement à la plupart des autres éléments, la spécification WHATWG HTML pour l'affichage suggère que la mise en forme par défaut de <fieldset> utilise min-width: min-content et la plupart des navigateurs implémentent cette suggestion (ou quelque chose d'approchant).

[1] : Tous les descendants d'un fieldset désactivé qui sont des contrôles de formulaires ne sont pas désactivés correctement avec IE11 : voir le bug 817488 : input[type="file"] not disabled inside disabled fieldset et le bug 962368: Can still edit input[type="text"] within fieldset[disabled].

Bugs

Voir aussi

Étiquettes et contributeurs liés au document

Contributeurs à cette page : teoli, tregagnon, ethertank, SphinxKnight
Dernière mise à jour par : SphinxKnight,