From a5fcfafb665e96cae5d04dfba927db8dcdfd7f14 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Sun, 13 Dec 2020 17:16:08 -0500 Subject: 2020-12-13 --- .../les_blocs_de_formulaires_natifs/index.html | 70 +++++++++++----------- 1 file changed, 35 insertions(+), 35 deletions(-) (limited to 'files/fr/web') diff --git a/files/fr/web/guide/html/formulaires/les_blocs_de_formulaires_natifs/index.html b/files/fr/web/guide/html/formulaires/les_blocs_de_formulaires_natifs/index.html index 97c4a12af6..6b692ee256 100644 --- a/files/fr/web/guide/html/formulaires/les_blocs_de_formulaires_natifs/index.html +++ b/files/fr/web/guide/html/formulaires/les_blocs_de_formulaires_natifs/index.html @@ -51,7 +51,7 @@ translation_of: Learn/Forms/Basic_native_form_controls autofocus (false) - Cet attribut, booléen, vous permet de spécifier que cet élément doit avoir automatiquement le focus au chargement de la page, sauf si l'utilisateur prend la main, en faisant, par exemple, une saisie dans un autre contrôle. Un seul élément associé à une forme peut avoir cet attribut activé. + Cet attribut, booléen, vous permet de spécifier que cet élément doit avoir automatiquement le focus au chargement de la page, sauf si l'utilisateur prend la main, en faisant, par exemple, une saisie dans un autre contrôle. Seul un élément associé à un formulaire peut avoir cet attribut activé. disabled @@ -107,7 +107,7 @@ translation_of: Learn/Forms/Basic_native_form_controls

Voici un exemple élémentaire de champ texte sur une ligne :

-
<input type="text" id="comment" name="comment" value="Je suis un champ texte">
+
<input type="text" id="comment" name="comment" value="Je suis un champ texte">

Les champs texte sur une ligne n'ont qu'une seule contrainte : si vous saisissez du texte avec des sauts de ligne, le navigateur les supprime avant d'envoyer les données.

@@ -119,7 +119,7 @@ translation_of: Learn/Forms/Basic_native_form_controls

Ce type de champ est défini en donnant la valeur email à l'attribut {{htmlattrxref("type","input")}} :

-
    <input type="email" id="email" name="email" multiple>
+
    <input type="email" id="email" name="email" multiple>

Avec ce type , l'utilisateur doit saisir un e‑mail valide dans le champ. Tout autre type de contenu amène le navigateur à émettre une erreur lors de la soumission du formulaire. Notez que cette validation s'opère côté client et est faite par le navigateur :

@@ -137,7 +137,7 @@ translation_of: Learn/Forms/Basic_native_form_controls

Ce type de champ est défini en donnant la valeur password à l'attribut {{htmlattrxref("type","input")}} :

-
    <input type="password" id="pwd" name="pwd">
+
    <input type="password" id="pwd" name="pwd">

Aucune contrainte de saisie du texte n'est ajoutée, mais la valeur entrée dans le champ est masquée (avec des points ou des astérisques) afin qu'elle ne puisse pas être lue par d'autres.

@@ -149,7 +149,7 @@ translation_of: Learn/Forms/Basic_native_form_controls

Ce type de champ se définit avec la valeur search de l'attribut {{htmlattrxref("type","input")}} :

-
    <input type="search" id="search" name="search">
+
    <input type="search" id="search" name="search">

La principale différence entre un champ textuel et un champ de recherche est dans l'apparence — souvent, les champs de recherche sont affichés avec des coins arrondis, et/ou avec une « × » à cliquer pour effacer la valeur entrée. Toutefois, une fonction est aussi ajoutée : les valeurs saisies peuvent être automatiquement enregistrées afin d'être utilisées pour compléter des recherches sur plusieurs pages du même site.

@@ -159,7 +159,7 @@ translation_of: Learn/Forms/Basic_native_form_controls

Ce type de champ se définit en donnant la valeur tel à l'attribut {{htmlattrxref("type","input")}} :

-
    <input type="tel" id="tel" name="tel">
+
    <input type="tel" id="tel" name="tel">

