mozilla
Vos résultats de recherche

    <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 Living Standard  
    HTML5 Candidate Recommendation  
    HTML 4.01 Specification Recommendation  

    Compatibilité des navigateurs

    Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Support de base (Oui) 1.0 (1.7 ou moins) (Oui) (Oui) (Oui)
    Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Support de base (Oui) 1.0 (1.0) (Oui) (Oui) (Oui)

    Étiquettes et contributeurs liés au document

    Étiquettes : 
    Contributeurs ayant participé à cette page : tregagnon, SphinxKnight, ethertank, teoli
    Dernière mise à jour par : SphinxKnight,