From 99efa5cfa34c3f9d38b75352881acdfc99508ebf Mon Sep 17 00:00:00 2001 From: tristantheb Date: Fri, 2 Apr 2021 13:50:14 +0200 Subject: UPDATE: FR-ONLY - Remove all old CompatibilityTable to replace with {{Compat()}} (#311) * UPDATE: Removing CompatibilityTable script - Part 1 * UPDATE: Removing CompatibilityTable script - Part 2 * UPDATE: Removing CompatibilityTable script - Part 3 * UPDATE: Removing CompatibilityTable script - Part 4 * UPDATE: Removing CompatibilityTable script - Part 5/5 * FIX: Repair the EOL of one page * FIX: Fix conflicting file --- files/fr/web/api/htmlselectelement/index.html | 342 +++++++++----------------- 1 file changed, 113 insertions(+), 229 deletions(-) (limited to 'files/fr/web/api/htmlselectelement/index.html') diff --git a/files/fr/web/api/htmlselectelement/index.html b/files/fr/web/api/htmlselectelement/index.html index 9cd6420eb0..9fae5fc68b 100644 --- a/files/fr/web/api/htmlselectelement/index.html +++ b/files/fr/web/api/htmlselectelement/index.html @@ -7,262 +7,146 @@ translation_of: Web/API/HTMLSelectElement

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") }}.

-

Propriétés

+

{{InheritanceDiagram(600, 120)}}

-

Cette interface hérite des propriétés de {{domxref("HTMLElement")}}, {{domxref("Element")}} et {{domxref("Node")}}.

+

Propriétés

+ +

Cette interface hérite des propriétés de {{domxref("HTMLElement")}}, de {{domxref("Element")}} et de {{domxref("Node")}}.

-
{{domxref("HTMLSelectElement.autofocus")}}
-
Est un {{jsxref("Boolean")}} qui reflète l'attribut HTML {{ htmlattrxref("autofocus", "select") }} : il indique si l'élément a le focus au chargement de la page (excepté si l'utilisateur le change, par exemple en cliquant sur un autre element). Uniquement les elément associé à un formulaire dans le document peuvent utiliser cet attribut. {{ gecko_minversion_inline("2.0") }}
+
{{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.disabled")}}
-
Est un {{jsxref("Boolean")}} qui reflète l'attribut HTML {{ htmlattrxref("disabled", "select") }} : il indique si l'élément est oui ou non desactivé. Si il est désactivé, l'élément n'accepte pas les clicks.
-
{{domxref("HTMLSelectElement.form")}} {{readonlyInline}}
-
Retourne un {{domxref("HTMLFormElement")}} représentant le formulaire associé a cet élément. Si cet élément est le fils d'un formulaire, alors cet attribut est l'ID de l'element form. Si l'élément n'est pas fils d'un formulaire, alors l'attribut peut-être l'ID de n'importe quel élément du même document.
-
{{domxref("HTMLSelectElement.labels")}} {{readonlyInline}}
-
Retourne une {{ domxref("NodeList") }} contenant la liste des labels associé avec l'éléments select.
-
{{domxref("HTMLSelectElement.length")}}
-
Est un unsigned long représentant le nombre d'élément {{ HTMLElement("option") }} dans cet element select.
-
{{domxref("HTMLSelectElement.multiple")}}
-
Est un {{jsxref("Boolean")}} représentant l'attribut HTML {{ htmlattrxref("multiple", "select") }}, qui indique si plusieurs items peuvent être choisis à la fois par l'utilisateur.
-
{{domxref("HTMLSelectElement.name")}}
-
Est une {{ domxref("DOMString") }} qui représente l'attribut HTML {{ htmlattrxref("name", "select") }}, contenant le nom de ce contrôle pour les serveurs et pour les fonctions de recherche dans le DOM.
-
{{domxref("HTMLSelectElement.options")}} {{readonlyInline}}
-
Returns a {{ domxref("HTMLOptionsCollection") }} containing the set of {{ HTMLElement("option") }} elements contained by this element.
-
{{domxref("HTMLSelectElement.required")}}
-
Is a {{jsxref("Boolean")}} that reflects the {{ htmlattrxref("required", "select") }} HTML attribute, which indicates whether the user is required to select a value before submitting the form. {{ gecko_minversion_inline("2.0") }}
-
{{domxref("HTMLSelectElement.selectedIndex")}}
-
Is a long that reflects the index of the first selected {{ HTMLElement("option") }} element. The value -1 indicates no element is selected.
-
{{domxref("HTMLSelectElement.selectedOptions")}} {{readonlyInline}}
-
Returns a live {{ domxref("HTMLCollection") }} containing the set of options that are selected.
-
{{domxref("HTMLSelectElement.size")}}
-
Is a long that reflects the {{ htmlattrxref("size", "select") }} HTML attribute, which contains the number of visible items in the control. The default is 1, unless multiple is true, in which case it is 4.
-
{{domxref("HTMLSelectElement.type")}} {{readonlyInline}}
-
Returns a {{ domxref("DOMString") }} the form control's type. When multiple is true, it returns "select-multiple"; otherwise, it returns "select-one".
-
{{domxref("HTMLSelectElement.validationMessage")}} {{readonlyInline}}
-
Returns a {{ domxref("DOMString") }} containing a localized message that describes the validation constraints that the control does not satisfy (if any). This attribute is the empty string if the control is not a candidate for constraint validation (willValidate is false), or it satisfies its constraints.
-
{{domxref("HTMLSelectElement.validity")}} {{readonlyInline}}
-
Returns a {{domxref("ValidityState")}} representing the validity state that this control is in.
-
{{domxref("HTMLSelectElement.value")}}
-
Is a {{ domxref("DOMString") }} with the value of this form control, that is, of the first selected option.
-
{{domxref("HTMLSelectElement.willValidate")}}{{readonlyInline}}
-
Is a {{jsxref("Boolean")}} that indicates whether the button is a candidate for constraint validation. It is false if any conditions bar it from constraint validation.
+
{{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.
-

Méthodes

+

Événements

-

This interface inherits the methods of {{domxref("HTMLElement")}}, and of {{domxref("Element")}} and {{domxref("Node")}}.

+

É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 :

-
{{domxref("HTMLSelectElement.add()")}}
-
Adds an element to the collection of option elements for this select element.
-
{{domxref("HTMLElement.blur", "HTMLSelectElement.blur()")}} {{ obsolete_inline}}
-
Removes input focus from this element. This method is now implemented on {{domxref("HTMLElement")}}.
-
{{domxref("HTMLSelectElement.checkValidity()")}}
-
Checks whether the element has any constraints and whether it satisfies them. If the element fails its constraints, the browser fires a cancelable {{event("invalid")}} event at the element (and returns false).
-
{{domxref("HTMLElement.focus", "HTMLSelectElement.focus()")}} {{obsolete_inline}}
-
Gives input focus to this element. This method is now implemented on {{domxref("HTMLElement")}}.
-
{{domxref("HTMLSelectElement.item()")}}
-
Gets an item from the options collection for this {{HTMLElement("select")}} element. You can also access an item by specifying the index in array-style brackets or parentheses, without calling this method explicitly.
-
{{domxref("HTMLSelectElement.namedItem()")}}
-
Gets the item in the options collection with the specified name. The name string can match either the id or the name attribute of an option node. You can also access an item by specifying the name in array-style brackets or parentheses, without calling this method explicitly.
-
{{domxref("HTMLSelectElement.remove()")}}
-
Removes the element at the specified index from the options collection for this select element.
-
{{domxref("HTMLSelectElement.setCustomValidity()")}}
-
Sets the custom validity message for the selection element to the specified message. Use the empty string to indicate that the element does not have a custom validity error.
+
É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

+

Exemple

-

Get information about the selected option

+

Obtenir des informations sur l'option sélectionnée

-
/* assuming we have the following HTML
-<select id='s'>
-    <option>First</option>
-    <option selected>Second</option>
-    <option>Third</option>
-</select>
+
/* en supposant que nous ayons le HTML suivant
+<select id='s'>
+    <option>Premier</option>
+    <option selected>Deuxième</option>
+    <option>Troisième</option>
+</select>
 */
 
-var select = document.getElementById('s');
+const select = document.getElementById('s');
 
-// return the index of the selected option
-alert(select.selectedIndex); // 1
+// renvoie l'index de l'option sélectionnée
+console.log(select.selectedIndex); // 1
 
-// return the value of the selected option
-alert(select.options[select.selectedIndex].value) // Second
+// retourne la valeur de l'option sélectionnée
+console.log(select.options[select.selectedIndex].value) // Deuxième
 

 
-
Specifications

+
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 dans la documentation de l'événement change pour plus de détails.

+
+
Spécifications

 
 
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
+  
+    
+      
+      
+      
+    
+  
+  
+    
+      
+      
+      
+    
+    
+      
+      
+      
+    
+    
+      
+      
+      
+    
+    
+      
+      
+      
+    
+  
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#htmlselectelement', 'HTMLSelectElement')}}{{Spec2('HTML WHATWG')}}Since the latest snapshot, {{SpecName('HTML5 W3C')}}, it adds the autocomplete property and the reportValidity() method.
{{SpecName('HTML5 W3C', 'forms.html#htmlselectelement', 'HTMLSelectElement')}}{{Spec2('HTML5 W3C')}}Is a snapshot of {{SpecName("HTML WHATWG")}}.

-    It adds the autofocus, form, required, labels, selectedOptions, willValidate, validity and validationMessage properties.

-    The tabindex property and the blur() and focus() methods have been moved to {{domxref("HTMLElement")}}.

-    The methods item(), namedItem(), checkValidity() and setCustomValidity().
{{SpecName('DOM2 HTML', 'html.html#ID-94282980', 'HTMLSelectElement')}}{{Spec2('DOM2 HTML')}}options now returns an {{domxref("HTMLOptionsCollection")}}.

-    length now returns an unsigned long.
{{SpecName('DOM1', 'level-one-html.html#ID-94282980', 'HTMLSelectElement')}}{{Spec2('DOM1')}}Initial definition.
SpécificationStatutCommentaire
{{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.

 

 
-
Browser compatibility

+
Compatibilité des navigateurs

 
-
{{CompatibilityTable}}

+
{{Compat("api.HTMLSelectElement")}}

 
-

-
- 
-  
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-  
- 
-
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatGeckoDesktop(1.0)}}1.01.01.0
item() and namedItem(){{CompatVersionUnknown}}{{CompatGeckoDesktop(2.0)}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
setCustomValidity(), checkValidity(), willValidate, validationMessage, validity{{CompatVersionUnknown}}{{CompatGeckoDesktop(2.0)}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
selectedOptions{{CompatVersionUnknown}}{{CompatGeckoDesktop(26)}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
labels{{CompatVersionUnknown}}{{ unimplemented_inline("556743") }}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}

-

-
-

-
- 
-  
-   
-   
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-   
-   
-  
- 
-
FeatureAndroidChromeFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Basic support1.01.0{{CompatGeckoMobile(1)}}1.01.01.01.0
item() and namedItem(){{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(2.0)}}1.0{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
setCustomValidity(), checkValidity(), willValidate, validationMessage, validity{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(2.0)}}1.0{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
selectedOptions{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(26)}}1.2{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
labels{{CompatUnknown}}{{CompatUnknown}}{{ unimplemented_inline("556743") }}{{ unimplemented_inline("556743") }}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}

-

-
-
See also

+
Voir aussi

 
 
-
-

- 
 

-

-- 
cgit v1.2.3-54-g00ecf