À cause de la grande variété de formats de numéros de téléphones à travers le monde, ce type de champ n'ajoute pas de contrainte à la valeur saisie par l'utilisateur. C'est principalement une différence sémantique, bien que sur certains appareils (notamment mobiles) un clavier virtuel différent, mieux adapté à la saisie de numéros de téléphone, puisse être présenté.

@@ -167,7 +167,7 @@ translation_of: Learn/Forms/Basic_native_form_controls

Ce type de champ se définit en donnant la valeur url à l'attribut {{htmlattrxref("type","input")}} :

-
    <input type="url" id="url" name="url">
+
    <input type="url" id="url" name="url">

Il ajoute une contrainte de validation spéciale du champ ; le navigateur renvoie une erreur si une URL invalide est saisie.

@@ -181,7 +181,7 @@ translation_of: Learn/Forms/Basic_native_form_controls

Un champ texte sur plusieurs lignes  se définit avec l'élément {{HTMLElement("textarea")}}, et non avec l'élément {{HTMLElement("input")}}.

-
    <textarea cols="30" rows="10"></textarea>
+
    <textarea cols="30" rows="10"></textarea>

La principale différence entre un champ textarea et un champ monoligne est que, dans un textarea, l'utilisateur peut saisir du texte avec des sauts de ligne en dur (c'est à dire en pressant la touche Retour).

@@ -238,7 +238,7 @@ translation_of: Learn/Forms/Basic_native_form_controls

Une boîte à sélection est créée avec l'élément {{HTMLElement("select")}} complétée d'un ou plusieurs éléments enfants {{HTMLElement("option")}} définissant les valeurs possibles.

-
    <select>
+
    <select>
       <option>Banane</option>
       <option>Cerise</option>
       <option>Citron</option>
@@ -246,7 +246,7 @@ translation_of: Learn/Forms/Basic_native_form_controls
 
 
Si nécessaire, la valeur par défaut de la boîte de sélection peut être définie en utilisant l'attribut {{htmlattrxref("selected","option")}} dans l'élément {{HTMLElement("option")}} désiré. Les éléments {{HTMLElement("option")}} peuvent être imbriqués dans des éléments {{HTMLElement("optgroup")}} pour créer des groupes de valeurs associées :

 
-
    <select>
+
    <select>
       <optgroup label="Fruits">
         <option>Banane</option>
         <option selected>Cerise</option>
@@ -271,7 +271,7 @@ translation_of: Learn/Forms/Basic_native_form_controls
 
 
Dans ce cas toutefois, la boîte d'utilisateur n'affiche plus les valeurs sous forme d'un menu déroulant. Les valeurs sont toutes affichées dans une liste.

 
-
    <select multiple>
+
    <select multiple>
       <option>Banane</option>
       <option>Cerise</option>
       <option>Citron</option>
@@ -289,7 +289,7 @@ translation_of: Learn/Forms/Basic_native_form_controls
 
 
Une fois la liste de données affiliée au widget de formulaire, ses options s'utilisent comme complémentation du texte saisi par l'utilisateur ; cela se présente généralement à l'utilisateur sous forme d'une boîte déroulante listant des correspondances possibles avec ce qui doit être saisi dans la boîte.

 
-
    <label for="onFruit">Quel est votre fruit préféré ?</label>
+
    <label for="onFruit">Quel est votre fruit préféré ?</label>
     <input type="text" id="onFruit" list="maSuggestion" />
     <datalist id="maSuggestion">
       <option>Pomme</option>
@@ -313,7 +313,7 @@ translation_of: Learn/Forms/Basic_native_form_controls
 
 
Pour gérer cela, voici une petite astuce offrant une bonne solution de repli pour ces navigateurs :

 
-
<label for="myFruit">Quel est votre fruit préféré ? (avec repli)</label>
+
<label for="myFruit">Quel est votre fruit préféré ? (avec repli)</label>
 <input type="text" id="myFruit" name="fruit" list="fruitList">
 
 <datalist id="fruitList">
@@ -364,7 +364,7 @@ translation_of: Learn/Forms/Basic_native_form_controls
 
 
Une casce à cocher se crée avec l'élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur checkbox.

 
-
    <input type="checkbox" checked id="carrots" name="carrots" value="carrots">
