Merge pull request #243 from TevaHenry/master

Forms: event and method submit

Author: HachemiH

2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.md

@@ -1,4 +1,4 @@
-A modal window can be implemented using a half-transparent `<div id="cover-div">` that covers the whole window, like this:
+Une fenêtre modale peut être implémentée en utilisant un `<div id="cover-div">` semi-transparent qui couvre toute la fenêtre, comme ceci:
 
 ```css
 #cover-div {
@@ -13,8 +13,8 @@ A modal window can be implemented using a half-transparent `<div id="cover-div">
 }
 ```
 
-Because the `<div>` covers everything, it gets all clicks, not the page below it.
+Parce que la `<div>` couvre tout, il obtient tous les clics, pas la page en dessous.
 
-Also we can prevent page scroll by setting `body.style.overflowY='hidden'`.
+Nous pouvons également empêcher le défilement de la page en définissant `body.style.overflowY ='hidden'`.
 
-The form should be not in the `<div>`, but next to it, because we don't want it to have `opacity`.
+Le formulaire ne doit pas être dans`<div>`, mais à côté, car nous ne voulons pas qu'il ait `opacity`.

2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md

@@ -2,32 +2,32 @@ importance: 5
 
 ---
 
-# Modal form
+# Formulaire modal
 
-Create a function `showPrompt(html, callback)` that shows a form with the message `html`, an input field and buttons `OK/CANCEL`.
+Créez une fonction `showPrompt(html, callback)` qui montre un formulaire avec le message `html`, un champ de saisie et des boutons `OK/CANCEL`.
 
-- A user should type something into a text field and press `key:Enter` or the OK button, then `callback(value)` is called with the value they entered.
-- Otherwise if the user presses `key:Esc` or CANCEL, then `callback(null)` is called.
+- Un utilisateur doit taper quelque chose dans un champ de texte et appuyer sur `key:Enter` ou sur le bouton OK, puis `callback(value)` est appelé avec la valeur saisie.
+- Sinon, si l'utilisateur appuie sur `key:Esc` ou CANCEL, alors `callback(null)` est appelé.
 
-In both cases that ends the input process and removes the form.
+Dans les deux cas, cela met fin au processus de saisie et supprime le formulaire.
 
-Requirements:
+Conditions:
 
-- The form should be in the center of the window.
-- The form is *modal*. In other words, no interaction with the rest of the page is possible until the user closes it.
-- When the form is shown, the focus should be inside the `<input>` for the user.
-- Keys `key:Tab`/`key:Shift+Tab` should shift the focus between form fields, don't allow it to leave for other page elements.
+- Le formulaire doit être au centre de la fenêtre.
+- Le formulaire est *modal*. En d'autres termes, aucune interaction avec le reste de la page n'est possible tant que l'utilisateur ne la ferme pas.
+- Lorsque le formulaire est affiché, le focus doit être à l'intérieur de `<input>` pour l'utilisateur.
+- Les touches `key:Tab`/`key:Shift+Tab` devraient déplacer le focus entre les champs du formulaire, ne pas lui permettre de partir pour d'autres éléments de la page.
 
-Usage example:
+Exemple d'utilisation:
 
 ```js
 showPrompt("Enter something<br>...smart :)", function(value) {
   alert(value);
 });
 ```
 
-A demo in the iframe:
+Une démo dans l'iframe:
 
 [iframe src="solution" height=160 border=1]
 
-P.S. The source document has HTML/CSS for the form with fixed positioning, but it's up to you to make it modal.
+P.S. Le document source contient HTML/CSS pour le formulaire avec un positionnement fixe, mais c'est à vous de le rendre modal.

2-ui/4-forms-controls/4-forms-submit/article.md

@@ -1,25 +1,23 @@
-# Forms: event and method submit
+# Formulaires: l'événement et la méthode "submit"
 
-The `submit` event triggers when the form is submitted, it is usually used to validate the form before sending it to the server or to abort the submission and process it in JavaScript.
+L'événement `submit` se déclenche lorsque le formulaire est soumis, il est généralement utilisé pour valider le formulaire avant de l'envoyer au serveur ou pour abandonner la soumission et la traiter en JavaScript.
 
-The method `form.submit()` allows to initiate form sending from JavaScript. We can use it to dynamically create and send our own forms to server.
+La méthode `form.submit()` permet de lancer l'envoi de formulaire depuis JavaScript. Nous pouvons l'utiliser pour créer et envoyer dynamiquement nos propres formulaires au serveur.
 
-Let's see more details of them.
+Voyons-les plus en détail.
 
-## Event: submit
+## Évènement: submit
 
-There are two main ways to submit a form:
+1. Le premier - cliquer sur `<input type="submit">` ou `<input type="image">`.
+2. La seconde - appuyez sur `key:Enter` dans un champ de saisie.
 
-1. The first -- to click `<input type="submit">` or `<input type="image">`.
-2. The second -- press `key:Enter` on an input field.
+Les deux actions mènent à l'événement `submit` sur le formulaire. Le gestionnaire peut vérifier les données, et s'il y a des erreurs, les afficher et appeler `event.preventDefault()`, alors le formulaire ne sera pas envoyé au serveur.
 
-Both actions lead to `submit` event on the form. The handler can check the data, and if there are errors, show them and call `event.preventDefault()`, then the form won't be sent to the server.
+Dans le formulaire ci-dessous:
+1. Allez dans le champ de texte et appuyez sur `key:Enter`.
+2. Cliquez sur `<input type ="submit">`.
 
-In the form below:
-1. Go into the text field and press `key:Enter`.
-2. Click `<input type="submit">`.
-
-Both actions show `alert` and the form is not sent anywhere due to `return false`:
+Les deux actions affichent `alert` et le formulaire n'est envoyé nulle part en raison de `return false`:
 
 ```html autorun height=60 no-beautify
 <form onsubmit="alert('submit!');return false">
