Merge pull request #234 from longo-andrea/article/forms

Forms: event and method submit

Author: longo-andrea

2-ui/4-forms-controls/1-form-elements/1-add-select-option/solution.md

@@ -1,4 +1,4 @@
-The solution, step by step:
+La soluzione, passo per passo:
 
 ```html run
 <select id="genres">

2-ui/4-forms-controls/1-form-elements/1-add-select-option/task.md

@@ -2,9 +2,9 @@ importance: 5
 
 ---
 
-# Add an option to select
+# Aggiungi un opzione di select
 
-There's a `<select>`:
+Abbiamo una select `<select>`:
 
 ```html
 <select id="genres">
@@ -13,10 +13,10 @@ There's a `<select>`:
 </select>
 ```
 
-Use JavaScript to:
+Utilizza JavaScript per:
 
-1. Show the value and the text of the selected option.
-2. Add an option: `<option value="classic">Classic</option>`.
-3. Make it selected.
+1. Mostrare il valore ed il testo dell'opzione selezionata.
+2. Aggiungere un opzione: `<option value="classic">Classic</option>`.
+3. Selezionarla.
 
-Note, if you've done everything right, your alert should show `blues`.
+Nota, se hai fatto tutto giusto, l'alert dovrebbe mostrare `blues`.

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:
+Una finestra modale può essere implementata usando un `<div id="cover-div">` semitrasparente che copre l'intera finestra, in questa maniera:
 
 ```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.
+Dato che il `<div>` copre ogni cosa, sarà questo elemento a catturare tutti i click, e non la pagina sottostante.
 
-Also we can prevent page scroll by setting `body.style.overflowY='hidden'`.
+Inoltre può essere prevenuto lo scrolling della pagina impostando `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`.
+Il form non dovrebbe essere dentro il `<div>`, ma subito dopo nel codice della pagina (quindi starà anche sopra), perché non vogliamo che sia soggetto alla trasparenza dovuta ad `opacity`.

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

@@ -4,30 +4,30 @@ importance: 5
 
 # Modal form
 
-Create a function `showPrompt(html, callback)` that shows a form with the message `html`, an input field and buttons `OK/CANCEL`.
+Creare una funzione `showPrompt(html, callback)` che mostra un form con un messaggio `html`, un campo di input ed i pulsanti `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 utente dovrebbe digitare qualcosa nel campo di testo e premere `key:Enter` o il pulsante OK, quindi verrà chiamata `callback(value)` con il valore che è stato inserito.
+- Altrimenti, se l'utente preme `key:Esc` oppure CANCEL, viene chiamata `callback(null)`.
 
-In both cases that ends the input process and removes the form.
+In entrambi i casi, questo termina l'elaborazione dell'input e rimuove il form.
 
-Requirements:
+Requisiti:
 
-- 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.
+- Il form dovrebbe essere al centro della finestra.
+- Il form è *modal*. In altre parole, non possono esserci interazioni con il resto della pagina fino a quando non viene chiusa.
+- Quando viene mostrato il form, il focus dovrebbe essere dentro il campo `<input>` per l'utente.
+- I tasti `key:Tab`/`key:Shift+Tab` dovrebbe cambiare il focus tra i campi del form, e non permettergli di lasciarlo per altri elementi della pagina.
 
-Usage example:
+Un esempio di come dovrebbe funzionare:
 
 ```js
 showPrompt("Enter something<br>...smart :)", function(value) {
   alert(value);
 });
 ```
 
-A demo in the iframe:
+Una demo nell'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.: Il sorgente del documento ha HTML e CSS per il form, con posizionamento fixed, ma sta a te renderla modale.

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

@@ -1,55 +1,55 @@
-# Forms: event and method submit
+# Form: eventi e metodi di 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'evento `submit` si scatena quando il form viene inviato, e solitamente viene usato per validare il form prima dell'invio al server o per annullare l'invio e elaborarlo con 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.
+Il metodo `form.submit()` ci permette di iniziare l'invio del form da JavaScript. Possiamo usarlo per creare ed inviare i nostri form al server dinamicamente.
 
-Let's see more details of them.
+Andiamo più nel dettaglio.
 
-## Event: submit
+## Evento: submit
 
-There are two main ways to submit a form:
+Ci sono due modi per inviare un form:
 
-1. The first -- to click `<input type="submit">` or `<input type="image">`.
-2. The second -- press `key:Enter` on an input field.
+1. Il primo -- cliccare `<input type="submit">` o `<input type="image">`.
+2. Il secondo -- premere `key:Enter` su un campo di input.
 
-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.
+Entrambe le azioni portano all'evento `submit` del form. Il gestore può controllare i dati, ed in caso di errori, può mostrarli e chiamare `event.preventDefault()`, ed a quel punto il form non viene inviato al server.
 
-In the form below:
-1. Go into the text field and press `key:Enter`.
-2. Click `<input type="submit">`.
+Nel form seguente:
+1. Andare nel campo di testo e premere `key:Enter`.
+2. Cliccare `<input type="submit">`.
 
-Both actions show `alert` and the form is not sent anywhere due to `return false`:
+Entrambe le azioni mostrano un `alert` ed il form non viene inviato da nessuna parte a causa di `return false`:
 
 ```html autorun height=60 no-beautify
 <form onsubmit="alert('submit!');return false">
-  First: Enter in the input field <input type="text" value="text"><br>
-  Second: Click "submit": <input type="submit" value="Submit">
+  Primo: Entrare nel campo di testo <input type="text" value="text"><br>
+  Secondo: Clicare "submit": <input type="submit" value="Submit">
 </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">`.
+Quando un form viene inviato usando `key:Enter` su un campo di input, un evento `click` viene scaturito sull'elemento `<input type="submit">`.
 
-That's rather funny, because there was no click at all.
+Ciò è piuttosto divertente, dal momento che non c'è stato nessun click.
 
-Here's the demo:
+Ecco la demo:
 ```html autorun height=60
 <form onsubmit="return false">
- <input type="text" size="30" value="Focus here and press enter">
+ <input type="text" size="30" value="Porre il focus qui e premere Invio">
  <input type="submit" value="Submit" *!*onclick="alert('click')"*/!*>
 </form>
 ```
 
 ````
 
-## Method: submit
+## Metodo: submit
 
-To submit a form to the server manually, we can call `form.submit()`.
+Per eseguire l'invio (submit)  di un form sul server manualmente, possiamo chiamare `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.
+In questo caso l'evento di `submit` non viene generato. Si assume che il programmatore chiamando `form.submit()`, abbia previsto che nello script siano state considerate tutte le dovute elaborazioni.
 
-Sometimes that's used to manually create and send a form, like this:
+Talvolta viene usato per creare ed inviare manualmente un form, come in questo esempio:
 
 ```js run
 let form = document.createElement('form');
@@ -58,7 +58,7 @@ form.method = 'GET';
 
 form.innerHTML = '<input name="q" value="test">';
 
-// the form must be in the document to submit it
+// il form deve essere nel documento per poterlo inviare
 document.body.append(form);
 
 form.submit();