+
    <input type="checkbox" checked id="carrots" name="carrots" value="carrots">
 

 
 
Mettre l'attribut checked fait que la case sera cochée au chargement de la page.

@@ -375,11 +375,11 @@ translation_of: Learn/Forms/Basic_native_form_controls
 
 
Un bouton radio se crée avec un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a la valeur radio.

 
-
    <input type="radio" checked id="soup" name="meal">

+
    <input type="radio" checked id="soup" name="meal">

 
 
Plusieurs boutons radio peuvent être liés ensemble. S'ils partagent la même valeur pour leur attribut {{htmlattrxref("name","input")}}, ils seront considérés comme faisant partie d'un seul groupe de boutons. Seulement un bouton à la fois peut être coché par groupe. Ceci signifie que si l'un d'entre eux est coché, tous les autres sont automatiquement décochés. Lorsque le formulaire est envoyé, seule la valeur du bouton coché est envoyée. Si aucun des boutons n'est coché, l'ensemble des boutons du groupe est considéré comme étant dans un état inconnu et aucune valeur n'est envoyée avec le formulaire.

 
-
<fieldset>
+
<fieldset>
   <legend>Quel est votre mets préféré ?</legend>
   <ul>
     <li>
@@ -416,7 +416,7 @@ translation_of: Learn/Forms/Basic_native_form_controls
 
 
submit

 
-
    <button type="submit">
+
    <button type="submit">
         Ceci est un <br><strong>bouton d'envoi</strong>
     </button>
 
@@ -424,7 +424,7 @@ translation_of: Learn/Forms/Basic_native_form_controls
 
 
reset

 
-
    <button type="reset">
+
    <button type="reset">
         Ceci est un <br><strong>bouton de réinitialisation</strong>
     </button>
 
@@ -432,7 +432,7 @@ translation_of: Learn/Forms/Basic_native_form_controls
 
 
anonymous

 
-
    <button type="button">
+
    <button type="button">
         Ceci est un <br><strong>bouton lambda</strong>
     </button>
 
@@ -466,7 +466,7 @@ translation_of: Learn/Forms/Basic_native_form_controls
 
 
Exemple

 
-
    <input type="number" name="age" id="age" min="1" max="10" step="2">

+
    <input type="number" name="age" id="age" min="1" max="10" step="2">

 
 
Ceci créé un widget pour un nombre dont la valeur est comprise entre 1 et 10 et dont les boutons d'incrémentation/décrémentation modifient la valeur par pas de 2.

 
@@ -478,20 +478,20 @@ translation_of: Learn/Forms/Basic_native_form_controls
 
 
Exemple

 
-
    <input type="range" name="beans" id="beans" min="0" max="500" step="10">
+
    <input type="range" name="beans" id="beans" min="0" max="500" step="10">
 

 
 
Cet exemple créé un curseur dont les valeurs varient entre 0 et 500, et dont les bouton d'incrément/décrément font varier la valeur de ±10.

 
 
Un problème avec les curseurs est qu'il n'offrent aucun moyen visue de savoir quelle est leur valeur courante. Il est nécessaire d'ajouter cela vous‑même à l'aide de JavaScript, mais c'est assez facile. Dans cet exemple nous ajoutons un élément {{htmlelement("span")}} dans lequel nous écrivons la valeur courante du curseur et la mettons à jour quand elle est modifiée.

 
-
<label for="beans">Combien de haricots pouvez‑vous manger ?</label>
+
<label for="beans">Combien de haricots pouvez‑vous manger ?</label>
 <input type="range" name="beans" id="beans" min="0" max="500" step="10">
 <span class="beancount"></span>

 
 
et en  JavaScript :

 
-
var beans = document.querySelector('#beans');
+
var beans = document.querySelector('#beans');
 var count = document.querySelector('.beancount');
 
 count.textContent = beans.value;
@@ -514,29 +514,29 @@ beans.oninput <input type="datetime-local" name="datetime" id="datetime">

+
<input type="datetime-local" name="datetime" id="datetime">

 
 
month

 
 
