UPDATE: Update translation of the HTML attributes (#706)

* UPDATE: Refresh of the index page and remove KS

* L10N: Translation of the accept attributes

* UPDATE: Refresh of the autocomplete attribute

* L10N: Translation of the capture attribute

* Revert accept with BCD (but table not exist)

* UPDATE: Refresh the crossorigin attribute

* L10N: Translation of the disabled attribute

* L10N: Translation of the elementtiming attribute

* L10N: Translation of the for attribute

* L10N: Translation of the max attribute

* L10N: Translation of the maxlength attribute

* L10N: Translation of the min attribute

* FIX: Add missing summary

* L10N: Translation of the minlength attribute

* L10N: Translation of the multiple attribute

* UPDATE: Refresh the pattern attribute

* L10N: Translation of the readonly attribute

* L10N: Translation of the rel attribute

* L10N: Translation of the required attribute

* L10N: Translation of the size attribute

* L10N: Translation of the step attribute

* Review - attr accept

* Typo live sample

* Review - capture

* Review - autocomplete

* Review - crossorigin

* Review disabled

* Review elementtiming

* Review - for

* Review max

* Review - maxlength

* Review min

* Review minlength

* Review multiple

* Review pattern

* Review readonly

* Review rel

* Review required

* Review size

* Review step

* Review attributes index

Co-authored-by: julieng <julien.gattelier@gmail.com>

1 files changed, 182 insertions, 0 deletions

diff --git a/files/fr/web/html/attributes/multiple/index.html b/files/fr/web/html/attributes/multiple/index.html
new file mode 100644
index 0000000000..3f306bf96c
--- /dev/null
+++ b/files/fr/web/html/attributes/multiple/index.html
@@ -0,0 +1,182 @@
+---
+title: 'Attribut HTML : multiple'
+slug: Web/HTML/Attributes/multiple
+tags:
+  - Attribute
+  - Attributes
+  - Constraint validation
+  - HTML
+translation_of: Web/HTML/Attributes/multiple
+---
+<p>{{HTMLSidebar}}</p>
+
+<p class="summary">L'attribut booléen <strong><code>multiple</code></strong>, s'il est défini, signifie que le contrôle de formulaire accepte une ou plusieurs valeurs. Valable pour les types de saisie <a href="/fr/docs/Web/HTML/Element/Input/email"><code>email</code></a> et <a href="/fr/docs/Web/HTML/Element/Input/file"><code>file</code></a> et l'élément <a href="/fr/docs/Web/HTML/Element/select"><code>&lt;select&gt;</code></a>, la manière dont l'utilisateur opte pour plusieurs valeurs dépend du contrôle de formulaire.</p>
+
+<p>Selon le type, le contrôle de formulaire peut avoir une apparence différente si l'attribut <code>multiple</code> est défini. Pour le type de saisie de fichier, la messagerie native fournie par le navigateur diffère. Dans Firefox, l'entrée de fichier indique « Aucun fichier sélectionné » lorsque l'attribut est présent et « Aucun fichier sélectionné » dans le cas contraire, lorsqu'aucun fichier n'est sélectionné. La plupart des navigateurs affichent une zone de liste déroulante pour un contrôle <a href="/fr/docs/Web/HTML/Element/select"><code>&lt;select&gt;</code></a> avec l'attribut <code>multiple</code> défini contre une liste déroulante à une ligne lorsque l'attribut est omis. L'entrée <a href="/fr/docs/Web/HTML/Element/Input/email"><code>email</code></a> s'affiche de la même manière, mais correspondra à la pseudo-classe <a href="/fr/docs/Web/CSS/:invalid"><code>:invalid</code></a> si plus d'une adresse électronique séparée par des virgules est incluse en l'absence de l'attribut.</p>
+
+<p>Lorsque <code>multiple</code> est défini sur le type de saisie <a href="/fr/docs/Web/HTML/Element/Input/email"><code>email</code></a>, l'utilisateur peut inclure zéro (si ce n'est pas également <a href="/fr/docs/Web/HTML/Attributes/required"><code>required</code></a>), une ou plusieurs adresses électroniques séparées par des virgules.</p>
+
+<pre class="brush: html">&lt;input type="email" multiple name="emails" id="emails"&gt;</pre>
+
+<p>Si et seulement si l'attribut <code>multiple</code> est spécifié, la valeur peut être une liste d'adresses électroniques correctement formées et séparées par des virgules. Tout espace blanc de queue et de tête est supprimé de chaque adresse de la liste.</p>
+
+<p>Lorsque <code>multiple</code> est défini sur le type d'entrée <a href="/fr/docs/Web/HTML/Element/Input/file"><code>file</code></a>, l'utilisateur peut sélectionner un ou plusieurs fichiers. L'utilisateur peut choisir plusieurs fichiers dans le sélecteur de fichiers de n'importe quelle manière que la plateforme qu'il a choisie permet (par exemple, en maintenant la touche <kbd>Maj</kbd> ou <kbd>Ctrl</kbd> enfoncée, puis en cliquant).</p>
+
+<pre class="brush: html">&lt;input type="file" multiple name="uploads" id="uploads"&gt;</pre>
+
+<p>Lorsque l'attribut est omis, l'utilisateur ne peut sélectionner qu'un seul fichier par <code>&lt;input&gt;</code>.</p>
+
+<p>L'attribut <code>multiple</code> de l'élément <a href="/fr/docs/Web/HTML/Element/select"><code>&lt;select&gt;</code></a> représente un contrôle permettant de sélectionner zéro ou plusieurs options dans la liste d'options. Sinon, l'élément <a href="/fr/docs/Web/HTML/Element/select"><code>&lt;select&gt;</code></a> représente un contrôle permettant de sélectionner une seule <a href="/fr/docs/Web/HTML/Element/Option"><code>&lt;option&gt;</code></a> dans la liste d'options.</p>
+
+<pre class="brush: html">&lt;select multiple name="dwarfs" id="dwarfs"&gt;
+  &lt;option&gt;Grincheux&lt;/option&gt;
+  &lt;option&gt;Joyeux&lt;/option&gt;
+  &lt;option&gt;Dormeur&lt;/option&gt;
+  &lt;option&gt;Timide&lt;/option&gt;
+  &lt;option&gt;Atchoum&lt;/option&gt;
+  &lt;option&gt;Simplet&lt;/option&gt;
+  &lt;option&gt;Doc&lt;/option&gt;
+&lt;/select&gt;</pre>
+
+<p>Lorsque <code>multiple</code> est spécifié, la plupart des navigateurs affichent une boîte de liste défilante au lieu d'une liste déroulante à ligne unique.</p>
+
+<h2 id="examples">Exemples</h2>
+
+<h3 id="email_input">Saisie d'adresses électroniques</h3>
+
+<pre class="brush: html">&lt;label for="emails"&gt;A qui voulez-vous adresser un courriel ?&lt;/label&gt;
+&lt;input type="email" multiple name="emails" id="emails" list="dwarfemails" required size="64"&gt;
+
+&lt;datalist id="dwarfemails"&gt;
+  &lt;option value="grincheux@menuisiers.fr"&gt;Grincheux&lt;/option&gt;
+  &lt;option value="joyeux@menuisiers.fr"&gt;Joyeux&lt;/option&gt;
+  &lt;option value="dormeur@menuisiers.fr"&gt;Dormeur&lt;/option&gt;
+  &lt;option value="timide@menuisiers.fr"&gt;Timide&lt;/option&gt;
+  &lt;option value="atchoum@menuisiers.fr"&gt;Atchoum&lt;/option&gt;
+  &lt;option value="simplet@menuisiers.fr"&gt;Simplet&lt;/option&gt;
+  &lt;option value="doc@menuisiers.fr"&gt;Doc&lt;/option&gt;
+&lt;/datalist&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css">input:invalid {border: red solid 3px;}</pre>
+</div>
+
+<p>Si et seulement si l'attribut <code>multiple</code> est spécifié, la valeur peut être une liste d'adresses électroniques correctement formées et séparées par des virgules. Tout espace blanc de queue et de tête est supprimé de chaque adresse de la liste. Si l'attribut <a href="/fr/docs/Web/HTML/Attributs/required"><code>required</code></a> est présent, au moins une adresse électronique est requise.</p>
+
+<p>Certains navigateurs prennent en charge l'apparition de la <a href="/fr/docs/Web/HTML/Attributes/list">liste</a> d'options de la <a href="/fr/docs/Web/HTML/Element/datalist"><code>&lt;datalist&gt;</code></a> pour les adresses électroniques ultérieures lorsque <code>multiple</code> est présent. D'autres ne le font pas.</p>
+
+<div>{{EmbedLiveSample("email_input", '', 80)}}</div>
+
+<h3 id="file_input">Saisie de fichiers</h3>
+
+<p>Lorsque <code>multiple</code> est défini sur le type de saisie <a href="/fr/docs/Web/HTML/Element/Input/file"><code>file</code></a>, l'utilisateur peut sélectionner un ou plusieurs fichiers :</p>
+
+<pre class="brush: html">&lt;form method="post" enctype="multipart/form-data"&gt;
+  &lt;p&gt;
+    &lt;label for="uploads"&gt;
+      Choisissez les images que vous voulez télécharger :
+    &lt;/label&gt;
+    &lt;input type="file" id="uploads" name="uploads" accept=".jpg, .jpeg, .png, .svg, .gif" multiple&gt;
+  &lt;/p&gt;
+  &lt;p&gt;
+    &lt;label for="text"&gt;Choisissez un fichier texte à télécharger :&lt;/label&gt;
+    &lt;input type="file" id="text" name="text" accept=".txt"&gt;
+ &lt;/p&gt;
+  &lt;p&gt;
+    &lt;input type="submit" value="Soumettre"&gt;
+  &lt;/p&gt;
+&lt;/form&gt;</pre>
+
+<div>{{EmbedLiveSample("file_input", '', 160)}}</div>
+
+<p>Notez la différence d'aspect entre l'exemple avec <code>multiple</code> défini et l'autre entrée <code>file</code> sans.</p>
+
+<p>Lorsque le formulaire est soumis, si nous avions utilisé <a href="/fr/docs/Web/HTML/Element/Form"><code>method="get"</code></a> le nom de chaque fichier sélectionné aurait été ajouté aux paramètres de l'URL sous la forme <code>?uploads=img1.jpg&amp;uploads=img2.svg</code>. Cependant, étant donné que nous sommes en train d'additionner les données du formulaire <a href="/fr/docs/Web/API/XMLHttpRequest/multipart">multipart</a>, nous devons utiliser POST. Voir l'élément <a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a> et <a href="/fr/docs/Learn/Forms/Sending_and_retrieving_form_data#the_method_attribute">l'envoi de données de formulaire</a> pour plus d'informations.</p>
+
+<h3 id="select">Saisir plusieurs options</h3>
+
+<p>L'attribut <code>multiple</code> de l'élément <a href="/fr/docs/Web/HTML/Element/select"><code>&lt;select&gt;</code></a> représente un contrôle permettant de sélectionner zéro ou plusieurs options dans la liste d'options. Sinon, l'élément <a href="/fr/docs/Web/HTML/Element/select"><code>&lt;select&gt;</code></a> représente un contrôle permettant de sélectionner une seule <a href="/fr/docs/Web/HTML/Element/Option"><code>&lt;option&gt;</code></a> dans la liste des options. L'apparence du contrôle varie généralement en fonction de la présence de l'attribut multiple, la plupart des navigateurs affichant une liste déroulante à défilement au lieu d'une liste déroulante à ligne unique lorsque l'attribut est présent.</p>
+
+<pre class="brush: html">&lt;form method="get" action="#"&gt;
+&lt;p&gt;
+ &lt;label for="dwarfs"&gt;Sélectionnez les menuisiers que vous aimez :&lt;/label&gt;
+  &lt;select multiple name="dwarfs" id="dwarfs"&gt;
+    &lt;option&gt;grincheux@menuisiers.fr&lt;/option&gt;
+    &lt;option&gt;joyeux@menuisiers.fr&lt;/option&gt;
+    &lt;option&gt;dormeur@menuisiers.fr&lt;/option&gt;
+    &lt;option&gt;timide@menuisiers.fr&lt;/option&gt;
+    &lt;option&gt;atchoum@menuisiers.fr&lt;/option&gt;
+    &lt;option&gt;simplet@menuisiers.fr&lt;/option&gt;
+    &lt;option&gt;doc@menuisiers.fr&lt;/option&gt;
+  &lt;/select&gt;
+&lt;/p&gt;
+&lt;p&gt;
+ &lt;label for="favoriteOnly"&gt;Sélectionnez votre préféré :&lt;/label&gt;
+  &lt;select name="favoriteOnly" id="favoriteOnly"&gt;
+    &lt;option&gt;grincheux@menuisiers.fr&lt;/option&gt;
+    &lt;option&gt;joyeux@menuisiers.fr&lt;/option&gt;
+    &lt;option&gt;dormeur@menuisiers.fr&lt;/option&gt;
+    &lt;option&gt;timide@menuisiers.fr&lt;/option&gt;
+    &lt;option&gt;atchoum@menuisiers.fr&lt;/option&gt;
+    &lt;option&gt;simplet@menuisiers.fr&lt;/option&gt;
+    &lt;option&gt;doc@menuisiers.fr&lt;/option&gt;
+  &lt;/select&gt;
+&lt;/p&gt;
+&lt;p&gt;
+  &lt;input type="submit" value="Soumettre"&gt;
+&lt;/p&gt;
+&lt;/form&gt;</pre>
+
+<div>{{EmbedLiveSample("select", '', 220)}}</div>
+
+<p>Notez la différence d'apparence entre les deux contrôles de formulaire.</p>
+
+<pre class="brush: css">/* Décommentez ce CSS pour que le sélecteur multiple ait la même hauteur que le simple. */
+
+/*
+select[multiple] {
+  height: 1.5em;
+  vertical-align: top;
+}
+select[multiple]:focus,
+select[multiple]:active {
+  height: auto;
+}
+*/</pre>
+
+<p>Il existe plusieurs façons de sélectionner plusieurs options dans un élément <code>&lt;select&gt;</code> avec un attribut <code>multiple</code>. Selon le système d'exploitation, les utilisateurs de souris peuvent maintenir les touches <kbd>Ctrl</kbd>, <kbd>Commande</kbd> ou <kbd>Maj</kbd> enfoncées, puis cliquer sur plusieurs options pour les sélectionner/désélectionner. Les utilisateurs du clavier peuvent sélectionner plusieurs éléments contigus en ciblant l'élément <code>&lt;select&gt;</code>, en sélectionnant un élément en haut ou en bas de la plage qu'ils souhaitent sélectionner à l'aide des touches de curseur <kbd>Haut</kbd> et <kbd>Bas</kbd> pour monter et descendre dans les options. La sélection de non-contigus n'est pas aussi bien supportée : les éléments devraient pouvoir être sélectionnés et désélectionnés en appuyant sur <kbd>Espace</kbd> , mais le support varie selon les navigateurs.</p>
+
+<h2 id="accessibility_concerns">Accessibilité</h2>
+
+<p>Fournissez des instructions pour aider les utilisateurs à comprendre comment remplir le formulaire et utiliser les contrôles individuels du formulaire. Indiquez toute entrée obligatoire et facultative, les formats de données et toute autre information pertinente. Lorsque vous utilisez l'attribut <code>multiple</code>, informez l'utilisateur que plusieurs valeurs sont autorisées et donnez des indications sur la manière de fournir plusieurs valeurs, par exemple « séparez les adresses électroniques par une virgule ».</p>
+
+<p>Définir <code><a href="/fr/docs/Web/HTML/Attributes/size">size</a>="1"</code> sur une sélection multiple peut la faire apparaître comme une sélection unique dans certains navigateurs, mais elle ne s'étend alors pas au focus, ce qui nuit à la convivialité. Ne faites pas cela. Si vous modifiez l'apparence d'une sélection, et même si vous ne le faites pas, veillez à informer l'utilisateur que plusieurs options peuvent être sélectionnées par une autre méthode.</p>
+
+<h2 id="specifications">Spécifications</h2>
+
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th scope="col">Spécification</th>
+      <th scope="col">Statut</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>{{SpecName('HTML WHATWG', 'input.html#attr-input-multiple', 'l\'attribut multiple')}}</td>
+      <td>{{Spec2('HTML WHATWG')}}</td>
+    </tr>
+    <tr>
+      <td>{{SpecName('HTML5 W3C', 'input.html#attr-input-multiple', 'l\'attribut multiple')}}</td>
+      <td>{{Spec2('HTML5 W3C')}}</td>
+    </tr>
+  </tbody>
+</table>
+
+<h2 id="see_also">Voir aussi</h2>
+
+<ul>
+  <li>L'élément <a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a></li>
+  <li>L'élément <a href="/fr/docs/Web/HTML/Element/select"><code>&lt;select&gt;</code></a></li>
+  <li><a href="/fr/docs/Web/HTML/Element/Input/email#allowing_multiple_e-mail_addresses">Autoriser les adresses électroniques multiples</a></li>
+</ul>