Vos résultats de recherche

<fieldset>

Dans cet article

Résumé
Attributs
Exemples
1. Exemple 1 : Formulaire avec fieldset, legend et label
2. Exemple 2 : Simuler un <select> éditable par un fieldset de bouton radio et de champs texte
Spécifications
Compatibilité des navigateurs
Bugs
Voir aussi

Résumé

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

Catégories de contenu Contenu de flux, contenu sectionnant, élements associés aux formulaires, contenu tangible.
Contenu autorisé Un élément <legend> optionnel, suivi de contenu de flux.
Omission de balises Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires
Élément parents autorisés Tout élément acceptant du contenu de flux.
Interface DOM HTMLFieldSetElement

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

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

bug 504622 - Les éléments fieldset ne sont pas réduits en-dessous de leur largeur min-intrinsic
Bug WebKit 123507 - min-width: -webkit-min-content sur un élément fieldset
Discussion StackOverflow sur les méthodes de contournements pour ces bugs (en anglais)

Voir aussi

Les autres éléments liés aux formulaires HTML : <form>, <legend>, <label>, <button>, <select>, <datalist>, <optgroup>, <option>, <textarea>, <keygen>, <input>, <output>, <progress> et <meter>.

Étiquettes et contributeurs liés au document

Étiquettes :

Contributeurs à cette page : marie-ototoi, SphinxKnight, tregagnon, ethertank, teoli

Dernière mise à jour par : marie-ototoi, 13 févr. 2016 à 09:36:59

Voir aussi

<fieldset>
<input>
<label>
<legend>
<meter>
<optgroup>
<option>
<output>
<progress>
<select>
<textarea>
Éléments HTML
1. A
  1. <a>
  2. <abbr>
  3. ~~<acronym>~~
  4. <address>
  5. ~~<applet>~~
  6. <area>
  7. <article>
  8. <aside>
  9. <audio>
2. B
  1. <b>
  2. <base>
  3. ~~<basefont>~~
  4. <bdi>
  5. <bdo>
  6. ~~<bgsound>~~
  7. ~~<big>~~
  8. ~~<blink>~~
  9. <blockquote>
  10. <body>
  11. <br>
  12. <button>
3. C
  1. <canvas>
  2. <caption>
  3. ~~<center>~~
  4. <cite>
  5. <code>
  6. <col>
  7. <colgroup>
  8. <content>
4. D
  1. <data>
  2. <datalist>
  3. <dd>
  4. <del>
  5. <details>
  6. <dfn>
  7. ~~<dir>~~
  8. <div>
  9. <dl>
  10. <dt>
5. E
  1. <em>
  2. <embed>
6. F
  1. <fieldset>
  2. <figcaption>
  3. <figure>
  4. ~~<font>~~
  5. <footer>
  6. <form>
  7. ~~<frame>~~
  8. ~~<frameset>~~
7. G H
  1. <h1>
  2. <h2>
  3. <h3>
  4. <h4>
  5. <h5>
  6. <h6>
  7. <head>
  8. <header>
  9. ~~<hgroup>~~
  10. <hr>
  11. <html>
8. I
  1. <i>
  2. <iframe>
  3. <img>
  4. <input>
  5. <ins>
  6. ~~<isindex>~~
9. J K
  1. <kbd>
  2. <keygen>
10. L
  1. <label>
  2. <legend>
  3. <li>
  4. <link>
  5. ~~<listing>~~
11. M
  1. <main>
  2. <map>
  3. <mark>
  4. ~~<marquee>~~
  5. <menu>
  6. <menuitem>
  7. <meta>
  8. <meter>
12. N
  1. <nav>
  2. ~~<nobr>~~
  3. ~~<noframes>~~
  4. <noscript>
13. O
  1. <object>
  2. <ol>
  3. <optgroup>
  4. <option>
  5. <output>
14. P
  1. <p>
  2. <param>
  3. ~~<plaintext>~~
  4. <pre>
  5. <progress>
15. Q
  1. <q>
16. R
  1. <rp>
  2. <rt>
  3. <ruby>
17. S
  1. <s>
  2. <samp>
  3. <script>
  4. <section>
  5. <select>
  6. <shadow>
  7. <small>
  8. <source>
  9. ~~<spacer>~~
  10. <span>
  11. ~~<strike>~~
  12. <strong>
  13. <style>
  14. <sub>
  15. <summary>
  16. <sup>
18. T
  1. <table>
  2. <tbody>
  3. <td>
  4. <template>
  5. <textarea>
  6. <tfoot>
  7. <th>
  8. <thead>
  9. <time>
  10. <title>
  11. <tr>
  12. <track>
  13. ~~<tt>~~
19. U
  1. <u>
  2. <ul>
20. V
  1. <var>
  2. <video>
21. W
  1. <wbr>
22. X Y Z
  1. <xmp>

<fieldset>

Résumé

Attributs

Exemples

Exemple 1 : Formulaire avec fieldset, legend et label

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

Spécifications

Compatibilité des navigateurs

Bugs

Voir aussi

Étiquettes et contributeurs liés au document

Exemple 1 : Formulaire avec `fieldset`, `legend` et `label`

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