diff --git a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.md b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.md index 781ce5d58..a6e4e69bb 100644 --- a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.md +++ b/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 `
` that covers the whole window, like this: +Una finestra modale può essere implementata usando un `
` 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 `
} ``` -Because the `
` covers everything, it gets all clicks, not the page below it. +Dato che il `
` 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 `
`, but next to it, because we don't want it to have `opacity`. +Il form non dovrebbe essere dentro il `
`, ma subito dopo nel codice della pagina (quindi starà anche sopra), perché non vogliamo che sia soggetto alla trasparenza dovuta ad `opacity`. diff --git a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md index bf6841c92..a9c84f8ae 100644 --- a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md +++ b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md @@ -4,21 +4,21 @@ 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 `` 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 `` 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
...smart :)", function(value) { @@ -26,8 +26,8 @@ showPrompt("Enter something
...smart :)", function(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. diff --git a/2-ui/4-forms-controls/4-forms-submit/article.md b/2-ui/4-forms-controls/4-forms-submit/article.md index c00c559c0..af49d2272 100644 --- a/2-ui/4-forms-controls/4-forms-submit/article.md +++ b/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 `` or ``. -2. The second -- press `key:Enter` on an input field. +1. Il primo -- cliccare `` o ``. +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 ``. +Nel form seguente: +1. Andare nel campo di testo e premere `key:Enter`. +2. Cliccare ``. -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
- First: Enter in the input field
- Second: Click "submit": + Primo: Entrare nel campo di testo
+ Secondo: Clicare "submit":
``` ````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 ``. +Quando un form viene inviato usando `key:Enter` su un campo di input, un evento `click` viene scaturito sull'elemento ``. -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
- +
``` ```` -## 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 = ''; -// 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();