diff options
| author | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2022-03-16 17:52:18 +0100 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-03-16 17:52:18 +0100 |
| commit | 500f444d23a7a758da229ebe6b9691cc5d4fe731 (patch) | |
| tree | ca277561f7f3c5f2c9c3e80a895ac32f30852238 /files/fr/web/html/element/input | |
| parent | de831e4687986c3a60b9ced69ce9faefda8df4b9 (diff) | |
| download | translated-content-500f444d23a7a758da229ebe6b9691cc5d4fe731.tar.gz translated-content-500f444d23a7a758da229ebe6b9691cc5d4fe731.tar.bz2 translated-content-500f444d23a7a758da229ebe6b9691cc5d4fe731.zip | |
Fix #4269 - Removes empty/special characters (#4270)
* Remove ufeff
* Remove u2064
* Remove u2062
* Replace u202f followed by : with :
* Replace u202f next to « or » with and « or »
* Replace u202f followed by ; with ;
* Replace u202f followed by ! with
* Replace u202f followed by ? with ?
* Replace remaining u202f with classical space
* Replace u200b surrounded by space with classical space
* Replace u200b surrounded by space with classical space - again (repeated)
* Remove remaining u200b
* Remove u200a
* Replace u2009 with
* Remove u00ad
* Replace u00a0 followed by : ! or ? with and punctuation
* Replace u00a0 surrounded « or » with and punctuation
* Replace u00a0 followed by whitespaces
* Replace u00a0 preceded by whitespaces
* Replace u00a0 followed by a newline with a newline
* Replace u00a0 followed by a newline with a newline - Take2
* Replace u00a0 followed by a ; and punctuation
* Remove u00a0 followed by ,
* Remove u00a0 in indentation spaces with \n([ ]*)([\u00a0])([ ]*)
* Manual replacement of ([\u00a0])([ ]+)
* Replace remaining ([\u00a0]+) by a space
* cleaning empty elements
* remove ufe0f
* Remove u00a0 and u202f after merging against updated main
* remove double whitespace using (\w)( )(\w)
Diffstat (limited to 'files/fr/web/html/element/input')
| -rw-r--r-- | files/fr/web/html/element/input/button/index.md | 2 | ||||
| -rw-r--r-- | files/fr/web/html/element/input/date/index.md | 6 | ||||
| -rw-r--r-- | files/fr/web/html/element/input/datetime-local/index.md | 2 | ||||
| -rw-r--r-- | files/fr/web/html/element/input/email/index.md | 4 | ||||
| -rw-r--r-- | files/fr/web/html/element/input/file/index.md | 4 | ||||
| -rw-r--r-- | files/fr/web/html/element/input/image/index.md | 2 | ||||
| -rw-r--r-- | files/fr/web/html/element/input/index.md | 4 | ||||
| -rw-r--r-- | files/fr/web/html/element/input/password/index.md | 2 | ||||
| -rw-r--r-- | files/fr/web/html/element/input/range/index.md | 20 | ||||
| -rw-r--r-- | files/fr/web/html/element/input/reset/index.md | 2 | ||||
| -rw-r--r-- | files/fr/web/html/element/input/search/index.md | 2 | ||||
| -rw-r--r-- | files/fr/web/html/element/input/submit/index.md | 2 | ||||
| -rw-r--r-- | files/fr/web/html/element/input/tel/index.md | 20 | ||||
| -rw-r--r-- | files/fr/web/html/element/input/text/index.md | 8 | ||||
| -rw-r--r-- | files/fr/web/html/element/input/url/index.md | 2 |
15 files changed, 41 insertions, 41 deletions
diff --git a/files/fr/web/html/element/input/button/index.md b/files/fr/web/html/element/input/button/index.md index e0ff7fcca8..ef0e339629 100644 --- a/files/fr/web/html/element/input/button/index.md +++ b/files/fr/web/html/element/input/button/index.md @@ -144,7 +144,7 @@ function disableBtn() { Si l'attribut `disabled` n'est pas fourni, il est hérité depuis l'élément parent. De cette façon, on peut activer/désactiver des groupes d'éléments en les plaçant dans un conteneur (par exemple un élément {{HTMLElement("fieldset")}}) et en indiquant `disabled` sur le conteneur. -C'est ce qu'illustre l'exemple suivant. Il est semblable à l'exemple précédent mais l'attribut `disabled` est activé sur l'élément `<fieldset>` lorsqu'on appuie sur le premier bouton. Les trois autres boutons sont donc désactivés pendant deux secondes. +C'est ce qu'illustre l'exemple suivant. Il est semblable à l'exemple précédent mais l'attribut `disabled` est activé sur l'élément `<fieldset>` lorsqu'on appuie sur le premier bouton. Les trois autres boutons sont donc désactivés pendant deux secondes. #### Exemple 2 diff --git a/files/fr/web/html/element/input/date/index.md b/files/fr/web/html/element/input/date/index.md index 0ec7d916c7..a41d265409 100644 --- a/files/fr/web/html/element/input/date/index.md +++ b/files/fr/web/html/element/input/date/index.md @@ -233,7 +233,7 @@ C'est pour cela que la meilleure solution consiste à avoir trois champs de sais ## Exemples -Dans l'exemple qui suit, on crée deux éléments d'interface utilisateur afin de choisir une date : le premier qui utilise un sélecteur natif `<input type="date">` et un second qui utilise trois éléments {{htmlelement("select")}} qui permettra de choisir une date pour les anciens navigateurs qui ne prendraient pas en charge le contrôle natif. +Dans l'exemple qui suit, on crée deux éléments d'interface utilisateur afin de choisir une date : le premier qui utilise un sélecteur natif `<input type="date">` et un second qui utilise trois éléments {{htmlelement("select")}} qui permettra de choisir une date pour les anciens navigateurs qui ne prendraient pas en charge le contrôle natif. {{EmbedLiveSample('Exemples', 600, 100)}} @@ -348,7 +348,7 @@ function populateDays(month) { // Si le mois est février, on calcule si l'année est bissextile var year = yearSelect.value; var leap = new Date(year, 1, 29).getMonth() == 1; - dayNum = leap ? 29 : 28; + dayNum = leap ? 29 : 28; } // on ajoute le bon nombre de jours dans autant @@ -441,7 +441,7 @@ daySelect.onchange = function() { <td> {{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, - {{htmlattrxref("readonly", "input")}} et + {{htmlattrxref("readonly", "input")}} et {{htmlattrxref("step", "input")}} </td> </tr> diff --git a/files/fr/web/html/element/input/datetime-local/index.md b/files/fr/web/html/element/input/datetime-local/index.md index 02f7a49cd6..a5d22bfb05 100644 --- a/files/fr/web/html/element/input/datetime-local/index.md +++ b/files/fr/web/html/element/input/datetime-local/index.md @@ -222,7 +222,7 @@ C'est ce second problème qui est le plus important. Comme nous l'avons mentionn - `mm-dd-yyyy HH:mm` (heure exprimée sur 24 heures) - etc. -Une façon de contourner ce problème est de placer un attribut {{htmlattrxref("pattern", "input")}} dans l'élément ` <input type="``datetime-local"> `. Bien que cet élément n'utilise pas cet attribut, s'il est converti en `<input type="text">` par le navigateur, le motif sera alors utilisé. Vous pouvez par exemple essayer le code suivant dans un navigateur qui ne prend pas en charge `<input type="datetime-local">` : +Une façon de contourner ce problème est de placer un attribut {{htmlattrxref("pattern", "input")}} dans l'élément ` <input type="``datetime-local"> `. Bien que cet élément n'utilise pas cet attribut, s'il est converti en `<input type="text">` par le navigateur, le motif sera alors utilisé. Vous pouvez par exemple essayer le code suivant dans un navigateur qui ne prend pas en charge `<input type="datetime-local">` : ```html <form> diff --git a/files/fr/web/html/element/input/email/index.md b/files/fr/web/html/element/input/email/index.md index 22250ac4cf..769f4ae2d2 100644 --- a/files/fr/web/html/element/input/email/index.md +++ b/files/fr/web/html/element/input/email/index.md @@ -290,7 +290,7 @@ C'est pour cela qu'on indique la chaîne de caractères "Merci de fournir unique ## Exemples -Dans l'exemple qui suit, on peut saisir une adresse électronique qui contient au plus 256 caractères. La boîte de saisie affichera au plus 64 caractères et contiendra le texte `"user@example.gov"` comme indication lorsque le champ est vide. On trouve également l'attribut {{htmlattrxref("multiple", "input")}} qui permet de saisir zéro ou plusieurs adresses séparées par des virgules (cf. ci-avant). Enfin, l'attribut {{htmlattrxref("list", "input")}} utilisé indique un identifiant d'un élément {{HTMLElement("datalist")}} dont les éléments {{HTMLElement("option")}} déterminent les valeurs suggérées qui peuvent être sélectionnées par l'utilisateur. +Dans l'exemple qui suit, on peut saisir une adresse électronique qui contient au plus 256 caractères. La boîte de saisie affichera au plus 64 caractères et contiendra le texte `"user@example.gov"` comme indication lorsque le champ est vide. On trouve également l'attribut {{htmlattrxref("multiple", "input")}} qui permet de saisir zéro ou plusieurs adresses séparées par des virgules (cf. ci-avant). Enfin, l'attribut {{htmlattrxref("list", "input")}} utilisé indique un identifiant d'un élément {{HTMLElement("datalist")}} dont les éléments {{HTMLElement("option")}} déterminent les valeurs suggérées qui peuvent être sélectionnées par l'utilisateur. L'élément {{HTMLElement("label")}} qui précède l'élément `<input>` permettra d'afficher un libellé avant la boîte de saisie. Le lien entre les deux est fait grâce à l'attribut `for` qui contient `"emailAddress"` qui est l'identifiant de l'élément {{HTMLElement("input")}}. Grâce à cette association, cliquer sur l'étiquette permettra de placer le focus sur le champ de saisie. @@ -338,7 +338,7 @@ L'élément {{HTMLElement("label")}} qui précède l'élément `<input>` permett {{htmlattrxref("multiple", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, - {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("required", "input")}} + {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("required", "input")}} et {{htmlattrxref("size", "input")}} </td> </tr> diff --git a/files/fr/web/html/element/input/file/index.md b/files/fr/web/html/element/input/file/index.md index 8d329673d4..7f9e702da0 100644 --- a/files/fr/web/html/element/input/file/index.md +++ b/files/fr/web/html/element/input/file/index.md @@ -80,7 +80,7 @@ Un identifiant de type de fichier est une chaîne de caractères qui décrit le - Une extension de fichier valide, sensible à la casse et qui commence par un point (« . »). Par exemple : `.jpg`, `.pdf` ou `.doc`. - Un type MIME valide, sans extension. - La chaîne de caractères `audio/*` qui indique « n'importe quel fichier audio » -- La chaîne de caractères `video/*` qui indique « n'importe quel fichier vidéo » +- La chaîne de caractères `video/*` qui indique « n'importe quel fichier vidéo » - La chaîne de caractères `image/*` qui indique « n'importe quel fichier image ». L'attribut `accept` prend comme valeur une chaîne de caractères composée d'un ou plusieurs identifiants de type, séparés par des virgules. Ainsi, si un sélecteur de fichier doit permettre de sélectionner des images ou des documents PDF, on pourra écrire : @@ -125,7 +125,7 @@ Lorsqu'on envoie le formulaire de l'exemple, le nom de chaque fichier sera ajout ### Obtenir des informations sur les fichiers sélectionnés -Les fichiers sélectionnés peuvent être obtenus sous la forme d'un objet {{domxref("FileList")}} renvoyé par la propriété `HTMLInputElement.files` de l'élement du DOM. Cet objet est une liste d'objets {{domxref("File")}}. Un objet `FileList` se comporte comme un tableau et on peut donc consulter sa longueur (la propriété `length`) afin de connaître le nombre de fichiers sélectionnés. +Les fichiers sélectionnés peuvent être obtenus sous la forme d'un objet {{domxref("FileList")}} renvoyé par la propriété `HTMLInputElement.files` de l'élement du DOM. Cet objet est une liste d'objets {{domxref("File")}}. Un objet `FileList` se comporte comme un tableau et on peut donc consulter sa longueur (la propriété `length`) afin de connaître le nombre de fichiers sélectionnés. Chaque objet `File` contient les informations suivantes : diff --git a/files/fr/web/html/element/input/image/index.md b/files/fr/web/html/element/input/image/index.md index 03ffa06680..44772647af 100644 --- a/files/fr/web/html/element/input/image/index.md +++ b/files/fr/web/html/element/input/image/index.md @@ -58,7 +58,7 @@ Une chaîne de caractères qui identifie la méthode d'encodage à utiliser pour - `application/x-www-form-urlencoded` - : Les informations sont envoyées sous la forme d'une chaîne de caractères ajoutée à l'URL en utilisant l'algorithme de {{jsxref("encodeURI", "encodeURI()")}}. **Cette valeur est la valeur par défaut.** - `multipart/form-data` - - : Cette valeur utilise l'API {{domxref("FormData")}} pour gérer les données et permet d'*uploader*des fichiers. Cet encodage _doit_ être utilisé s'il y a des éléments {{HTMLElement("input")}} de {{htmlattrxref("type", "input")}} `"file"` ([`<input type="file">`](/fr/docs/Web/HTML/Element/input/file)). + - : Cette valeur utilise l'API {{domxref("FormData")}} pour gérer les données et permet d'*uploader*des fichiers. Cet encodage _doit_ être utilisé s'il y a des éléments {{HTMLElement("input")}} de {{htmlattrxref("type", "input")}} `"file"` ([`<input type="file">`](/fr/docs/Web/HTML/Element/input/file)). - `text/plain` - : Les données sont envoyées comme texte simple. Cette valeur est généralement utile pour déboguer car elle permet de voir facilement les données envoyées. diff --git a/files/fr/web/html/element/input/index.md b/files/fr/web/html/element/input/index.md index ccbdcb79bc..35adc2c7eb 100644 --- a/files/fr/web/html/element/input/index.md +++ b/files/fr/web/html/element/input/index.md @@ -25,7 +25,7 @@ Les types de champs disponibles sont : - `{{HTMLElement("input/button", "button")}}` : un bouton sans comportement défini. - `{{HTMLElement("input/checkbox", "checkbox")}}` : une case à cocher qui permet de sélectionner/déselectionner une valeur - `{{HTMLElement("input/color", "color")}}` : {{HTMLVersionInline("5")}} un contrôle qui permet de définir une couleur. -- `{{HTMLElement("input/date", "date")}}` : {{HTMLVersionInline("5")}} un contrôle qui permet de saisir une date (composé d'un jour, d'un mois et d'une année). +- `{{HTMLElement("input/date", "date")}}` : {{HTMLVersionInline("5")}} un contrôle qui permet de saisir une date (composé d'un jour, d'un mois et d'une année). - `{{HTMLElement("input/datetime-local", "datetime-local")}}` : {{HTMLVersionInline("5")}} un contrôle qui permet de saisir une date et une heure (sans fuseau horaire). - `{{HTMLElement("input/email", "email")}}` : {{HTMLVersionInline("5")}} un champ qui permet de saisir une adresse éléctronique. - `{{HTMLElement("input/file", "file")}}` : un contrôle qui permet de sélectionner un fichier. L'attribut **`accept`** définit les types de fichiers qui peuvent être sélectionnés. @@ -122,7 +122,7 @@ L'attribut `list` n'est pas pris en charge pour les types `hidden`, `password`, Une chaîne de caractères qui définit le nom associé au champ. Ce nom sera envoyé avec la valeur lors de l'envoi du formulaire. -Lorsqu'un champ a un nom, cette valeur devient une propriété de {{domxref("HTMLFormElement.elements")}} qu'on pourra utiliser en JavaScript (ex. si on a un attribut `name` qui vaut `hat-size` : +Lorsqu'un champ a un nom, cette valeur devient une propriété de {{domxref("HTMLFormElement.elements")}} qu'on pourra utiliser en JavaScript (ex. si on a un attribut `name` qui vaut `hat-size` : ```js let form = document.querySelector("form"); diff --git a/files/fr/web/html/element/input/password/index.md b/files/fr/web/html/element/input/password/index.md index 3099a4465e..b4e3a11e68 100644 --- a/files/fr/web/html/element/input/password/index.md +++ b/files/fr/web/html/element/input/password/index.md @@ -252,7 +252,7 @@ L'attribut {{htmlattrxref("inputmode", "input")}} vaut `number`, ce qui incite l <td> {{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}} - et + et {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}} </td> </tr> diff --git a/files/fr/web/html/element/input/range/index.md b/files/fr/web/html/element/input/range/index.md index eb985953b5..377e4c12c2 100644 --- a/files/fr/web/html/element/input/range/index.md +++ b/files/fr/web/html/element/input/range/index.md @@ -18,7 +18,7 @@ Si le navigateur de l'utilisateur ne prend pas en charge le type `range`, il uti ## Valeur -L'attribut {{htmlattrxref("value", "input")}} contient une chaîne de caractères {{domxref("DOMString")}} qui correspond à la représentation textuelle du nombre sélectionnée. La valeur n'est jamais une chaîne vide (`""`). La valeur par défaut est celle médiane entre le minimum et le maximum (sauf si la valeur maximale indiquée est inférieure à la valeur minimale, auquel cas la valeur par défaut est celle de l'attribut `min`). Voici un fragment de code illustrant cet algorithme pour le choix de la valeur par défaut : +L'attribut {{htmlattrxref("value", "input")}} contient une chaîne de caractères {{domxref("DOMString")}} qui correspond à la représentation textuelle du nombre sélectionnée. La valeur n'est jamais une chaîne vide (`""`). La valeur par défaut est celle médiane entre le minimum et le maximum (sauf si la valeur maximale indiquée est inférieure à la valeur minimale, auquel cas la valeur par défaut est celle de l'attribut `min`). Voici un fragment de code illustrant cet algorithme pour le choix de la valeur par défaut : ```js defaultValue = (rangeElem.max < rangeElem.min) ? rangeElem.min @@ -106,7 +106,7 @@ Cet exemple permet à l'utilisateur de choisir une valeur entre 0 et 3.14 sans a ### Ajouter des marques et des étiquettes -La spécification HTML fournit une certaine flexibilité aux navigateurs pour représenter le contrôle de saisie. La spécification indique comment ajouter des informations pour certains niveaux de l'intervalle grâce à l'attribut {{htmlattrxref("list", "input")}} et à un élément {{HTMLElement("datalist")}}. En revanche, il n'y a pas de spécifications précises quant aux marques (tirets) positionnés le long du contrôle. +La spécification HTML fournit une certaine flexibilité aux navigateurs pour représenter le contrôle de saisie. La spécification indique comment ajouter des informations pour certains niveaux de l'intervalle grâce à l'attribut {{htmlattrxref("list", "input")}} et à un élément {{HTMLElement("datalist")}}. En revanche, il n'y a pas de spécifications précises quant aux marques (tirets) positionnés le long du contrôle. #### Aperçus @@ -278,9 +278,9 @@ Ensuite, on applique quelques règles CSS. Voici la règle CSS pour l'élément ```css .slider-wrapper { display: inline-block; - width: 20px; - height: 150px; - padding: 0; + width: 20px; + height: 150px; + padding: 0; } ``` @@ -288,11 +288,11 @@ Ensuite, on applique une transformation sur l'élément `<input>` au sein de l'e ```css .slider-wrapper input { - width: 150px; - height: 20px; - margin: 0; - transform-origin: 75px 75px; - transform: rotate(-90deg); + width: 150px; + height: 20px; + margin: 0; + transform-origin: 75px 75px; + transform: rotate(-90deg); } ``` diff --git a/files/fr/web/html/element/input/reset/index.md b/files/fr/web/html/element/input/reset/index.md index c05051aea7..1e429b0cab 100644 --- a/files/fr/web/html/element/input/reset/index.md +++ b/files/fr/web/html/element/input/reset/index.md @@ -122,7 +122,7 @@ Aucune fonctionnalité de vérification native côté client n'est implémentée <tr> <td><strong>Attributs pris en charge</strong></td> <td> - {{htmlattrxref("type", "input")}} et + {{htmlattrxref("type", "input")}} et {{htmlattrxref("value", "input")}} </td> </tr> diff --git a/files/fr/web/html/element/input/search/index.md b/files/fr/web/html/element/input/search/index.md index a7bfd39ab4..c90ac45edc 100644 --- a/files/fr/web/html/element/input/search/index.md +++ b/files/fr/web/html/element/input/search/index.md @@ -376,7 +376,7 @@ Vous pouvez consulter un exemple de formulaire de recherche dans notre exemple [ {{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("maxlength", "input")}}, - {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("required", "input")}}, {{htmlattrxref("size", "input")}}. + {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("required", "input")}}, {{htmlattrxref("size", "input")}}. </td> </tr> <tr> diff --git a/files/fr/web/html/element/input/submit/index.md b/files/fr/web/html/element/input/submit/index.md index 01d495d09b..3899db3da1 100644 --- a/files/fr/web/html/element/input/submit/index.md +++ b/files/fr/web/html/element/input/submit/index.md @@ -60,7 +60,7 @@ Une chaîne de caractères qui identifie la méthode d'encodage à utiliser pour - `application/x-www-form-urlencoded` - : Les informations sont envoyées sous la forme d'une chaîne de caractères ajoutée à l'URL en utilisant l'algorithme de {{jsxref("encodeURI", "encodeURI()")}}. **Cette valeur est la valeur par défaut.** - `multipart/form-data` - - : Cette valeur utilise l'API {{domxref("FormData")}} pour gérer les données et permet d'*uploader*des fichiers. Cet encodage _doit_ être utilisé s'il y a des éléments {{HTMLElement("input")}} de {{htmlattrxref("type", "input")}} `"file"` ([`<input type="file">`](/fr/docs/Web/HTML/Element/input/file)). + - : Cette valeur utilise l'API {{domxref("FormData")}} pour gérer les données et permet d'*uploader*des fichiers. Cet encodage _doit_ être utilisé s'il y a des éléments {{HTMLElement("input")}} de {{htmlattrxref("type", "input")}} `"file"` ([`<input type="file">`](/fr/docs/Web/HTML/Element/input/file)). - `text/plain` - : Les données sont envoyées comme texte simple. Cette valeur est généralement utile pour déboguer car elle permet de voir facilement les données envoyées. diff --git a/files/fr/web/html/element/input/tel/index.md b/files/fr/web/html/element/input/tel/index.md index 5b503a511e..02fdce9c4e 100644 --- a/files/fr/web/html/element/input/tel/index.md +++ b/files/fr/web/html/element/input/tel/index.md @@ -112,7 +112,7 @@ Dans l'exemple suivant, on a un contrôle `"tel"` avec un attribut `placeholder` ```html <input id="telNo" name="telNo" type="tel" - placeholder="01 23 45 67 89"> + placeholder="01 23 45 67 89"> ``` {{EmbedLiveSample('Textes_indicatifs_-_placeholders', 600, 40)}} @@ -127,7 +127,7 @@ La taille physique de la boîte de saisie peut être contrôlée avec l'attribut ```html <input id="telNo" name="telNo" type="tel" - size="20"> + size="20"> ``` {{EmbedLiveSample('La_taille_physique', 600, 40)}} @@ -140,7 +140,7 @@ Dans l'exemple qui suit, on crée un contrôle qui mesure 20 caractères de larg ```html <input id="telNo" name="telNo" type="tel" - size="20" minlength="9" maxlength="14"> + size="20" minlength="9" maxlength="14"> ``` {{EmbedLiveSample("La_longueur_de_la_valeur", 600, 40)}} @@ -153,29 +153,29 @@ Il est possible de fournir une valeur par défaut en renseignant au préalable l ```html <input id="telNo" name="telNo" type="tel" - value="01 23 45 67 89"> + value="01 23 45 67 89"> ``` {{EmbedLiveSample("Fournir_une_valeur_par_défaut", 600, 40)}} #### Afficher des suggestions -Si on souhaite aller plus loin, on peut fournir une liste de suggestions parmi lesquelles l'utilisateur pourra choisir (il pourra également saisir la valeur de son choix si celle-ci ne fait pas partie de la liste). Pour cela, on utilisera l'attribut {{htmlattrxref("list", "input")}} dont la valeur est l'identifiant d'un élément {{HTMLElement("datalist")}} qui contient autant d'éléments {{HTMLElement("option")}} que de valeurs suggérées. C'est la valeur de l'attribut `value` de chaque élément `<option>` qui sera utilisée comme suggestion. +Si on souhaite aller plus loin, on peut fournir une liste de suggestions parmi lesquelles l'utilisateur pourra choisir (il pourra également saisir la valeur de son choix si celle-ci ne fait pas partie de la liste). Pour cela, on utilisera l'attribut {{htmlattrxref("list", "input")}} dont la valeur est l'identifiant d'un élément {{HTMLElement("datalist")}} qui contient autant d'éléments {{HTMLElement("option")}} que de valeurs suggérées. C'est la valeur de l'attribut `value` de chaque élément `<option>` qui sera utilisée comme suggestion. ```html <input id="telNo" name="telNo" type="tel" list="defaultTels"> <datalist id="defaultTels"> - <option value="01 23 45 67 89"> - <option value="02 45 67 89 01"> - <option value="03 45 67 89 12"> - <option value="04 56 87 98 32"> + <option value="01 23 45 67 89"> + <option value="02 45 67 89 01"> + <option value="03 45 67 89 12"> + <option value="04 56 87 98 32"> </datalist> ``` {{EmbedLiveSample("Afficher_des_suggestions", 600, 40)}} -Avec l'élément {{HTMLElement("datalist")}} contenant ces différentes valeurs {{HTMLElement("option")}}, le navigateur affichera une liste déroulante (ou un autre élément d'interface utilisateur) afin que l'utilisateur puisse éventuellement choisir parmi les suggestions. Lorsque l'utilisateur saisit dans le contrôle, la liste des suggestions est restreinte à celles qui correspondent encore. +Avec l'élément {{HTMLElement("datalist")}} contenant ces différentes valeurs {{HTMLElement("option")}}, le navigateur affichera une liste déroulante (ou un autre élément d'interface utilisateur) afin que l'utilisateur puisse éventuellement choisir parmi les suggestions. Lorsque l'utilisateur saisit dans le contrôle, la liste des suggestions est restreinte à celles qui correspondent encore. ## Validation diff --git a/files/fr/web/html/element/input/text/index.md b/files/fr/web/html/element/input/text/index.md index 1b616957e4..a6f1e700d6 100644 --- a/files/fr/web/html/element/input/text/index.md +++ b/files/fr/web/html/element/input/text/index.md @@ -52,7 +52,7 @@ Le champ [ne sera pas valide](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validatio ### {{htmlattrdef("pattern")}} -L'attribut `pattern` est une expression rationnelle que doit respecter la valeur ({{htmlattrxref("value")}}) du champ afin d'être [valide](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation). Cette expression rationnelle doit être une expression rationnelle valide pour JavaScript (telle qu'utilisée par {{jsxref("RegExp")}} et telle que documentée dans [ce guide](/fr/docs/Web/JavaScript/Guide/Expressions_régulières)). Le marqueur `'u'` est fourni par le navigateur lors de la compilation de l'expression rationnelle afin que le motif soit traité comme une séquence de points de code Unicode plutôt que comme des caractères ASCII. Aucune barre oblique (/) ne devrait être utilisée autour du motif. +L'attribut `pattern` est une expression rationnelle que doit respecter la valeur ({{htmlattrxref("value")}}) du champ afin d'être [valide](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation). Cette expression rationnelle doit être une expression rationnelle valide pour JavaScript (telle qu'utilisée par {{jsxref("RegExp")}} et telle que documentée dans [ce guide](/fr/docs/Web/JavaScript/Guide/Expressions_régulières)). Le marqueur `'u'` est fourni par le navigateur lors de la compilation de l'expression rationnelle afin que le motif soit traité comme une séquence de points de code Unicode plutôt que comme des caractères ASCII. Aucune barre oblique (/) ne devrait être utilisée autour du motif. Si l'expression rationnelle est invalide ou que cet attribut n'est pas défini, l'attribut est ignoré. @@ -64,9 +64,9 @@ Voir [la section sur l'utilisation de cet attribut ci-après](#format) pour plus L'attribut `placeholder` est une chaîne de caractères fournissant une courte indication à l'utilisateur quant à l'information attendue dans le champ. Cet attribut devrait être un mot ou une phrase courte qui illustre le type de donnée attendu plutôt qu'un message explicatif. Le texte ne doit pas contenir de saut à la ligne. -Si le contenu du contrôle respecte une directionnalité donnée ({{Glossary("LTR")}} ou {{Glossary("RTL")}}) et que le texte indicatif doit être présenté dans l'autre sens, il est possible d'utiliser l'algorithme de formatage bidirectionnel Unicode (cf. {{SectionOnPage("/en-US/docs/Web/Localization/Unicode_Bidirectional_Text_Algorithm", "Overriding BiDi using Unicode control characters")}}). +Si le contenu du contrôle respecte une directionnalité donnée ({{Glossary("LTR")}} ou {{Glossary("RTL")}}) et que le texte indicatif doit être présenté dans l'autre sens, il est possible d'utiliser l'algorithme de formatage bidirectionnel Unicode (cf. {{SectionOnPage("/en-US/docs/Web/Localization/Unicode_Bidirectional_Text_Algorithm", "Overriding BiDi using Unicode control characters")}}). -> **Note :** On évitera, tant que faire se peut, d'utiliser l'attribut `placeholder` car il n'est pas sémantiquement très utile pour expliquer le formulaire et car il peut causer certains problèmes avec le contenu. Voir {{SectionOnPage("/fr/docs/Web/HTML/Element/input", "Libellés et textes indicatifs")}} pour plus d'informations. +> **Note :** On évitera, tant que faire se peut, d'utiliser l'attribut `placeholder` car il n'est pas sémantiquement très utile pour expliquer le formulaire et car il peut causer certains problèmes avec le contenu. Voir {{SectionOnPage("/fr/docs/Web/HTML/Element/input", "Libellés et textes indicatifs")}} pour plus d'informations. ### {{htmlattrdef("readonly")}} @@ -360,7 +360,7 @@ En plus des exemples précédents, vous pouvez consulter les articles [Un premie {{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("maxlength", "input")}}, - {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("required", "input")}}, {{htmlattrxref("readonly", "input")}}, + {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("required", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("size", "input")}}. </td> </tr> diff --git a/files/fr/web/html/element/input/url/index.md b/files/fr/web/html/element/input/url/index.md index e9f7950ab4..af6b05d62e 100644 --- a/files/fr/web/html/element/input/url/index.md +++ b/files/fr/web/html/element/input/url/index.md @@ -302,7 +302,7 @@ En plus des exemples précédents, vous pouvez consulter [l'exemple de validatio {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, - {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("required", "input")}} + {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("required", "input")}} et {{htmlattrxref("size", "input")}} </td> </tr> |