Cette valeur d'attribut créé un widget pour afficher et sélectionner un mois dans une année donnée.

 
-
<input type="month" name="month" id="month">

+
<input type="month" name="month" id="month">

 
 
time

 
 
Cette valeur d'attribut créé un widget pour afficher et sélectionner un horaire.

 
-
<input type="time" name="time" id="time">

+
<input type="time" name="time" id="time">

 
 
week

 
 
Cette valeur d'attribut crée un widget pour afficher et sélectionner une semaine et l'année correspondante.

 
-
<input type="week" name="week" id="week">

+
<input type="week" name="week" id="week">

 
 
Tous les contrôles de sélection de date et heure peuvent être contraints à l'aide des attributs {{htmlattrxref("min","input")}} et {{htmlattrxref("max","input")}}.

 
-
    <label for="maDate">Quand êtes vous disponible cet été ?</label>
+
    <label for="maDate">Quand êtes vous disponible cet été ?</label>
     <input type="date" min="2013-06-01" max="2013-08-31" id="maDate">

 
 
Attention : Les widgets de date et heure sont encore peu pris en charge. Au moment de la rédaction de cet article, Chrome, Edge et Opera les prennent bien en charge, mais il n'y a pas de prise en charge dans Internet Explorer et Firefox et Safari n'ont qu'une prise en charge lacunaire de ces derniers.

@@ -547,7 +547,7 @@ beans.oninput color.

 
-
<input type="color" name="color" id="color">

+
<input type="color" name="color" id="color">

 
 
Attention : la prise en charge du widget color n'est pas très bonne actuellement. Il n'y a aucune prise en charge dans Internet Explorer, ni actuellement dans Safari. Les autres navigateurs majeurs le prennent en charge.

 
@@ -569,7 +569,7 @@ beans.oninput <input type="file" name="file" id="file" accept="image/*" multiple>

+
<input type="file" name="file" id="file" accept="image/*" multiple>

 
 
Contenu caché

 
@@ -577,7 +577,7 @@ beans.oninput     <input type="hidden" id="timestamp" name="timestamp" value="1286705410">

+
    <input type="hidden" id="timestamp" name="timestamp" value="1286705410">

 
 
Image-bouton

 
@@ -585,7 +585,7 @@ beans.oninput image. Cet élément accepte exactement le même ensemble d'attributs que l'élément {{HTMLElement("img")}}, en plus de tous les attributs valides pour n'importe quel bouton de formulaire.

 
-
    <input type="image" alt="Click me!" src="my-img.png" width="80" height="30" />

+
    <input type="image" alt="Click me!" src="my-img.png" width="80" height="30" />

 
 
Si l'image-bouton est utilisée pour envoyer un formulaire, ce widget n'envoie pas sa valeur mais les coordonnées X et Y du clic sur l'image (les coordonnées sont relatives à l'image, ce qui veut dire que le coin supérieur gauche représente les coordonnées 0, 0). Les coordonnées sont envoyées sous la forme de deux paires de clé/valeur :

 
@@ -596,7 +596,7 @@ beans.oninput     http://foo.com?pos.x=123&pos.y=456

 
 
C'est une façon très commode de construire une « hot map » (cartographie des parties d'une page Internet le plus souvent balayées par le regard des lecteurs). La manière d'envoyer et d'extraire ces valeurs est détaillée dans l'article « Envoi des données de formulaire ».

 
@@ -608,7 +608,7 @@ beans.oninput 
 
-
    <progress max="100" value="75">75/100</progress>

+
    <progress max="100" value="75">75/100</progress>

 
 
Cela sert à mettre en œuvre visuellement un rapport d'avancement, comme le pourcentage du nombre total de fichiers téléchargés ou le nombre de questions posées dans un questionnaire.

 
@@ -645,7 +645,7 @@ beans.oninput 
 
-
<meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter>

+
<meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter>

 
 
Le contenu de l'élément {{HTMLElement("meter")}} est un affichage informatif de repli pour les navigateurs ne prenant pas en charge cet élément ; les technologies d'assistance vocalisent cet affichage.

 
-- 
cgit v1.2.3-54-g00ecf