diff options
| author | julieng <julien.gattelier@gmail.com> | 2021-10-02 17:20:24 +0200 |
|---|---|---|
| committer | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-10-02 17:30:20 +0200 |
| commit | 1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde (patch) | |
| tree | 30a56efd3eff3a01bd1611e1840fdbbfacf544a4 /files/fr/web/api/htmlselectelement | |
| parent | c05efa8d7ae464235cf83d7c0956e42dc6974103 (diff) | |
| download | translated-content-1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde.tar.gz translated-content-1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde.tar.bz2 translated-content-1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde.zip | |
convert content to md
Diffstat (limited to 'files/fr/web/api/htmlselectelement')
| -rw-r--r-- | files/fr/web/api/htmlselectelement/index.md | 244 | ||||
| -rw-r--r-- | files/fr/web/api/htmlselectelement/remove/index.md | 105 | ||||
| -rw-r--r-- | files/fr/web/api/htmlselectelement/selectedindex/index.md | 77 | ||||
| -rw-r--r-- | files/fr/web/api/htmlselectelement/setcustomvalidity/index.md | 51 |
4 files changed, 194 insertions, 283 deletions
diff --git a/files/fr/web/api/htmlselectelement/index.md b/files/fr/web/api/htmlselectelement/index.md index 9fae5fc68b..6198b66e37 100644 --- a/files/fr/web/api/htmlselectelement/index.md +++ b/files/fr/web/api/htmlselectelement/index.md @@ -3,97 +3,92 @@ title: HTMLSelectElement slug: Web/API/HTMLSelectElement translation_of: Web/API/HTMLSelectElement --- -<div>{{ APIRef("HTML DOM") }}</div> - -<p>L'interface <code><strong>HTMLSelectElement</strong></code> représente un élément HTML {{HTMLElement("select")}}. Cet élément partage aussi toute les propriétés et méthodes des autres elements HTML via l'interface {{ domxref("HTMLElement") }}.</p> - -<p>{{InheritanceDiagram(600, 120)}}</p> - -<h2 id="Properties">Propriétés</h2> - -<p><em>Cette interface hérite des propriétés de {{domxref("HTMLElement")}}, de {{domxref("Element")}} et de {{domxref("Node")}}.</em></p> - -<dl> - <dt>{{domxref("HTMLSelectElement.autofocus")}}</dt> - <dd>Un {{jsxref("Boolean")}} reflétant l'attribut HTML {{htmlattrxref("autofocus", "select")}} qui indique si le contrôle doit bénéficier d'une priorité d'entrée au chargement de la page, à moins que l'utilisateur ne passe outre, par exemple en saisissant un autre contrôle. Cet attribut ne peut être spécifié que pour un seul élément associé à un formulaire dans un document.</dd> - <dt>{{domxref("HTMLSelectElement.disabled")}}</dt> - <dd>Un {{jsxref("Boolean")}} reflétant l'attribut {{htmlattrxref("disabled", "select")}} qui indique si le contrôle est désactivé. S'il est désactivé, il n'accepte pas les clics.</dd> - <dt>{{domxref("HTMLSelectElement.form")}} {{ReadOnlyInline}}</dt> - <dd>Un {{domxref("HTMLFormElement")}} référençant le formulaire auquel cet élément est associé. Si l'élément n'est pas associé à un élément {{HTMLElement("form")}}, il retourne <code>null</code>.</dd> - <dt>{{domxref("HTMLSelectElement.labels")}} {{ReadOnlyInline}}</dt> - <dd>Une {{domxref("NodeList")}} d'éléments {{HTMLElement("label")}} associés à l'élément.</dd> - <dt>{{domxref("HTMLSelectElement.length")}}</dt> - <dd>Un <code>unsigned long</code>, le nombre d'éléments {{HTMLElement("option")}} dans cet élément <code>select</code>.</dd> - <dt>{{domxref("HTMLSelectElement.multiple")}}</dt> - <dd>Un {{jsxref("Boolean")}} reflétant l'attribut {{htmlattrxref("multiple", "select")}} qui indique si plusieurs éléments peuvent être sélectionnés.</dd> - <dt>{{domxref("HTMLSelectElement.name")}}</dt> - <dd>Une chaîne de caratères {{domxref("DOMString")}} reflétant l'attribut HTML {{htmlattrxref("name", "select")}} contenant le nom de ce contrôle utilisé par les serveurs et les fonctions de recherche DOM.</dd> - <dt>{{domxref("HTMLSelectElement.options")}} {{ReadOnlyInline}}</dt> - <dd>Une {{domxref("HTMLOptionsCollection")}} représentant l'ensemble des {{HTMLElement("option")}} ({{domxref("HTMLOptionElement")}}) contenus par cet élément.</dd> - <dt>{{domxref("HTMLSelectElement.required")}}</dt> - <dd>Un {{jsxref("Boolean")}} reflétant l'attribut {{htmlattrxref("required", "select")}} qui indique si l'utilisateur doit sélectionner une valeur avant de soumettre le formulaire.</dd> - <dt>{{domxref("HTMLSelectElement.selectedIndex")}}</dt> - <dd>Un <code>long</code> reflétant l'indice du premier élément {{HTMLElement("option")}} sélectionné. La valeur <code>-1</code> indique qu'aucun élément n'est sélectionné.</dd> - <dt>{{domxref("HTMLSelectElement.selectedOptions")}} {{ReadOnlyInline}}</dt> - <dd>Une {{domxref("HTMLCollection")}} représentant l'ensemble des éléments {{HTMLElement("option")}} qui sont sélectionnés.</dd> - <dt>{{domxref("HTMLSelectElement.size")}}</dt> - <dd>Un <code>long</code> reflétant l'attribut {{htmlattrxref("size", "select")}} attribut HTML, qui contient le nombre d'éléments visibles dans le contrôle. La valeur par défaut est 1, sauf si <code>multiple</code> est <code>true</code>, auquel cas elle est de 4.</dd> - <dt>{{domxref("HTMLSelectElement.type")}} {{ReadOnlyInline}}</dt> - <dd>Une chaîne de caractères {{domxref("DOMString")}} représentant le type du contrôle de formulaire. Lorsque <code>multiple</code> est <code>true</code>, il renvoie <code>"select-multiple"</code> ; sinon, il renvoie <code>"select-one"</code>.</dd> - <dt>{{domxref("HTMLSelectElement.validationMessage")}} {{ReadOnlyInline}}</dt> - <dd>Une chaîne de caractères {{domxref("DOMString")}} représentant un message localisé qui décrit les contraintes de validation que le contrôle ne satisfait pas (le cas échéant). Cet attribut est la chaîne vide si le contrôle n'est pas un candidat à la validation des contraintes (<code>willValidate</code> est faux), ou s'il satisfait à ses contraintes.</dd> - <dt>{{domxref("HTMLSelectElement.validity")}} {{ReadOnlyInline}}</dt> - <dd>Un {{domxref("ValidityState")}} reflétant l'état de validité dans lequel se trouve ce contrôle.</dd> - <dt>{{domxref("HTMLSelectElement.value")}}</dt> - <dd>Une chapine de caractères {{domxref("DOMString")}} reflétant la valeur du contrôle de formulaire. Renvoie la propriété <code>value</code> du premier élément d'option sélectionné s'il y en a un, sinon la chaîne vide.</dd> - <dt>{{domxref("HTMLSelectElement.willValidate")}} {{ReadOnlyInline}}</dt> - <dd>Un {{jsxref("Boolean")}} qui indique si le bouton est un candidat à la validation des contraintes. Il vaut <code>false</code> si des conditions l'empêchent de bénéficier de la validation par contrainte.</dd> -</dl> - -<h2 id="Methods">Méthodes</h2> - -<p><em>Cette interface hérite des méthodes de {{domxref("HTMLElement")}}, et de {{domxref("Element")}} et {{domxref("Node")}}.</em></p> - -<dl> - <dt>{{domxref("HTMLSelectElement.add()")}}</dt> - <dd>Ajoute un élément à la collection d'éléments <code>option</code> pour cet élément <code>select</code>.</dd> - <dt>{{domxref("HTMLSelectElement.blur()")}} {{obsolete_inline}}</dt> - <dd>Supprime le focus d'entrée de cet élément. <em>Cette méthode est maintenant mise en œuvre sur {{domxref("HTMLElement")}}.</em>.</dd> - <dt>{{domxref("HTMLSelectElement.checkValidity()")}}</dt> - <dd>Vérifie si l'élément a des contraintes et s'il les satisfait. Si l'élément ne respecte pas ses contraintes, le navigateur déclenche un événement {{domxref("HTMLInputElement/invalid_event", "invalid")}} annulable sur l'élément (et retourne <code>false</code>).</dd> - <dt>{{domxref("HTMLSelectElement.focus()")}} {{obsolete_inline}}</dt> - <dd>Donne le focus d'entrée à cet élément. <em>Cette méthode est maintenant mise en œuvre sur {{domxref("HTMLElement")}}</em>.</dd> - <dt>{{domxref("HTMLSelectElement.item()")}}</dt> - <dd>Obtient un élément de la collection d'options de l'élément {{HTMLElement("select")}}. Vous pouvez également accéder à un élément en spécifiant l'index entre des parenthèses ou des crochets de style tableau, sans appeler cette méthode explicitement.</dd> - <dt>{{domxref("HTMLSelectElement.namedItem()")}}</dt> - <dd>Obtient l'élément dans la collection d'options avec le nom spécifié. La chaîne de nom peut correspondre soit au <code>id</code>, soit à l'attribut <code>name</code> d'un nœud d'option. Vous pouvez également accéder à un élément en spécifiant le nom entre des crochets de style tableau ou des parenthèses, sans appeler cette méthode explicitement.</dd> - <dt>{{domxref("HTMLSelectElement.remove()")}}</dt> - <dd>Supprime l'élément à l'indice spécifié de la collection d'options pour cet élément <code>select</code>.</dd> - <dt>{{domxref("HTMLSelectElement.reportValidity()")}}</dt> - <dd>Cette méthode signale à l'utilisateur les problèmes liés aux contraintes sur l'élément, le cas échéant. S'il y a des problèmes, elle déclenche un événement {{domxref("HTMLInputElement/invalid_event", "invalid")}} annulable sur l'élément, et retourne <code>false</code> ; s'il n'y a pas de problèmes, elle retourne <code>true</code>.</dd> - <dt>{{domxref("HTMLSelectElement.setCustomValidity()")}}</dt> - <dd>Définit le message de validation personnalisé pour l'élément de sélection au message spécifié. Utilisez la chaîne vide pour indiquer que l'élément n'a <em>pas</em> d'erreur de validité personnalisée.</dd> -</dl> - -<h2 id="Events">Événements</h2> - -<p>Écoutez ces événements en utilisant {{domxref("EventTarget/addEventListener", "addEventListener()")}} ou en affectant un écouteur d'événements à la propriété <code>on<em>eventname</em></code> de cette interface :</p> - -<dl> - <dt>Événement {{domxref("HTMLElement/input_event", "input")}}</dt> - <dd>S'active lorsque la <code>valeur</code> d'un élément {{HTMLElement("input")}}, {{HTMLElement("select")}} ou {{HTMLElement("textarea")}} a été modifiée.</dd> -</dl> - -<h2 id="Example">Exemple</h2> - -<h3 id="Get_information_about_the_selected_option">Obtenir des informations sur l'option sélectionnée</h3> - -<pre class="brush: js">/* en supposant que nous ayons le HTML suivant -<select id='s'> - <option>Premier</option> - <option selected>Deuxième</option> - <option>Troisième</option> -</select> +{{ APIRef("HTML DOM") }} + +L'interface **`HTMLSelectElement`** représente un élément HTML {{HTMLElement("select")}}. Cet élément partage aussi toute les propriétés et méthodes des autres elements HTML via l'interface {{ domxref("HTMLElement") }}. + +{{InheritanceDiagram(600, 120)}} + +## Propriétés + +_Cette interface hérite des propriétés de {{domxref("HTMLElement")}}, de {{domxref("Element")}} et de {{domxref("Node")}}._ + +- {{domxref("HTMLSelectElement.autofocus")}} + - : Un {{jsxref("Boolean")}} reflétant l'attribut HTML {{htmlattrxref("autofocus", "select")}} qui indique si le contrôle doit bénéficier d'une priorité d'entrée au chargement de la page, à moins que l'utilisateur ne passe outre, par exemple en saisissant un autre contrôle. Cet attribut ne peut être spécifié que pour un seul élément associé à un formulaire dans un document. +- {{domxref("HTMLSelectElement.disabled")}} + - : Un {{jsxref("Boolean")}} reflétant l'attribut {{htmlattrxref("disabled", "select")}} qui indique si le contrôle est désactivé. S'il est désactivé, il n'accepte pas les clics. +- {{domxref("HTMLSelectElement.form")}} {{ReadOnlyInline}} + - : Un {{domxref("HTMLFormElement")}} référençant le formulaire auquel cet élément est associé. Si l'élément n'est pas associé à un élément {{HTMLElement("form")}}, il retourne `null`. +- {{domxref("HTMLSelectElement.labels")}} {{ReadOnlyInline}} + - : Une {{domxref("NodeList")}} d'éléments {{HTMLElement("label")}} associés à l'élément. +- {{domxref("HTMLSelectElement.length")}} + - : Un `unsigned long`, le nombre d'éléments {{HTMLElement("option")}} dans cet élément `select`. +- {{domxref("HTMLSelectElement.multiple")}} + - : Un {{jsxref("Boolean")}} reflétant l'attribut {{htmlattrxref("multiple", "select")}} qui indique si plusieurs éléments peuvent être sélectionnés. +- {{domxref("HTMLSelectElement.name")}} + - : Une chaîne de caratères {{domxref("DOMString")}} reflétant l'attribut HTML {{htmlattrxref("name", "select")}} contenant le nom de ce contrôle utilisé par les serveurs et les fonctions de recherche DOM. +- {{domxref("HTMLSelectElement.options")}} {{ReadOnlyInline}} + - : Une {{domxref("HTMLOptionsCollection")}} représentant l'ensemble des {{HTMLElement("option")}} ({{domxref("HTMLOptionElement")}}) contenus par cet élément. +- {{domxref("HTMLSelectElement.required")}} + - : Un {{jsxref("Boolean")}} reflétant l'attribut {{htmlattrxref("required", "select")}} qui indique si l'utilisateur doit sélectionner une valeur avant de soumettre le formulaire. +- {{domxref("HTMLSelectElement.selectedIndex")}} + - : Un `long` reflétant l'indice du premier élément {{HTMLElement("option")}} sélectionné. La valeur `-1` indique qu'aucun élément n'est sélectionné. +- {{domxref("HTMLSelectElement.selectedOptions")}} {{ReadOnlyInline}} + - : Une {{domxref("HTMLCollection")}} représentant l'ensemble des éléments {{HTMLElement("option")}} qui sont sélectionnés. +- {{domxref("HTMLSelectElement.size")}} + - : Un `long` reflétant l'attribut {{htmlattrxref("size", "select")}} attribut HTML, qui contient le nombre d'éléments visibles dans le contrôle. La valeur par défaut est 1, sauf si `multiple` est `true`, auquel cas elle est de 4. +- {{domxref("HTMLSelectElement.type")}} {{ReadOnlyInline}} + - : Une chaîne de caractères {{domxref("DOMString")}} représentant le type du contrôle de formulaire. Lorsque `multiple` est `true`, il renvoie `"select-multiple"` ; sinon, il renvoie `"select-one"`. +- {{domxref("HTMLSelectElement.validationMessage")}} {{ReadOnlyInline}} + - : Une chaîne de caractères {{domxref("DOMString")}} représentant un message localisé qui décrit les contraintes de validation que le contrôle ne satisfait pas (le cas échéant). Cet attribut est la chaîne vide si le contrôle n'est pas un candidat à la validation des contraintes (`willValidate` est faux), ou s'il satisfait à ses contraintes. +- {{domxref("HTMLSelectElement.validity")}} {{ReadOnlyInline}} + - : Un {{domxref("ValidityState")}} reflétant l'état de validité dans lequel se trouve ce contrôle. +- {{domxref("HTMLSelectElement.value")}} + - : Une chapine de caractères {{domxref("DOMString")}} reflétant la valeur du contrôle de formulaire. Renvoie la propriété `value` du premier élément d'option sélectionné s'il y en a un, sinon la chaîne vide. +- {{domxref("HTMLSelectElement.willValidate")}} {{ReadOnlyInline}} + - : Un {{jsxref("Boolean")}} qui indique si le bouton est un candidat à la validation des contraintes. Il vaut `false` si des conditions l'empêchent de bénéficier de la validation par contrainte. + +## Méthodes + +_Cette interface hérite des méthodes de {{domxref("HTMLElement")}}, et de {{domxref("Element")}} et {{domxref("Node")}}._ + +- {{domxref("HTMLSelectElement.add()")}} + - : Ajoute un élément à la collection d'éléments `option` pour cet élément `select`. +- {{domxref("HTMLSelectElement.blur()")}} {{obsolete_inline}} + - : Supprime le focus d'entrée de cet élément. _Cette méthode est maintenant mise en œuvre sur {{domxref("HTMLElement")}}._. +- {{domxref("HTMLSelectElement.checkValidity()")}} + - : Vérifie si l'élément a des contraintes et s'il les satisfait. Si l'élément ne respecte pas ses contraintes, le navigateur déclenche un événement {{domxref("HTMLInputElement/invalid_event", "invalid")}} annulable sur l'élément (et retourne `false`). +- {{domxref("HTMLSelectElement.focus()")}} {{obsolete_inline}} + - : Donne le focus d'entrée à cet élément. _Cette méthode est maintenant mise en œuvre sur {{domxref("HTMLElement")}}_. +- {{domxref("HTMLSelectElement.item()")}} + - : Obtient un élément de la collection d'options de l'élément {{HTMLElement("select")}}. Vous pouvez également accéder à un élément en spécifiant l'index entre des parenthèses ou des crochets de style tableau, sans appeler cette méthode explicitement. +- {{domxref("HTMLSelectElement.namedItem()")}} + - : Obtient l'élément dans la collection d'options avec le nom spécifié. La chaîne de nom peut correspondre soit au `id`, soit à l'attribut `name` d'un nœud d'option. Vous pouvez également accéder à un élément en spécifiant le nom entre des crochets de style tableau ou des parenthèses, sans appeler cette méthode explicitement. +- {{domxref("HTMLSelectElement.remove()")}} + - : Supprime l'élément à l'indice spécifié de la collection d'options pour cet élément `select`. +- {{domxref("HTMLSelectElement.reportValidity()")}} + - : Cette méthode signale à l'utilisateur les problèmes liés aux contraintes sur l'élément, le cas échéant. S'il y a des problèmes, elle déclenche un événement {{domxref("HTMLInputElement/invalid_event", "invalid")}} annulable sur l'élément, et retourne `false` ; s'il n'y a pas de problèmes, elle retourne `true`. +- {{domxref("HTMLSelectElement.setCustomValidity()")}} + - : Définit le message de validation personnalisé pour l'élément de sélection au message spécifié. Utilisez la chaîne vide pour indiquer que l'élément n'a _pas_ d'erreur de validité personnalisée. + +## Événements + +Écoutez ces événements en utilisant {{domxref("EventTarget/addEventListener", "addEventListener()")}} ou en affectant un écouteur d'événements à la propriété `oneventname` de cette interface : + +- Événement {{domxref("HTMLElement/input_event", "input")}} + - : S'active lorsque la `valeur` d'un élément {{HTMLElement("input")}}, {{HTMLElement("select")}} ou {{HTMLElement("textarea")}} a été modifiée. + +## Exemple + +### Obtenir des informations sur l'option sélectionnée + +```js +/* en supposant que nous ayons le HTML suivant +<select id='s'> + <option>Premier</option> + <option selected>Deuxième</option> + <option>Troisième</option> +</select> */ const select = document.getElementById('s'); @@ -103,50 +98,23 @@ console.log(select.selectedIndex); // 1 // retourne la valeur de l'option sélectionnée console.log(select.options[select.selectedIndex].value) // Deuxième -</pre> - -<p>Une meilleure façon de suivre les modifications apportées à la sélection de l'utilisateur consiste à surveiller l'événement {{domxref("HTMLElement/change_event", "change")}} qui se produit sur le <code><select></code>. Cela vous indiquera quand la valeur change, et vous pourrez alors mettre à jour ce dont vous avez besoin. Voir <a href="/fr/docs/Web/API/HTMLElement/change_event#select_element">l'exemple fourni</a> dans la documentation de l'événement <code>change</code> pour plus de détails.</p> - -<h2 id="Specifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#htmlselectelement', 'HTMLSelectElement')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Ajoute la propriété <code>autocomplete</code> et la méthode <code>reportValidity()</code>.</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'forms.html#htmlselectelement', 'HTMLSelectElement')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Ajoute les propriétés <code>autofocus</code>, <code>form</code>, <code>required</code>, <code>labels</code>, <code>selectedOptions</code>, <code>willValidate</code>, <code>validity</code> et <code>validationMessage</code>. <br>La propriété <code>tabindex</code> et les méthodes <code>blur()</code> et <code>focus()</code> ont été déplacées vers {{domxref("HTMLElement")}}. <br>Les méthodes <code>item()</code>, <code>namedItem()</code>, <code>checkValidity()</code> et <code>setCustomValidity()</code>.</td> - </tr> - <tr> - <td>{{SpecName('DOM2 HTML', 'html.html#ID-94282980', 'HTMLSelectElement')}}</td> - <td>{{Spec2('DOM2 HTML')}}</td> - <td><code>options</code> retourne désormais un {{domxref("HTMLOptionsCollection")}}.<br> <code>length</code> retourne désormais un <code>unsigned long</code>.</td> - </tr> - <tr> - <td>{{SpecName('DOM1', 'level-one-html.html#ID-94282980', 'HTMLSelectElement')}}</td> - <td>{{Spec2('DOM1')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.HTMLSelectElement")}}</p> - -<h2 id="See_also">Voir aussi</h2> - -<ul> - <li>L'élément HTML {{HTMLElement("select")}}, qui implémente cette interface.</li> -</ul> +``` + +Une meilleure façon de suivre les modifications apportées à la sélection de l'utilisateur consiste à surveiller l'événement {{domxref("HTMLElement/change_event", "change")}} qui se produit sur le `<select>`. Cela vous indiquera quand la valeur change, et vous pourrez alors mettre à jour ce dont vous avez besoin. Voir [l'exemple fourni](/fr/docs/Web/API/HTMLElement/change_event#select_element) dans la documentation de l'événement `change` pour plus de détails. + +## Spécifications + +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------- | -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| {{SpecName('HTML WHATWG', '#htmlselectelement', 'HTMLSelectElement')}} | {{Spec2('HTML WHATWG')}} | Ajoute la propriété `autocomplete` et la méthode `reportValidity()`. | +| {{SpecName('HTML5 W3C', 'forms.html#htmlselectelement', 'HTMLSelectElement')}} | {{Spec2('HTML5 W3C')}} | Ajoute les propriétés `autofocus`, `form`, `required`, `labels`, `selectedOptions`, `willValidate`, `validity` et `validationMessage`. La propriété `tabindex` et les méthodes `blur()` et `focus()` ont été déplacées vers {{domxref("HTMLElement")}}. Les méthodes `item()`, `namedItem()`, `checkValidity()` et `setCustomValidity()`. | +| {{SpecName('DOM2 HTML', 'html.html#ID-94282980', 'HTMLSelectElement')}} | {{Spec2('DOM2 HTML')}} | `options` retourne désormais un {{domxref("HTMLOptionsCollection")}}. `length` retourne désormais un `unsigned long`. | +| {{SpecName('DOM1', 'level-one-html.html#ID-94282980', 'HTMLSelectElement')}} | {{Spec2('DOM1')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("api.HTMLSelectElement")}} + +## Voir aussi + +- L'élément HTML {{HTMLElement("select")}}, qui implémente cette interface. diff --git a/files/fr/web/api/htmlselectelement/remove/index.md b/files/fr/web/api/htmlselectelement/remove/index.md index 71b6fd591e..eb93cdf43a 100644 --- a/files/fr/web/api/htmlselectelement/remove/index.md +++ b/files/fr/web/api/htmlselectelement/remove/index.md @@ -3,86 +3,59 @@ title: HTMLSelectElement.remove() slug: Web/API/HTMLSelectElement/remove translation_of: Web/API/HTMLSelectElement/remove --- -<p>{{ APIRef("HTML DOM") }}</p> +{{ APIRef("HTML DOM") }} -<p>La méthode <code><strong>HTMLSelectElement.remove()</strong></code> enlève l'option à l'index choisi dans la liste des options de cet objet select.</p> +La méthode **`HTMLSelectElement.remove()`** enlève l'option à l'index choisi dans la liste des options de cet objet select. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="eval">collection.remove(index); -</pre> + collection.remove(index); -<h3 id="Parameters">Paramètre</h3> +### Paramètre -<ul> - <li><em>index est</em> un entier long définissant la position du {{ domxref("HTMLOptionElement") }} à enlever de la collection. Si rien n'est trouvé à cette position dans la liste, la méthode n'a aucun effet.</li> -</ul> +- _index est_ un entier long définissant la position du {{ domxref("HTMLOptionElement") }} à enlever de la collection. Si rien n'est trouvé à cette position dans la liste, la méthode n'a aucun effet. -<dl> -</dl> +<!----> -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush: js">var sel = document.getElementById("maListe"); +```js +var sel = document.getElementById("maListe"); sel.remove(1); /* Prend l'objet select existant suivant : - <select id="maListe" name="maListe"> - <option value="1">Option: Value 1</option> - <option value="2">Option: Value 2</option> - <option value="3">Option: Value 3</option> - </select> + <select id="maListe" name="maListe"> + <option value="1">Option: Value 1</option> + <option value="2">Option: Value 2</option> + <option value="3">Option: Value 3</option> + </select> Et le transforme en: - <select id="maListe" name="maListe"> - <option value="1">Option: Value 1</option> - <option value="3">Option: Value 3</option> - </select> + <select id="maListe" name="maListe"> + <option value="1">Option: Value 1</option> + <option value="3">Option: Value 3</option> + </select> */ - </pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', '#dom-select-remove', 'HTMLSelectElement.remove()')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'forms.html#dom-select-remove', 'HTMLSelectElement.remove()')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Is a snapshot of {{SpecName("HTML WHATWG")}}.</td> - </tr> - <tr> - <td>{{SpecName('DOM2 HTML', 'html.html#ID-33404570', 'HTMLSelectElement.remove()')}}</td> - <td>{{Spec2('DOM2 HTML')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('DOM1', 'level-one-html.html#ID-33404570', 'HTMLSelectElement.remove()')}}</td> - <td>{{Spec2('DOM1')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.HTMLSelectElement.remove")}}</p> - -<h2 id="See_also">Voir aussi</h2> - -<ul> - <li>{{ domxref("ChildNode.remove") }}, la méthode appelée quand remove est créé sans argument pour un {{ domxref("HTMLSelectElement") }}.</li> - <li>{{domxref("HTMLSelectElement") }} qui possède cette méthode.</li> -</ul> + +``` + +## Spécifications + +| Spécification | Status | Comment | +| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------ | +| {{SpecName('HTML WHATWG', '#dom-select-remove', 'HTMLSelectElement.remove()')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'forms.html#dom-select-remove', 'HTMLSelectElement.remove()')}} | {{Spec2('HTML5 W3C')}} | Is a snapshot of {{SpecName("HTML WHATWG")}}. | +| {{SpecName('DOM2 HTML', 'html.html#ID-33404570', 'HTMLSelectElement.remove()')}} | {{Spec2('DOM2 HTML')}} | | +| {{SpecName('DOM1', 'level-one-html.html#ID-33404570', 'HTMLSelectElement.remove()')}} | {{Spec2('DOM1')}} | Initial definition. | + +## Compatibilité des navigateurs + +{{Compat("api.HTMLSelectElement.remove")}} + +## Voir aussi + +- {{ domxref("ChildNode.remove") }}, la méthode appelée quand remove est créé sans argument pour un {{ domxref("HTMLSelectElement") }}. +- {{domxref("HTMLSelectElement") }} qui possède cette méthode. diff --git a/files/fr/web/api/htmlselectelement/selectedindex/index.md b/files/fr/web/api/htmlselectelement/selectedindex/index.md index 4000816569..06ceeefc60 100644 --- a/files/fr/web/api/htmlselectelement/selectedindex/index.md +++ b/files/fr/web/api/htmlselectelement/selectedindex/index.md @@ -3,67 +3,54 @@ title: HTMLSelectElement.selectedIndex slug: Web/API/HTMLSelectElement/selectedIndex translation_of: Web/API/HTMLSelectElement/selectedIndex --- -<div>{{APIRef("HTML DOM")}}</div> +{{APIRef("HTML DOM")}} -<p><code><strong>HTMLSelectElement.selectedIndex</strong></code> est un <code>long</code> qui représente l'index du premier élément sélectionné {{HTMLElement("option")}}. La valeur <code>-1</code> indique qu'aucun élément est sélectionné.</p> +**`HTMLSelectElement.selectedIndex`** est un `long` qui représente l'index du premier élément sélectionné {{HTMLElement("option")}}. La valeur `-1` indique qu'aucun élément est sélectionné. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">var <var>index</var> = <var>selectElem</var>.selectedIndex; -<em>selectElem<code>.selectedIndex = </code>index;</em> -</pre> + var index = selectElem.selectedIndex; + selectElem.selectedIndex = index; -<h2 id="Exemple">Exemple</h2> +## Exemple -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html"><p id="p">selectedIndex: 0</p> +```html +<p id="p">selectedIndex: 0</p> -<select id="select"> - <option selected>Option A</option> - <option>Option B</option> - <option>Option C</option> - <option>Option D</option> - <option>Option E</option> -</select> -</pre> +<select id="select"> + <option selected>Option A</option> + <option>Option B</option> + <option>Option C</option> + <option>Option D</option> + <option>Option E</option> +</select> +``` -<h3 id="JavaScript">JavaScript</h3> +### JavaScript -<pre class="brush: js">var selectElem = document.getElementById('select'); +```js +var selectElem = document.getElementById('select'); var pElem = document.getElementById('p'); -// Quand une nouvelle <option> est selectionnée +// Quand une nouvelle <option> est selectionnée selectElem.addEventListener('change', function() { var index = selectElem.selectedIndex; - // Rapporter cette donnée au <p> + // Rapporter cette donnée au <p> pElem.innerHTML = 'selectedIndex: ' + index; -})</pre> +}) +``` -<p>{{EmbedLiveSample("Exemple", "200px", "80px")}}</p> +{{EmbedLiveSample("Exemple", "200px", "80px")}} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', '#dom-select-selectedindex', 'HTMLSelectElement')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Pas de changement depuis le snapshot précédent, {{SpecName("HTML5 W3C")}}.</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'forms.html#dom-select-selectedindex', 'HTMLSelectElement')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Définition initiale, snapshot de {{SpecName("HTML WHATWG")}}.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | --------------------------------------------------------------------------------- | +| {{SpecName('HTML WHATWG', '#dom-select-selectedindex', 'HTMLSelectElement')}} | {{Spec2('HTML WHATWG')}} | Pas de changement depuis le snapshot précédent, {{SpecName("HTML5 W3C")}}. | +| {{SpecName('HTML5 W3C', 'forms.html#dom-select-selectedindex', 'HTMLSelectElement')}} | {{Spec2('HTML5 W3C')}} | Définition initiale, snapshot de {{SpecName("HTML WHATWG")}}. | -<h2 id="Compatibilité_entre_les_navigateurs">Compatibilité entre les navigateurs</h2> +## Compatibilité entre les navigateurs -<p>{{Compat("api.HTMLSelectElement.selectedIndex")}}</p> +{{Compat("api.HTMLSelectElement.selectedIndex")}} diff --git a/files/fr/web/api/htmlselectelement/setcustomvalidity/index.md b/files/fr/web/api/htmlselectelement/setcustomvalidity/index.md index aa5cad6adc..fb449d6b3e 100644 --- a/files/fr/web/api/htmlselectelement/setcustomvalidity/index.md +++ b/files/fr/web/api/htmlselectelement/setcustomvalidity/index.md @@ -3,48 +3,31 @@ title: HTMLSelectElement.setCustomValidity() slug: Web/API/HTMLSelectElement/setCustomValidity translation_of: Web/API/HTMLSelectElement/setCustomValidity --- -<div>{{ APIRef("HTML DOM") }}</div> +{{ APIRef("HTML DOM") }} -<p>La méthode <code><strong>HTMLSelectElement.setCustomValidity()</strong></code> définit le message de validation personnalisé de l'élément sélectionné avec le message renseigné. Utiliser une chaîne de caractère vide indique que l'élément <em>n'a pas</em> de message d'erreur de validation personnalisé.</p> +La méthode **`HTMLSelectElement.setCustomValidity()`** définit le message de validation personnalisé de l'élément sélectionné avec le message renseigné. Utiliser une chaîne de caractère vide indique que l'élément _n'a pas_ de message d'erreur de validation personnalisé. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">ElmSelectionne.setCustomValidity(message);</pre> +```js +ElmSelectionne.setCustomValidity(message); +``` -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<ul> - <li><em>message </em>est le {{domxref("DOMString")}} contenant le message d'erreur.</li> -</ul> +- *message* est le {{domxref("DOMString")}} contenant le message d'erreur. -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', '#dom-cva-setcustomvalidity', 'HTMLSelectElement.setCustomValidity()')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Pas de changement depuis la dernière snapshot, {{SpecName('HTML5 W3C')}}.</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'forms.html#dom-cva-setcustomvalidity', 'HTMLSelectElement.setCustomValidity()')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Définition initiale, snapshot de {{SpecName('HTML WHATWG')}}</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------------------------------------------------------------------- | +| {{SpecName('HTML WHATWG', '#dom-cva-setcustomvalidity', 'HTMLSelectElement.setCustomValidity()')}} | {{Spec2('HTML WHATWG')}} | Pas de changement depuis la dernière snapshot, {{SpecName('HTML5 W3C')}}. | +| {{SpecName('HTML5 W3C', 'forms.html#dom-cva-setcustomvalidity', 'HTMLSelectElement.setCustomValidity()')}} | {{Spec2('HTML5 W3C')}} | Définition initiale, snapshot de {{SpecName('HTML WHATWG')}} | -<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.HTMLSelectElement.setCustomValidity")}}</p> +{{Compat("api.HTMLSelectElement.setCustomValidity")}} -<h2 id="See_also">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">Validation du formulaire</a>.</li> -</ul> +- [Validation du formulaire](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation). |