@@ -28,12 +26,12 @@ Both actions show `alert` and the form is not sent anywhere due to `return false
 </form>
 ```
 
-````smart header="Relation between `submit` and `click`"
-When a form is sent using `key:Enter` on an input field, a `click` event triggers on the `<input type="submit">`.
+````smart header="Relation entre `submit` et `click`"
+Lorsqu'un formulaire est envoyé en utilisant `key:Enter` sur un champ de saisie, un événement `click` se déclenche sur `<input type="submit">`.
 
-That's rather funny, because there was no click at all.
+C'est plutôt drôle, car il n'y a pas eu de clic du tout.
 
-Here's the demo:
+Voici la démo:
 ```html autorun height=60
 <form onsubmit="return false">
  <input type="text" size="30" value="Focus here and press enter">
@@ -43,13 +41,13 @@ Here's the demo:
 
 ````
 
-## Method: submit
+## Méthode: submit
 
-To submit a form to the server manually, we can call `form.submit()`.
+Pour soumettre manuellement un formulaire au serveur, nous pouvons appeler `form.submit()`.
 
-Then the `submit` event is not generated. It is assumed that if the programmer calls `form.submit()`, then the script already did all related processing.
+Ensuite, l'événement `submit` n'est pas généré. On suppose que si le programmeur appelle `form.submit()`, alors le script a déjà effectué tous les traitements associés.
 
-Sometimes that's used to manually create and send a form, like this:
+Parfois, cela est utilisé pour créer et envoyer manuellement un formulaire, comme ceci:
 
 ```js run
 let form = document.createElement('form');
@@ -58,7 +56,7 @@ form.method = 'GET';
 
 form.innerHTML = '<input name="q" value="test">';
 
-// the form must be in the document to submit it
+// le formulaire doit être dans le document pour le soumettre
 document.body.append(form);
 
 form.submit();