diff options
Diffstat (limited to 'files/fr/web/html/element/fieldset/index.html')
| -rw-r--r-- | files/fr/web/html/element/fieldset/index.html | 183 |
1 files changed, 73 insertions, 110 deletions
diff --git a/files/fr/web/html/element/fieldset/index.html b/files/fr/web/html/element/fieldset/index.html index acbab754cb..3187ec76bd 100644 --- a/files/fr/web/html/element/fieldset/index.html +++ b/files/fr/web/html/element/fieldset/index.html @@ -3,74 +3,74 @@ title: '<fieldset> : l''élément pour les ensembles de champs' slug: Web/HTML/Element/Fieldset tags: - Element - - Formulaires + - Forms - HTML + - HTML forms - Reference - Web translation_of: Web/HTML/Element/fieldset +browser-compat: html.elements.fieldset --- <div>{{HTMLRef}}</div> -<p>L'élément HTML <strong><code><fieldset></code></strong> est utilisé afin de regrouper plusieurs contrôles interactifs ainsi que des étiquettes ({{HTMLElement("label")}}) dans un formulaire web.</p> +<p class="summary">L'élément HTML <strong><code><fieldset></code></strong> est utilisé afin de regrouper plusieurs contrôles interactifs ainsi que des étiquettes (<a href="/fr/docs/Web/HTML/Element/Label"><code><label></code></a>) dans un formulaire HTML.</p> <div>{{EmbedInteractiveExample("pages/tabbed/fieldset.html", "tabbed-standard")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> +<p>Comme on peut le voir dans l'exemple ci-avant, l'élément <code><fieldset></code> permet de regrouper une partie d'un formulaire HTML et d'associer une légende (<a href="/fr/docs/Web/HTML/Element/Legend"><code><legend></code></a>) décrivant ce groupe. Cet élément utilise quelques attributs et notamment <code>form</code> dont la valeur correspond à la valeur de l'attribut <code>id</code> d'un élément <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a> de la même page. De cette façon, on peut avoir un élément <code><fieldset></code> qui soit rattaché à un formulaire mais qui ne soit pas imbriqué dans ce formulaire. L'attribut <code>disabled</code> permet de désactiver l'élément <code><fieldset></code> ainsi que l'ensemble de son contenu via une seule valeur.</p> -<p>Comme on peut le voir dans l'exemple ci-avant, l'élément <code><fieldset></code> permet de regrouper une partie d'un formulaire HTML et d'associer une légende ({{htmlelement("legend")}}) décrivant ce groupe. Cet élément utilise quelques attributs et notamment <code>form</code> dont la valeur correspond à la valeur de l'attribut <code>id</code> d'un élément {{htmlelement("form")}} de la même page. De cette façon, on peut avoir un élément <code><fieldset></code> qui soit rattaché à un formulaire mais qui ne soit pas imbriqué dans ce formulaire. L'attribut <code>disabled</code> permet de désactiver l'élément <code><fieldset></code> ainsi que l'ensemble de son contenu via une seule valeur.</p> +<h2 id="attributes">Attributs</h2> -<h2 id="Attributs">Attributs</h2> - -<p>Cet élément prend en charge <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> +<p>Cet élément prend en charge <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p> <dl> - <dt>{{htmlattrdef("disabled")}}{{HTMLVersionInline(5)}}</dt> - <dd>Si cet attribut booléen est utilisé, les contrôles de formulaires des éléments descendants sont désactivés (ils ne peuvent pas être édités). Bien qu'ils ne soient pas éditables, les données de ces contrôles seront envoyées avec le formulaire. Ces contrôles ne recevront pas les évènements liés à la navigations (tels que ceux liés aux clics ou au focus). La plupart du temps, ces contrôles désactivés apparaissent comme grisés. On notera que les éléments de formulaires au sein de l'élément {{HTMLElement("legend")}} ne seront pas désactivés.</dd> - <dt>{{htmlattrdef("form")}}</dt> - <dd>La valeur de cet attribut correspond à la valeur de l'attribut <code>id</code> de l'élément {{HTMLElement("form")}} auquel il est rattaché. La valeur par défaut est l'identifiant du plus proche élément {{HTMLElement("form")}} dont l'élément <code><fieldset></code> est le descendant.</dd> - <dt>{{htmlattrdef("name")}}</dt> - <dd>Le nom associé au groupe. - <div class="note"><strong>Note :</strong> L'étiquette du groupe de contrôle est donné par le premier élément enfant {{HTMLElement("legend")}} du <code><fieldset></code>.</div> - </dd> + <dt><code id="attr-disabled">disabled</code></dt> + <dd>Si cet attribut booléen est utilisé, les contrôles de formulaires des éléments descendants sont désactivés (ils ne peuvent pas être édités). Bien qu'ils ne soient pas éditables, les données de ces contrôles seront envoyées avec le formulaire. Ces contrôles ne recevront pas les évènements liés à la navigation (tels que ceux liés aux clics ou au focus). La plupart du temps, ces contrôles désactivés apparaissent comme grisés. On notera que les éléments de formulaires au sein de l'élément <a href="/fr/docs/Web/HTML/Element/Legend"><code><legend></code></a> ne seront pas désactivés.</dd> + <dt><code id="attr-form">form</code></dt> + <dd>La valeur de cet attribut correspond à la valeur de l'attribut <code>id</code> de l'élément <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a> auquel il est rattaché. La valeur par défaut est l'identifiant du plus proche élément <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a> dont l'élément <code><fieldset></code> est le descendant. Attention, cet attribut peut être source de confusion, tout élément <code><input></code> contenu au sein du <code><fieldset></code> et qui devra être associé au formulaire devra également avoir l'attribut <code>form</code> explicitement défini. En JavaScript, on pourra utiliser la propriété <a href="/fr/docs/Web/API/HTMLFormElement/elements"><code>HTMLFormElement.elements</code></a> pour vérifier le bon rattachement des éléments au formulaire.</dd> + <dt><code id="attr-name">name</code></dt> + <dd>Le nom associé au groupe. + <div class="note"><strong>Note :</strong> L'étiquette du groupe de contrôle est donné par le premier élément enfant <a href="/fr/docs/Web/HTML/Element/Legend"><code><legend></code></a> du <code><fieldset></code>.</div> + </dd> </dl> -<h2 id="Mise_en_forme_avec_CSS">Mise en forme avec CSS</h2> +<h2 id="styling_with_css">Mise en forme avec CSS</h2> <p>L'élément <code><fieldset></code> est quelque peu particulier pour la mise en forme.</p> -<p>La valeur initiale de la propriété {{cssxref("display")}} pour cet élément est <code>block</code> et l'élément crée un contexte de formatage de bloc. Si l'élément <code><fieldset></code> est mis en forme avec une valeur <code>display</code> qui correspond à un style en ligne, celui-ci se comportera comme <code>inline-block</code> et sinon comme <code>block</code>. Par défaut, une bordure de 2 pixels ondulée entoure le contenu de l'élément et il y a un léger <em>padding</em>. Par défaut, l'élément a <code>min-inline-size: min-content</code>.</p> +<p>La valeur initiale de la propriété <a href="/fr/docs/Web/CSS/display"><code>display</code></a> pour cet élément est <code>block</code> et l'élément crée un <a href="/fr/docs/Web/Guide/CSS/Block_formatting_context">contexte de formatage de bloc</a>. Si l'élément <code><fieldset></code> est mis en forme avec une valeur <code>display</code> qui correspond à un style en ligne, celui-ci se comportera comme <code>inline-block</code> et sinon comme <code>block</code>. Par défaut, une bordure de 2 pixels ondulée entoure le contenu de l'élément et il y a un léger <em>padding</em>. Par défaut, l'élément a <code>min-inline-size: min-content</code>.</p> -<p>Si un élément <code><legend></code> est présent, il est placé au dessus de la bordure située au début de l'axe de bloc. L'élément <code><legend></code> se réduit si besoin et établit également un contexte de formatage. Sa valeur <code>display</code> utilisée est <code>block</code> (autrement dit, on pourra le cibler avec <code>display: inline</code>, il continuera de se comporter comme <code>block</code>).</p> +<p>Si un élément <a href="/fr/docs/Web/HTML/Element/Legend"><code><legend></code></a> est présent, il est placé au-dessus de la bordure située au début de l'axe de bloc. L'élément <code><legend></code> se réduit si besoin et établit également un contexte de formatage. Sa valeur <code>display</code> utilisée est <code>block</code> (autrement dit, on pourra le cibler avec <code>display: inline</code>, il continuera de se comporter comme <code>block</code>).</p> <p>Une boîte anonyme contiendra le contenu de <code><fieldset></code> et héritera de certaines propriétés de <code><fieldset></code>. Si l'élément <code><fieldset></code> est mis en forme avec <code>display: grid</code> ou <code>display: inline-grid</code>, la boîte anonyme aura un contexte de formatage de grille. Si <code><fieldset></code> est mis en forme avec <code>display: flex</code> ou <code>display: inline-flex</code>, la boîte anonyme aura un contexte de formatage flexible. Dans tous les autres cas, la boîte anonyme aura un contexte de formatage de bloc.</p> -<div class="note"> -<p><strong>Note : </strong>À l'heure où nous écrivons ces lignes, Microsoft Edge et Google Chrome contiennent des bogues qui empêchent d'utiliser <a href="/fr/docs/Glossaire/Flexbox">les boîtes flexibles</a> et <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">les grilles</a> à l'intérieur d'un élément {{HTMLElement("fieldset")}}. <a href="https://github.com/w3c/csswg-drafts/issues/321">Cette <em>issue</em> GitHub</a> fournit les liens vers les différents bugs.</p> -</div> +<p>N'hésitez pas à donner au <code><fieldset></code> et au <code><legend></code> le style que vous souhaitez pour l'adapter au design de votre page.</p> + +<h2 id="examples">Exemples</h2> -<h2 id="Exemples">Exemples</h2> +<h3 id="simple_fieldset">Exemple simple</h3> -<h3 id="Exemple_simple">Exemple simple</h3> +<p>Cet exemple montre un <code><fieldset></code> très simple, avec un <code><legend></code>, et un seul contrôle à l'intérieur.</p> -<h4 id="HTML">HTML</h4> +<h4 id="html">HTML</h4> -<pre class="brush: html"><form action="test.php" method="post"> +<pre class="brush: html"><form action="#"> <fieldset> - <legend>Titre</legend> + <legend>Titre simple</legend> <input type="radio" name="radio" id="radio"> - <label for="radio">Cliquez moi</label> + <label for="radio">L'esprit de la radio</label> </fieldset> </form></pre> -<h4 id="Résultat">Résultat</h4> +<h4 id="result">Résultat</h4> -<p>{{EmbedLiveSample("Exemple_simple","100%","80")}}</p> +<p>{{EmbedLiveSample('simple_fieldset', '100%', '80')}}</p> -<h3 id="<fieldset>_désactivé"><code><fieldset></code> désactivé</h3> +<h3 id="disabled_fieldset"><fieldset> désactivé</h3> <p>Dans cet exemple, on voit comment l'attribut <code>disabled</code> permet de désactiver un élément <code><fieldset></code> et l'ensemble de ses éléments par la même occasion.</p> -<h4 id="HTML_2">HTML</h4> +<h4 id="html_2">HTML</h4> <pre class="brush: html"><form action="#"> <fieldset disabled> @@ -86,95 +86,58 @@ translation_of: Web/HTML/Element/fieldset </fieldset> </form></pre> -<h4 id="Résultat_2">Résultat</h4> +<h4 id="result_2">Résultat</h4> -<p>{{EmbedLiveSample('fieldset_désactivé', '100%', '110') }}</p> +<p>{{EmbedLiveSample('disabled_fieldset', '100%', '110') }}</p> -<h2 id="Résumé_technique">Résumé technique</h2> +<h2 id="technical_summary">Résumé technique</h2> <table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu">Catégories de contenu</a></th> - <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document#Racines_de_sectionnement">racine de sectionnement</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_associé_aux_formulaires">contenu énuméré</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_associé_aux_formulaires">élément relatif aux formulaires</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td> - </tr> - <tr> - <th scope="row">Contenu autorisé</th> - <td>Un éventuel élément {{HTMLElement("legend")}} suivi par du contenu de flux.</td> - </tr> - <tr> - <th scope="row">Omission de balises</th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row">Parents autorisés</th> - <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>.</td> - </tr> - <tr> - <th scope="row">Rôles ARIA autorisés</th> - <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td> - </tr> - <tr> - <th scope="row">Interface DOM</th> - <td>{{domxref("HTMLFieldSetElement")}}</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></th> + <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#sectioning_root">racine de sectionnement</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#form_listed">contenu énuméré</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#form_listed">élément relatif aux formulaires</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content">contenu tangible</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Un éventuel élément <a href="/fr/docs/Web/HTML/Element/Legend"><code><legend></code></a> suivi par du contenu de flux.</td> + </tr> + <tr> + <th scope="row">Omission de balises</th> + <td>Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires.</td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td>Tout élément qui accepte du <a href="/fr/docs/Web/Guide/HTML/Content_categories#contenu_de_flux">contenu de flux</a>.</td> + </tr> + <tr> + <th scope="row">Rôle ARIA implicite</th> + <td><a href="https://w3c.github.io/aria/#group"><code>group</code></a></td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td><a href="https://w3c.github.io/aria/#radiogroup"><code>radiogroup</code></a>, <a href="https://w3c.github.io/aria/#presentation"><code>presentation</code></a>, <a href="https://w3c.github.io/aria/#none"><code>none</code></a></td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td><a href="/fr/docs/Web/API/HTMLFieldSetElement"><code>HTMLFieldSetElement</code></a></td> + </tr> + </tbody> </table> -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'forms.html#the-fieldset-element', '<fieldset>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Définition de l'élément <code>fieldset</code>.</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'forms.html#the-fieldset-element', '<fieldset>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.10', '<fieldset>')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +<h2 id="specifications">Spécifications</h2> -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +<p>{{Specifications}}</p> -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> -<p>{{Compat("html.elements.fieldset")}}</p> +<p>{{Compat}}</p> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="see_also">Voir aussi</h2> <ul> - <li>Les éléments HTML relatifs aux formulaires : - <ul> - <li>{{HTMLElement("form")}}</li> - <li>{{HTMLElement("legend")}}</li> - <li>{{HTMLElement("label")}}</li> - <li>{{HTMLElement("button")}}</li> - <li>{{HTMLElement("select")}}</li> - <li>{{HTMLElement("datalist")}}</li> - <li>{{HTMLElement("optgroup")}}</li> - <li>{{HTMLElement("option")}}</li> - <li>{{HTMLElement("textarea")}}</li> - <li>{{HTMLElement("keygen")}}</li> - <li>{{HTMLElement("input")}}</li> - <li>{{HTMLElement("output")}}</li> - <li>{{HTMLElement("progress")}}</li> - <li>{{HTMLElement("meter")}}</li> - </ul> - </li> + <li>L'élément <a href="/fr/docs/Web/HTML/Element/Legend"><code><legend></code></a></li> + <li>L'élément <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a></li> + <li>L'élément <a href="/fr/docs/Web/HTML/Element/Label"><code><label></code></a></li> + <li>L'élément <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a></li> </ul> |