diff options
Diffstat (limited to 'files/fr/web/html/element/option/index.md')
| -rw-r--r-- | files/fr/web/html/element/option/index.md | 163 |
1 files changed, 78 insertions, 85 deletions
diff --git a/files/fr/web/html/element/option/index.md b/files/fr/web/html/element/option/index.md index 469756c960..6ad5a657bd 100644 --- a/files/fr/web/html/element/option/index.md +++ b/files/fr/web/html/element/option/index.md @@ -9,108 +9,101 @@ tags: - Web translation_of: Web/HTML/Element/option --- -<div>{{HTMLRef}}</div> +{{HTMLRef}} -<p>L'élément HTML <strong><code><option></code></strong>, utilisé dans un formulaire, permet de représenter un contrôle au sein d'un élément {{HTMLElement("select")}}, {{HTMLElement("optgroup")}} ou {{HTMLElement("datalist")}}. Cet élément peut donc représenter des éléments d'un menu dans un document HTML.</p> +L'élément HTML **`<option>`**, utilisé dans un formulaire, permet de représenter un contrôle au sein d'un élément {{HTMLElement("select")}}, {{HTMLElement("optgroup")}} ou {{HTMLElement("datalist")}}. Cet élément peut donc représenter des éléments d'un menu dans un document HTML. -<div>{{EmbedInteractiveExample("pages/tabbed/option.html", "tabbed-standard")}}</div> +{{EmbedInteractiveExample("pages/tabbed/option.html", "tabbed-standard")}} -<h2 id="Attributs">Attributs</h2> +## Attributs -<p>Comme tous les autres éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> +Comme tous les autres éléments HTML, cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_universels). -<dl> - <dt>{{htmlattrdef("disabled")}}</dt> - <dd>Si cet attribut booléen est défini, l'option ne peut pas être sélectionnée. Généralement, les navigateurs affichent l'option grisée et celle-ci ne reçoit pas les évènements de navigation (liés aux clics ou au focus par exemple). Si cet attribut n'est pas défini, l'élément peut tout de même être désactivé si un de ses ancêtres est un élément {{HTMLElement("optgroup")}} désactivé.</dd> - <dt>{{htmlattrdef("label")}}</dt> - <dd>La valeur de cet attribut correspond au texte affiché pour expliquer l'option. Si cet attribut n'est pas défini, sa valeur correspondra à celle du texte contenu dans l'élément.</dd> - <dt>{{htmlattrdef("selected")}}</dt> - <dd>S'il est présent, cet attribut booléen indique que l'option est sélectionnée à l'état initial. Si l'élément <code><option></code> est un élément descendant d'un élément {{HTMLElement("select")}} dont l'attribut {{htmlattrxref("multiple", "select")}} n'est pas activé, seul une <code><option></code> de cet élément {{HTMLElement("select")}} peut être sélectionnée de cette façon.</dd> - <dt>{{htmlattrdef("value")}}</dt> - <dd>Le contenu de cet attribut représente la valeur qu'on souhaite envoyer au formulaire lorsque l'option est sélectionnée. Si cet attribut n'est pas défini, la valeur sera le contenu texuel de l'élément <code><option></code>.</dd> -</dl> +- {{htmlattrdef("disabled")}} + - : Si cet attribut booléen est défini, l'option ne peut pas être sélectionnée. Généralement, les navigateurs affichent l'option grisée et celle-ci ne reçoit pas les évènements de navigation (liés aux clics ou au focus par exemple). Si cet attribut n'est pas défini, l'élément peut tout de même être désactivé si un de ses ancêtres est un élément {{HTMLElement("optgroup")}} désactivé. +- {{htmlattrdef("label")}} + - : La valeur de cet attribut correspond au texte affiché pour expliquer l'option. Si cet attribut n'est pas défini, sa valeur correspondra à celle du texte contenu dans l'élément. +- {{htmlattrdef("selected")}} + - : S'il est présent, cet attribut booléen indique que l'option est sélectionnée à l'état initial. Si l'élément `<option>` est un élément descendant d'un élément {{HTMLElement("select")}} dont l'attribut {{htmlattrxref("multiple", "select")}} n'est pas activé, seul une `<option>` de cet élément {{HTMLElement("select")}} peut être sélectionnée de cette façon. +- {{htmlattrdef("value")}} + - : Le contenu de cet attribut représente la valeur qu'on souhaite envoyer au formulaire lorsque l'option est sélectionnée. Si cet attribut n'est pas défini, la valeur sera le contenu texuel de l'élément `<option>`. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html"><select name="select"> +```html +<select name="select"> Elle est où la poulette ? - <option value="value1">Avec les lapins</option> - <option value="value2" selected>Avec les canards</option> - <option value="value3">Pas là</option> -</select></pre> + <option value="value1">Avec les lapins</option> + <option value="value2" selected>Avec les canards</option> + <option value="value3">Pas là</option> +</select> +``` -<h3 id="Résultat">Résultat</h3> +### Résultat -<p>{{EmbedLiveSample("Exemples","320","50")}}</p> +{{EmbedLiveSample("Exemples","320","50")}} -<h2 id="Résumé_technique">Résumé technique</h2> +## Résumé technique <table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th> - <td>Aucune.</td> - </tr> - <tr> - <th scope="row">Contenu autorisé</th> - <td>Du texte qui contient éventuellement des caractères échappés (par exemple <code>&eacute;</code>).</td> - </tr> - <tr> - <th scope="row">Omission de balises</th> - <td>La balise de début est obligatoire. La balise de fin est optionnelle si l'élément est immédiatement suivi par un autre élément <code><option></code> ou {{HTMLElement("optgroup")}} ou si l'élément parent n'a plus d'autre contenu.</td> - </tr> - <tr> - <th scope="row">Parents autorisés</th> - <td>Un élément {{HTMLElement("select")}}, {{HTMLElement("optgroup")}} ou {{HTMLElement("datalist")}}.</td> - </tr> - <tr> - <th scope="row">Rôles autorisés</th> - <td>Aucune</td> - </tr> - <tr> - <th scope="row">Interface DOM</th> - <td>{{domxref("HTMLOptionElement")}}</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row"> + <a href="/fr/docs/Web/HTML/Catégorie_de_contenu" + >Catégories de contenu</a + > + </th> + <td>Aucune.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td> + Du texte qui contient éventuellement des caractères échappés (par + exemple <code>&eacute;</code>). + </td> + </tr> + <tr> + <th scope="row">Omission de balises</th> + <td> + La balise de début est obligatoire. La balise de fin est optionnelle si + l'élément est immédiatement suivi par un autre élément + <code><option></code> ou {{HTMLElement("optgroup")}} ou si + l'élément parent n'a plus d'autre contenu. + </td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td> + Un élément {{HTMLElement("select")}}, + {{HTMLElement("optgroup")}} ou + {{HTMLElement("datalist")}}. + </td> + </tr> + <tr> + <th scope="row">Rôles autorisés</th> + <td>Aucune</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLOptionElement")}}</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-option-element', '<option>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'forms.html#the-option-element', '<option>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '<option>')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | +| {{SpecName('HTML WHATWG', 'forms.html#the-option-element', '<option>')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'forms.html#the-option-element', '<option>')}} | {{Spec2('HTML5 W3C')}} | | +| {{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '<option>')}} | {{Spec2('HTML4.01')}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("html.elements.option")}}</p> +{{Compat("html.elements.option")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>Les autres éléments relatifs aux formulaires : {{HTMLElement("form")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("datalist")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} et {{HTMLElement("meter")}}.</li> -</ul> +- Les autres éléments relatifs aux formulaires : {{HTMLElement("form")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("datalist")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} et {{HTMLElement("meter")}}. |