diff options
Diffstat (limited to 'files/fr/learn/forms')
10 files changed, 16 insertions, 16 deletions
diff --git a/files/fr/learn/forms/basic_native_form_controls/index.md b/files/fr/learn/forms/basic_native_form_controls/index.md index 5258dc363f..2d74518150 100644 --- a/files/fr/learn/forms/basic_native_form_controls/index.md +++ b/files/fr/learn/forms/basic_native_form_controls/index.md @@ -550,7 +550,7 @@ Attention : la prise en charge du widget `color` n'est pas très bonne actuellem Il existe d'autres types de widgets qui ne peuvent pas être classés facilement à cause de leur comportement très particulier, mais qui sont toujours très utiles. -> **Note :** Vous trouverez les exemples de cette section sur GitHub à l'adresse [other-examples.html](https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/other-examples.html) (à voir aussi[ directement](https://mdn.github.io/learning-area/html/forms/native-form-widgets/other-examples.html)). +> **Note :** Vous trouverez les exemples de cette section sur GitHub à l'adresse [other-examples.html](https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/other-examples.html) (à voir aussi [directement](https://mdn.github.io/learning-area/html/forms/native-form-widgets/other-examples.html)). ### Sélection de fichier diff --git a/files/fr/learn/forms/form_validation/index.md b/files/fr/learn/forms/form_validation/index.md index 6709ff5102..351da31325 100644 --- a/files/fr/learn/forms/form_validation/index.md +++ b/files/fr/learn/forms/form_validation/index.md @@ -222,7 +222,7 @@ Supprimez maintenant le contenu de l'élément `<body>` et remplacez-le par le s ``` - Ici, nous avons donné au champ de texte une taille minimale et maximale de 6 caractères — la même que celle de _banane_ ou _cerise_. La saisie de moins de 6 caractères s'affichera comme non valide et la saisie de plus de 6 caractères ne sera pas possible dans la plupart des navigateurs. -- Nous avons également contraint le champ `number` à un `min` de 1 et un `max `de 10 — les nombres entrés hors de cette plage seront affichés comme non valides, et vous ne pourrez pas utiliser les flèches d'incrémentation/décrémentation pour porter la valeur en dehors de cette plage. +- Nous avons également contraint le champ `number` à un `min` de 1 et un `max` de 10 — les nombres entrés hors de cette plage seront affichés comme non valides, et vous ne pourrez pas utiliser les flèches d'incrémentation/décrémentation pour porter la valeur en dehors de cette plage. ```html hidden input:invalid { diff --git a/files/fr/learn/forms/how_to_build_custom_form_controls/index.md b/files/fr/learn/forms/how_to_build_custom_form_controls/index.md index 62c865a50b..80f5e7f772 100644 --- a/files/fr/learn/forms/how_to_build_custom_form_controls/index.md +++ b/files/fr/learn/forms/how_to_build_custom_form_controls/index.md @@ -773,11 +773,11 @@ Mais attendez, avons‑nous vraiment terminé ? Nous venons de faire quelque chose qui fonctionne, même si nous sommes loin d'avoir une boîte de sélection avec toutes les fonctionnalités, elle fonctionne parfaitement. Mais ce que nous avons fait n'est rien de plus que de jouer avec les DOM. Elle n'a pas de sémantique réelle, et même si elle ressemble à une boîte de sélection, du point de vue du navigateur, ce n'en est pas une, de sorte que les technologies d'assistance ne pourront pas comprendre que c'est une boîte de sélection. Bref, cette jolie nouvelle boîte de sélection n'est pas accessible ! -Heureusement, il existe une solution et elle s'appelle [ARIA](/fr/docs/Accessibility/ARIA "/en-US/docs/Accessibility/ARIA"). ARIA signifie « Accessible Rich Internet Application » et c'est une[ norme W3C ](http://www.w3.org/TR/wai-aria/)spécialement conçue pour ce que nous faisons ici : rendre accessibles les applications web et les widgets personnalisés. Il s'agit essentiellement d'un ensemble d'attributs qui étendent le HTML afin que nous puissions mieux décrire les rôles, les états et les propriétés comme si l'élément que nous venons de concevoir était l'élément natif pour lequel il essaie de passer. L'utilisation de ces attributs est très simple, alors faisons-le. +Heureusement, il existe une solution et elle s'appelle [ARIA](/fr/docs/Accessibility/ARIA "/en-US/docs/Accessibility/ARIA"). ARIA signifie « Accessible Rich Internet Application » et c'est une [norme W3C](http://www.w3.org/TR/wai-aria/) spécialement conçue pour ce que nous faisons ici : rendre accessibles les applications web et les widgets personnalisés. Il s'agit essentiellement d'un ensemble d'attributs qui étendent le HTML afin que nous puissions mieux décrire les rôles, les états et les propriétés comme si l'élément que nous venons de concevoir était l'élément natif pour lequel il essaie de passer. L'utilisation de ces attributs est très simple, alors faisons-le. ### L'attribut `role` -L'attribut clé utilisé par [ARIA](/fr/docs/Accessibility/ARIA "/en-US/docs/Accessibility/ARIA") est l'attribut [`role`](/fr/docs/Accessibility/ARIA/ARIA_Techniques "/en-US/docs/Accessibility/ARIA/ARIA_Techniques"). L'attribut [`role `](/fr/docs/Accessibility/ARIA/ARIA_Techniques "/en-US/docs/Accessibility/ARIA/ARIA_Techniques") accepte une valeur qui définit à quoi sert un élément. Chaque rôle définit ses propres exigences et comportements. Dans notre exemple, nous utiliserons le rôle de [`listbox`](/fr/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role "/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role"). C'est un « rôle composite », ce qui signifie que les éléments ayant ce rôle s'attendent à avoir des enfants, chacun avec un rôle spécifique (dans ce cas, au moins un enfant avec le rôle `option`). +L'attribut clé utilisé par [ARIA](/fr/docs/Accessibility/ARIA "/en-US/docs/Accessibility/ARIA") est l'attribut [`role`](/fr/docs/Accessibility/ARIA/ARIA_Techniques "/en-US/docs/Accessibility/ARIA/ARIA_Techniques"). L'attribut [`role`](/fr/docs/Accessibility/ARIA/ARIA_Techniques "/en-US/docs/Accessibility/ARIA/ARIA_Techniques") accepte une valeur qui définit à quoi sert un élément. Chaque rôle définit ses propres exigences et comportements. Dans notre exemple, nous utiliserons le rôle de [`listbox`](/fr/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role "/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role"). C'est un « rôle composite », ce qui signifie que les éléments ayant ce rôle s'attendent à avoir des enfants, chacun avec un rôle spécifique (dans ce cas, au moins un enfant avec le rôle `option`). Il faut aussi noter qu'ARIA définit les rôles appliqués par défaut aux balises HTML standard. Par exemple, l'élément {{HTMLElement("table")}} correspond au rôle `grid`, et l'élément {{HTMLElement("ul")}} correspond au rôle `list`. Comme nous utilisons un élément {{HTMLElement("ul")}}, nous voulons nous assurer que le rôle `listbox` de notre widget remplacera le rôle `list` de l'élément {{HTMLElement("ul")}}. À cette fin, nous utiliserons le rôle `presentation`. Ce rôle est conçu pour nous permettre d'indiquer qu'un élément n'a pas de signification particulière, et est utilisé uniquement pour présenter de l'information. Nous l'appliquerons à notre élément {{HTMLElement("ul")}}. diff --git a/files/fr/learn/forms/how_to_structure_a_web_form/index.md b/files/fr/learn/forms/how_to_structure_a_web_form/index.md index 2e3c1fd3fe..a0a7954b36 100644 --- a/files/fr/learn/forms/how_to_structure_a_web_form/index.md +++ b/files/fr/learn/forms/how_to_structure_a_web_form/index.md @@ -189,7 +189,7 @@ Chaque groupe de fonctionnalités séparées doit être contenu dans un élémen Mettons ces idées en pratique et construisons une structure de formulaire un peu plus sophistiquée — un formulaire de paiement. Il contiendra un certain nombre de types de widgets que vous ne comprenez pas encore — ne vous inquiétez pas pour l'instant ; vous découvrirez comment ils fonctionnent dans l'article suivant ([Les widgets natifs pour formulaire](/fr/docs/Learn/HTML/Forms/The_native_form_widgets)). Pour l'instant, lisez attentivement les descriptions en suivant les instructions ci-dessous et commencez à vous faire une idée des éléments enveloppes que nous utilisons pour structurer le formulaire, et pourquoi. -1. Pour commencer, faites une copie locale de notre [fichier modèle vierge](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html) et des [CSS pour notre formulaire de paiement ](https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/payment-form.css)dans un nouveau répertoire. +1. Pour commencer, faites une copie locale de notre [fichier modèle vierge](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html) et des [CSS pour notre formulaire de paiement](https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/payment-form.css) dans un nouveau répertoire. 2. Primo, appliquez les CSS au HTML en ajoutant la ligne suivante dans l'élément {{htmlelement("head")}} du HTML : ```html diff --git a/files/fr/learn/forms/html_forms_in_legacy_browsers/index.md b/files/fr/learn/forms/html_forms_in_legacy_browsers/index.md index e9380806b1..01405dcce2 100644 --- a/files/fr/learn/forms/html_forms_in_legacy_browsers/index.md +++ b/files/fr/learn/forms/html_forms_in_legacy_browsers/index.md @@ -22,7 +22,7 @@ En fait, lire la documentation sur ces navigateurs est la chose la plus importan - [le Blog WebKit](https://www.webkit.org/blog/) et [Planet WebKit](http://planet.webkit.org/) rassemblent les meilleurs articles par les déveoppeurs WebKit. - [l](https://www.chromestatus.com/features)e site État de la p[lateforme Chrome](https://www.chromestatus.com/features) est aussi importante. - - ainsi que le[ site web Apple .](https://developer.apple.com/technologies/safari/) + - ainsi que le [site web Apple](https://developer.apple.com/technologies/safari/). ### Documentation indépendante @@ -200,7 +200,7 @@ Modernizr.load({ L'équipe de Modernizr fait une maintenance opportune de grande liste de « [polyfills »](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills). Prenez celui dont vous avez besoin. -> **Note :** Modernizr a d'autres fonctionnalités remarquables pour faciliter le traitement du JavaScript non obstructif et les tecniques de simplifications élégantes. Prenez connaissance de [ la documentation de Modernizr](http://modernizr.com/docs/). +> **Note :** Modernizr a d'autres fonctionnalités remarquables pour faciliter le traitement du JavaScript non obstructif et les tecniques de simplifications élégantes. Prenez connaissance de [la documentation de Modernizr](http://modernizr.com/docs/). ### Faites attention aux performances diff --git a/files/fr/learn/forms/property_compatibility_table_for_form_controls/index.md b/files/fr/learn/forms/property_compatibility_table_for_form_controls/index.md index e4193009bc..4834f1872d 100644 --- a/files/fr/learn/forms/property_compatibility_table_for_form_controls/index.md +++ b/files/fr/learn/forms/property_compatibility_table_for_form_controls/index.md @@ -1871,7 +1871,7 @@ Il n'y a pas actuellement suffisemment d'implémentation pour obtenir des compor ### Widget `range` -Il n'y a pas de méthode standard pour changer le style de la poignée de` range` et Opera n'a aucun moyen de modifier le rendu par défaut du widget `range`. +Il n'y a pas de méthode standard pour changer le style de la poignée de `range` et Opera n'a aucun moyen de modifier le rendu par défaut du widget `range`. <table> <thead> diff --git a/files/fr/learn/forms/sending_and_retrieving_form_data/index.md b/files/fr/learn/forms/sending_and_retrieving_form_data/index.md index c530eaae7f..71ddd327e2 100644 --- a/files/fr/learn/forms/sending_and_retrieving_form_data/index.md +++ b/files/fr/learn/forms/sending_and_retrieving_form_data/index.md @@ -94,7 +94,7 @@ De nombreuses pages anciennes utilisent la notation suivante pour indiquer que l ### L'attribut method -Cet attribut définit comment les données sont envoyées. Le [Protocole HTTP ](/fr/docs/Web/HTTP)fournit plusieurs façons d'envoyer une requête. Les données des formulaires HTML peuvent être envoyées via au moins deux méthodes : la méthode `GET` et la méthode `POST`. +Cet attribut définit comment les données sont envoyées. Le [Protocole HTTP](/fr/docs/Web/HTTP) fournit plusieurs façons d'envoyer une requête. Les données des formulaires HTML peuvent être envoyées via au moins deux méthodes : la méthode `GET` et la méthode `POST`. Pour bien comprendre la différence entre ces deux méthodes, il convient d'examiner comment le protocole HTTP marche. Chaque fois qu'on veut atteindre une ressource sur Internet, le navigateur envoie une requête à une URL. Une requête HTTP consiste en deux parties : un en-tête (header) qui contient les métadonnées sur les capacités du navigateur, et un corps (body) qui contient les informations nécessaires au serveur pour effectuer la requête. @@ -167,7 +167,7 @@ Quand le formulaire est soumis avec la méthode `POST`, aucune donnée n'est ajo say=Hi&to=Mom -L'en-tête `Content-Length `indique la taille du corps, et l'en-tête `Content-Type` indique le type de ressources envoyées au serveur. Nous discuterons de ces en-têtes dans un moment. +L'en-tête `Content-Length` indique la taille du corps, et l'en-tête `Content-Type` indique le type de ressources envoyées au serveur. Nous discuterons de ces en-têtes dans un moment. > **Note :** Vous trouverez cet exemple sur GitHub — voyez [post-method.html](https://mdn.github.io/learning-area/html/forms/sending-form-data/post-method.html) (à voir [directement aussi](https://mdn.github.io/learning-area/html/forms/sending-form-data/get-method.html)). @@ -238,7 +238,7 @@ if __name__ == "__main__": Les deux prototypes référencés dans le code ci‑dessus sont les suivants : -- [form.html ](https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/form.html): Le même formulaire que celui vu plus haut dans la section [La méthode POST](#the_post_method) mais avec l'attribut `action` défini à la valeur `\{{url_for('hello')}}`. (C'est un modèle [Jinja2](https://jinja.pocoo.org/docs/2.9/), qui est HTML à la base mais peut contenir des appels à du code Python qui fait tourner le serveur web mis entre accolades. `url_for('hello')` dit en gros « à rediriger sur `/hello` quand le formulaire est soumis ».) +- [`form.html`](https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/form.html) : Le même formulaire que celui vu plus haut dans la section [La méthode POST](#the_post_method) mais avec l'attribut `action` défini à la valeur `\{{url_for('hello')}}`. (C'est un modèle [Jinja2](https://jinja.pocoo.org/docs/2.9/), qui est HTML à la base mais peut contenir des appels à du code Python qui fait tourner le serveur web mis entre accolades. `url_for('hello')` dit en gros « à rediriger sur `/hello` quand le formulaire est soumis ».) - [greeting.html](https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/greeting.html) : Ce modèle contient juste une ligne qui renvoie les deux éléments de donnée qui lui sont passées lors du rendu. Cela est effectué par l'intermédiaire de la fonction `hello()` vue plus haut qui s'exécute quand l'URL `/hello` est chargée dans le navigateur. > **Note :** À nouveau, ce code ne fonctionnera pas si vous tentez de le charger directement dans le navigateur. Python fonctionne un peu différemment de PHP — pour exécuter ce code localement il est nécessaire d'[installer Python/PIP](/fr/docs/Learn/Server-side/Django/development_environment#installing_python_3), puis Flask avec « `pip3 install flask` ». À ce moment‑là vous pourrez exécuter l'exemple avec « `python3 python-example.py` », puis en allant sur « `localhost:5000` » dans votre navigateur. diff --git a/files/fr/learn/forms/sending_forms_through_javascript/index.md b/files/fr/learn/forms/sending_forms_through_javascript/index.md index 2a91434804..f0e64a4440 100644 --- a/files/fr/learn/forms/sending_forms_through_javascript/index.md +++ b/files/fr/learn/forms/sending_forms_through_javascript/index.md @@ -28,7 +28,7 @@ L'envoi asynchrone de données arbitraires est connu sous le nom AJAX, qui signi -Historiquement, {{domxref("XMLHttpRequest")}} a été conçu pour récupérer et envoyer du XML comme format d'échange. Cependant,[ JSON](/fr/docs/Web/JavaScript/Reference/Objets_globaux/JSON) a remplacé XML et est de plus en plus courant aujourd'hui. +Historiquement, {{domxref("XMLHttpRequest")}} a été conçu pour récupérer et envoyer du XML comme format d'échange. Cependant, [JSON](/fr/docs/Web/JavaScript/Reference/Objets_globaux/JSON) a remplacé XML et est de plus en plus courant aujourd'hui. Mais ni XML ni JSON ne s'adaptent à l'encodage des demandes de données de formulaire. Les données de formulaire (`application/x-www-form-urlencoded`) sont constituées de listes de paires clé/valeur codées par URL. Pour la transmission de données binaires, la requête HTTP est transformée en données `multipart/form‑data`. diff --git a/files/fr/learn/forms/styling_web_forms/index.md b/files/fr/learn/forms/styling_web_forms/index.md index 1882911bf7..89c4f12824 100644 --- a/files/fr/learn/forms/styling_web_forms/index.md +++ b/files/fr/learn/forms/styling_web_forms/index.md @@ -169,7 +169,7 @@ Regardons sur un exemple concret la façon de composer un formulaire HTML. Cela ### HTML -Le HTML n'est qu'à peine plus développé que celui de l'exemple du premier[ article de ce guide](/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML "/en-US/docs/HTML/Forms/My_first_HTML_form") ; il ne comporte que quelques identifiants supplémentaires et un titre. +Le HTML n'est qu'à peine plus développé que celui de l'exemple du premier [article de ce guide](/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML "/en-US/docs/HTML/Forms/My_first_HTML_form") ; il ne comporte que quelques identifiants supplémentaires et un titre. ```html <form> @@ -202,7 +202,7 @@ C'est ici que le « fun » commence ! Avant de commencer à coder, nous avons be 1. L'[image de fond](/files/4151/background.jpg "The postcard background") de la carte postale — téléchargez cette image et sauvegardez‑la dans le même répertoire que votre fichier HTML de travail. 2. Une police de machine à écrire : [« Secret Typewriter » de fontsquirrel.com](http://www.fontsquirrel.com/fonts/Secret-Typewriter) — téléchargez le fichier TTF dans le même répertoire que ci‑dessus. -3. Une police d'écriture manuelle : [ « Journal » de fontsquirrel.com ](http://www.fontsquirrel.com/fonts/Journal)— téléchargez le fichier TTF dans le même répertoire que ci‑dessus. +3. Une police d'écriture manuelle : [« Journal » de fontsquirrel.com](http://www.fontsquirrel.com/fonts/Journal) — téléchargez le fichier TTF dans le même répertoire que ci‑dessus. diff --git a/files/fr/learn/forms/your_first_form/index.md b/files/fr/learn/forms/your_first_form/index.md index 6b6a1bd89f..bf49454b8c 100644 --- a/files/fr/learn/forms/your_first_form/index.md +++ b/files/fr/learn/forms/your_first_form/index.md @@ -151,7 +151,7 @@ Nous avons désormais notre formulaire HTML, et si vous le regardez dans votre n  -> **Note :** Si vous pensez que vous n'avez pas écrit un code HTML correct, faites la comparaison avec celui de notre exemple terminé — voyez [first-form.html](https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form.html) ([ ](https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form.html)ou[ également directement](https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form.html)). +> **Note :** Si vous pensez que vous n'avez pas écrit un code HTML correct, faites la comparaison avec celui de notre exemple terminé — voyez [first-form.html](https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form.html) (ou [également directement](https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form.html)). Les formulaires sont notoirement embêtants à présenter joliment. Apprendre la mise en page ou la décoration des formulaires sort du cadre de cet article, donc pour le moment nous allons simplement ajouter quelques indications au CSS pour lui donner un air convenable. @@ -259,7 +259,7 @@ Pour nommer vos données vous devez utiliser l'attribut `name` pour identifier b ... ``` -Dans notre exemple, le formulaire enverra trois informations nommées respectivement « `user_name` », « `user_email `» et « `user_message` ». Ces informations seront envoyées à l'URL « `/my-handling-form-page` » avec la méthode HTTP POST. +Dans notre exemple, le formulaire enverra trois informations nommées respectivement « `user_name` », « `user_email` » et « `user_message` ». Ces informations seront envoyées à l'URL « `/my-handling-form-page` » avec la méthode HTTP POST. Du côté du serveur, le script à l'URL « `/my-handling-form-page` » recevra les données sous forme d'une liste de trois éléments clé/valeur intégrés à la requête HTTP. À vous de définir comment ce script va manipuler les données. Chacun des langages serveurs (PHP, Python, Ruby, Java, C#, etc.) a son propre mécanisme pour traiter ces données. Il n'appartient pas à ce guide d'approfondir ce sujet, mais si vous souhaitez en savoir plus, nous avons mis quelques exemples dans l'article [Envoi des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_donn%C3%A9es_des_formulaires). |