From 0c2f867a4cb5808e72e2109441d7932368349378 Mon Sep 17 00:00:00 2001
From: Alessandro De Blasis <alex@deblasis.net>
Date: Sun, 24 Feb 2019 10:16:33 +0000
Subject: [PATCH 01/14] wip

---
 content/docs/forms.md |  3 +++
 examples/forms/1.js   | 30 +++++++++++++++++++++++++++++
 examples/forms/2.js   | 35 +++++++++++++++++++++++++++++++++
 examples/forms/3.js   | 45 +++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 113 insertions(+)
 create mode 100644 examples/forms/1.js
 create mode 100644 examples/forms/2.js
 create mode 100644 examples/forms/3.js

diff --git a/content/docs/forms.md b/content/docs/forms.md
index 1a8b599d5..68007b3cd 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -65,6 +65,7 @@ class NameForm extends React.Component {
 ```
 
 [**Try it on CodePen**](https://codepen.io/gaearon/pen/VmmPgp?editors=0010)
+[](codepen://forms/1)
 
 Since the `value` attribute is set on our form element, the displayed value will always be `this.state.value`, making the React state the source of truth. Since `handleChange` runs on every keystroke to update the React state, the displayed value will update as the user types.
 
@@ -179,6 +180,7 @@ class FlavorForm extends React.Component {
 ```
 
 [**Try it on CodePen**](https://codepen.io/gaearon/pen/JbbEzX?editors=0010)
+[](codepen://forms/2)
 
 Overall, this makes it so that `<input type="text">`, `<textarea>`, and `<select>` all work very similarly - they all accept a `value` attribute that you can use to implement a controlled component.
 
@@ -255,6 +257,7 @@ class Reservation extends React.Component {
 ```
 
 [**Try it on CodePen**](https://codepen.io/gaearon/pen/wgedvV?editors=0010)
+[](codepen://forms/3)
 
 Note how we used the ES6 [computed property name](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names) syntax to update the state key corresponding to the given input name:
 
diff --git a/examples/forms/1.js b/examples/forms/1.js
new file mode 100644
index 000000000..422825033
--- /dev/null
+++ b/examples/forms/1.js
@@ -0,0 +1,30 @@
+class NameForm extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {value: ''};
+
+    this.handleChange = this.handleChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  handleChange(event) {
+    this.setState({value: event.target.value});
+  }
+
+  handleSubmit(event) {
+    alert('A name was submitted: ' + this.state.value);
+    event.preventDefault();
+  }
+
+  render() {
+    return (
+      <form onSubmit={this.handleSubmit}>
+        <label>
+          Name:
+          <input type="text" value={this.state.value} onChange={this.handleChange} />
+        </label>
+        <input type="submit" value="Submit" />
+      </form>
+    );
+  }
+}
\ No newline at end of file
diff --git a/examples/forms/2.js b/examples/forms/2.js
new file mode 100644
index 000000000..a0c254745
--- /dev/null
+++ b/examples/forms/2.js
@@ -0,0 +1,35 @@
+class FlavorForm extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {value: 'coconut'};
+
+    this.handleChange = this.handleChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  handleChange(event) {
+    this.setState({value: event.target.value});
+  }
+
+  handleSubmit(event) {
+    alert('Your favorite flavor is: ' + this.state.value);
+    event.preventDefault();
+  }
+
+  render() {
+    return (
+      <form onSubmit={this.handleSubmit}>
+        <label>
+          Pick your favorite flavor:
+          <select value={this.state.value} onChange={this.handleChange}>
+            <option value="grapefruit">Grapefruit</option>
+            <option value="lime">Lime</option>
+            <option value="coconut">Coconut</option>
+            <option value="mango">Mango</option>
+          </select>
+        </label>
+        <input type="submit" value="Submit" />
+      </form>
+    );
+  }
+}
\ No newline at end of file
diff --git a/examples/forms/3.js b/examples/forms/3.js
new file mode 100644
index 000000000..a7f76f841
--- /dev/null
+++ b/examples/forms/3.js
@@ -0,0 +1,45 @@
+class Reservation extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isGoing: true,
+      numberOfGuests: 2
+    };
+
+    this.handleInputChange = this.handleInputChange.bind(this);
+  }
+
+  handleInputChange(event) {
+    const target = event.target;
+    const value = target.type === 'checkbox' ? target.checked : target.value;
+    const name = target.name;
+
+    this.setState({
+      [name]: value
+    });
+  }
+
+  render() {
+    return (
+      <form>
+        <label>
+          Is going:
+          <input
+            name="isGoing"
+            type="checkbox"
+            checked={this.state.isGoing}
+            onChange={this.handleInputChange} />
+        </label>
+        <br />
+        <label>
+          Number of guests:
+          <input
+            name="numberOfGuests"
+            type="number"
+            value={this.state.numberOfGuests}
+            onChange={this.handleInputChange} />
+        </label>
+      </form>
+    );
+  }
+}
\ No newline at end of file

From 58a743978446aae377cc1c794b0d9da7820ad27e Mon Sep 17 00:00:00 2001
From: Alessandro De Blasis <alex@deblasis.net>
Date: Tue, 26 Feb 2019 10:09:55 +0000
Subject: [PATCH 02/14] wip: forms

---
 .gitignore            |  1 +
 content/docs/forms.md |  6 +++---
 examples/forms/1.js   | 19 ++++++++++++++-----
 examples/forms/2.js   | 25 ++++++++++++++++---------
 examples/forms/3.js   | 42 +++++++++++++++++++++++++++---------------
 5 files changed, 61 insertions(+), 32 deletions(-)

diff --git a/.gitignore b/.gitignore
index d1bde99ce..22761cd1d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,7 @@
 .cache
 .DS_STORE
 .idea
+.vscode
 node_modules
 public
 yarn-error.log
\ No newline at end of file
diff --git a/content/docs/forms.md b/content/docs/forms.md
index 68007b3cd..58e4d1125 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -9,13 +9,13 @@ redirect_from:
   - "docs/forms-zh-CN.html"
 ---
 
-HTML form elements work a little bit differently from other DOM elements in React, because form elements naturally keep some internal state. For example, this form in plain HTML accepts a single name:
+Gli elementi HTML `form` funzionano in un modo un po' differente rispetto agli altri elementi DOM in React, la motivazione risiede nel fatto che gli elementi form mantengono naturalmente uno stato interno. Ad esempio, questo form in puro HTML accetta un singolo nome:
 
 ```html
 <form>
   <label>
-    Name:
-    <input type="text" name="name" />
+    Nome:
+    <input type="text" name="nome" />
   </label>
   <input type="submit" value="Submit" />
 </form>
diff --git a/examples/forms/1.js b/examples/forms/1.js
index 422825033..51ae709f0 100644
--- a/examples/forms/1.js
+++ b/examples/forms/1.js
@@ -1,4 +1,4 @@
-class NameForm extends React.Component {
+class FormNome extends React.Component {
   constructor(props) {
     super(props);
     this.state = {value: ''};
@@ -12,7 +12,7 @@ class NameForm extends React.Component {
   }
 
   handleSubmit(event) {
-    alert('A name was submitted: ' + this.state.value);
+    alert('E\' stato inserito un nome: ' + this.state.value);
     event.preventDefault();
   }
 
@@ -20,11 +20,20 @@ class NameForm extends React.Component {
     return (
       <form onSubmit={this.handleSubmit}>
         <label>
-          Name:
-          <input type="text" value={this.state.value} onChange={this.handleChange} />
+          Nome:
+          <input
+            type="text"
+            value={this.state.value}
+            onChange={this.handleChange}
+          />
         </label>
         <input type="submit" value="Submit" />
       </form>
     );
   }
-}
\ No newline at end of file
+}
+
+ReactDOM.render(
+  <FormNome />,
+  document.getElementById('root')
+);
diff --git a/examples/forms/2.js b/examples/forms/2.js
index a0c254745..a5f7be7d7 100644
--- a/examples/forms/2.js
+++ b/examples/forms/2.js
@@ -1,7 +1,7 @@
-class FlavorForm extends React.Component {
+class FormGusto extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {value: 'coconut'};
+    this.state = {value: 'cocco'};
 
     this.handleChange = this.handleChange.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
@@ -12,7 +12,7 @@ class FlavorForm extends React.Component {
   }
 
   handleSubmit(event) {
-    alert('Your favorite flavor is: ' + this.state.value);
+    alert('Il tuo gusto preferito è: ' + this.state.value);
     event.preventDefault();
   }
 
@@ -20,11 +20,13 @@ class FlavorForm extends React.Component {
     return (
       <form onSubmit={this.handleSubmit}>
         <label>
-          Pick your favorite flavor:
-          <select value={this.state.value} onChange={this.handleChange}>
-            <option value="grapefruit">Grapefruit</option>
-            <option value="lime">Lime</option>
-            <option value="coconut">Coconut</option>
+          Seleziona il tuo gusto preferito:
+          <select
+            value={this.state.value}
+            onChange={this.handleChange}>
+            <option value="pompelmo">Pompelmo</option>
+            <option value="limone">Limone</option>
+            <option value="cocco">Cocco</option>
             <option value="mango">Mango</option>
           </select>
         </label>
@@ -32,4 +34,9 @@ class FlavorForm extends React.Component {
       </form>
     );
   }
-}
\ No newline at end of file
+}
+
+ReactDOM.render(
+  <FormGusto />,
+  document.getElementById('root')
+);
diff --git a/examples/forms/3.js b/examples/forms/3.js
index a7f76f841..a2fe85bdf 100644
--- a/examples/forms/3.js
+++ b/examples/forms/3.js
@@ -1,21 +1,26 @@
-class Reservation extends React.Component {
+class Prenotazione extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      isGoing: true,
-      numberOfGuests: 2
+      presente: true,
+      numeroOspiti: 2,
     };
 
-    this.handleInputChange = this.handleInputChange.bind(this);
+    this.handleInputChange = this.handleInputChange.bind(
+      this
+    );
   }
 
   handleInputChange(event) {
     const target = event.target;
-    const value = target.type === 'checkbox' ? target.checked : target.value;
+    const value =
+      target.type === 'checkbox'
+        ? target.checked
+        : target.value;
     const name = target.name;
 
     this.setState({
-      [name]: value
+      [name]: value,
     });
   }
 
@@ -23,23 +28,30 @@ class Reservation extends React.Component {
     return (
       <form>
         <label>
-          Is going:
+          Sarà presente:
           <input
-            name="isGoing"
+            name="presente"
             type="checkbox"
-            checked={this.state.isGoing}
-            onChange={this.handleInputChange} />
+            checked={this.state.presente}
+            onChange={this.handleInputChange}
+          />
         </label>
         <br />
         <label>
-          Number of guests:
+          Numero di ospiti:
           <input
-            name="numberOfGuests"
+            name="numeroOspiti"
             type="number"
-            value={this.state.numberOfGuests}
-            onChange={this.handleInputChange} />
+            value={this.state.numeroOspiti}
+            onChange={this.handleInputChange}
+          />
         </label>
       </form>
     );
   }
-}
\ No newline at end of file
+}
+
+ReactDOM.render(
+  <Prenotazione />,
+  document.getElementById('root')
+);

From 00bf8df65128cc3cfc9db4a960d1e8872d692877 Mon Sep 17 00:00:00 2001
From: Alessandro De Blasis <alex@deblasis.net>
Date: Wed, 27 Feb 2019 18:40:27 +0000
Subject: [PATCH 03/14] forms: wip

---
 GLOSSARY.md           |   1 +
 content/docs/forms.md | 140 ++++++++++++++++++++++--------------------
 examples/forms/1.js   |   4 +-
 examples/forms/2.js   |   6 +-
 examples/forms/3.js   |   2 +
 5 files changed, 84 insertions(+), 69 deletions(-)

diff --git a/GLOSSARY.md b/GLOSSARY.md
index 92bf8a6b5..df45c9343 100644
--- a/GLOSSARY.md
+++ b/GLOSSARY.md
@@ -18,6 +18,7 @@ Glossary of the translations of technical and React-specific terms.
 - tag
 - lifecycle
 - callback
+- form/forms
 
 
 # Common Translations
diff --git a/content/docs/forms.md b/content/docs/forms.md
index 58e4d1125..b0c92d96f 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -9,7 +9,7 @@ redirect_from:
   - "docs/forms-zh-CN.html"
 ---
 
-Gli elementi HTML `form` funzionano in un modo un po' differente rispetto agli altri elementi DOM in React, la motivazione risiede nel fatto che gli elementi form mantengono naturalmente uno stato interno. Ad esempio, questo form in puro HTML accetta un singolo nome:
+Gli elementi HTML `form` funzionano in un modo un po' differente rispetto agli altri elementi DOM in React, la motivazione sta nel fatto che gli elementi form mantengono naturalmente uno stato interno. Ad esempio, questo form in puro HTML accetta un singolo nome:
 
 ```html
 <form>
@@ -21,18 +21,18 @@ Gli elementi HTML `form` funzionano in un modo un po' differente rispetto agli a
 </form>
 ```
 
-This form has the default HTML form behavior of browsing to a new page when the user submits the form. If you want this behavior in React, it just works. But in most cases, it's convenient to have a JavaScript function that handles the submission of the form and has access to the data that the user entered into the form. The standard way to achieve this is with a technique called "controlled components".
+La sottomissione di questo form porta l'utente in una nuova pagina, questo è il comportamento di _default_ (di fabbrica). In React, se vuoi avere lo stesso comportamento, funziona. Ad ogni modo, potrebbe essere più conveniente avere una funzione JavaScript che gestisce la sottomissione del form e che ha accesso ai dati inseriti dall'utente. La tecnica standard con cui si può ottenere ciò prende il nome di "componenti controllati".
 
-## Controlled Components {#controlled-components}
+## Componenti Controllati {#controlled-components}
 
-In HTML, form elements such as `<input>`, `<textarea>`, and `<select>` typically maintain their own state and update it based on user input. In React, mutable state is typically kept in the state property of components, and only updated with [`setState()`](/docs/react-component.html#setstate).
+In HTML, gli eleenti di un form come `<input>`, `<textarea>` e `<select>` mantengono tipicamente il proprio stato e lo aggiornano in base all'input dell'utente. In React, lo stato mutabile viene tipicamente mantenuto nella proprietà `state` dei componenti eviene poi aggiornato solo mediante [`setState()`](/docs/react-component.html#setstate).
 
-We can combine the two by making the React state be the "single source of truth". Then the React component that renders a form also controls what happens in that form on subsequent user input. An input form element whose value is controlled by React in this way is called a "controlled component".
+Possiamo combinare le due cose rendendo lo _state_ in React la "singola fonte attendibile" ([SSOT](https://en.wikipedia.org/wiki/Single_source_of_truth)). Possiamo poi fare in modo che il componente React che renderizza il form controlli anche cosa succede all'interno del form in risposta agli input dell'utente. Un elemento di input in un form, il quale valore è controllato da React viene così chiamato "componente controllato".
 
-For example, if we want to make the previous example log the name when it is submitted, we can write the form as a controlled component:
+Ad esempio, se vogliiamo far si che l'esempio precedente registri il nome inserito, possiamo riscrivere il form sotto forma di componente controllato:
 
 ```javascript{4,10-12,24}
-class NameForm extends React.Component {
+class FormNome extends React.Component {
   constructor(props) {
     super(props);
     this.state = {value: ''};
@@ -46,7 +46,7 @@ class NameForm extends React.Component {
   }
 
   handleSubmit(event) {
-    alert('A name was submitted: ' + this.state.value);
+    alert('E\' stato inserito un nome: ' + this.state.value);
     event.preventDefault();
   }
 
@@ -54,7 +54,7 @@ class NameForm extends React.Component {
     return (
       <form onSubmit={this.handleSubmit}>
         <label>
-          Name:
+          Nome:
           <input type="text" value={this.state.value} onChange={this.handleChange} />
         </label>
         <input type="submit" value="Submit" />
@@ -64,12 +64,11 @@ class NameForm extends React.Component {
 }
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/VmmPgp?editors=0010)
-[](codepen://forms/1)
+**[Prova su CodeSandbox](codesandbox://forms/1.js)**
 
-Since the `value` attribute is set on our form element, the displayed value will always be `this.state.value`, making the React state the source of truth. Since `handleChange` runs on every keystroke to update the React state, the displayed value will update as the user types.
+Dato che l'attributo `value` viene impostato nel nostro elemento form, il valore visualizzato sarà sempre `this.state.value`, rendendo lo stato in React l'unica fonte dati attendibile. Dato che la funzione `handleChange` viene eseguita ad ogni battitura per aggiornare lo stato di React, il valore visualizzato verrà aggiornato man mano che l'utente preme i tasti.
 
-With a controlled component, every state mutation will have an associated handler function. This makes it straightforward to modify or validate user input. For example, if we wanted to enforce that names are written with all uppercase letters, we could write `handleChange` as:
+Con un componente controllato, ogni mutazione dello stato deve aver associata una funzione _handler_. Tutto ciò rende il processo di modifica e la validazione dell'input dell'utente semplice e lineare. Ad esempio, se volessimo definire una regola che vuole che i nomi vengano sempre scritti tutti in maiuscolo, possiamo definire `handleChange` così:
 
 ```javascript{2}
 handleChange(event) {
@@ -77,24 +76,26 @@ handleChange(event) {
 }
 ```
 
-## The textarea Tag {#the-textarea-tag}
+## Il Tag Textarea {#the-textarea-tag}
 
-In HTML, a `<textarea>` element defines its text by its children:
+In HTML, l'elemento `<textarea>` definisce il testo in esso contenuto con i suoi elementi figli:
 
 ```html
 <textarea>
-  Hello there, this is some text in a text area
+  Nel mezzo del cammin di nostra vita
+  mi ritrovai per una selva oscura
+  ché la diritta via era smarrita.
 </textarea>
 ```
 
-In React, a `<textarea>` uses a `value` attribute instead. This way, a form using a `<textarea>` can be written very similarly to a form that uses a single-line input:
+In React, invece, `<textarea>` utilizza l'attributo `value`. Per questo, un form che utilizza una `<textarea>` può essere scritto in modo molto simile a come verrebbe scritto se utilizzasse un semplice input di una sola riga:
 
 ```javascript{4-6,12-14,26}
-class EssayForm extends React.Component {
+class FormTema extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      value: 'Please write an essay about your favorite DOM element.'
+      value: 'Per favore scrivi un tema riguardo il tuo elemento DOM preferito.'
     };
 
     this.handleChange = this.handleChange.bind(this);
@@ -106,7 +107,7 @@ class EssayForm extends React.Component {
   }
 
   handleSubmit(event) {
-    alert('An essay was submitted: ' + this.state.value);
+    alert('Un tema è stato sottomesso: ' + this.state.value);
     event.preventDefault();
   }
 
@@ -114,7 +115,7 @@ class EssayForm extends React.Component {
     return (
       <form onSubmit={this.handleSubmit}>
         <label>
-          Essay:
+          Tema:
           <textarea value={this.state.value} onChange={this.handleChange} />
         </label>
         <input type="submit" value="Submit" />
@@ -124,25 +125,25 @@ class EssayForm extends React.Component {
 }
 ```
 
-Notice that `this.state.value` is initialized in the constructor, so that the text area starts off with some text in it.
+Nota come `this.state.value` viene inizializzato nel costruttore, cosìcche la casella di testo è inizializzata con del testo al suo interno.
 
-## The select Tag {#the-select-tag}
+## Il Tag Select {#the-select-tag}
 
-In HTML, `<select>` creates a drop-down list. For example, this HTML creates a drop-down list of flavors:
+In HTML, `<select>` crea una lista a discesa. Per esempio, questo HTML crea una lista a discesa di gusti:
 
 ```html
 <select>
-  <option value="grapefruit">Grapefruit</option>
-  <option value="lime">Lime</option>
-  <option selected value="coconut">Coconut</option>
+  <option value="pompelmo">Pompelmo</option>
+  <option value="limone">Limone</option>
+  <option selected value="cocco">Cocco</option>
   <option value="mango">Mango</option>
 </select>
 ```
 
-Note that the Coconut option is initially selected, because of the `selected` attribute. React, instead of using this `selected` attribute, uses a `value` attribute on the root `select` tag. This is more convenient in a controlled component because you only need to update it in one place. For example:
+Nota come l'opzione Cocco venga preselezionata grazie all'attributo `selected`. React, piuttosto che usare l'attributo `selected`, usa l'attributo `value` dell'elemento radice `select`. Ciò facilita le cose in un componente controllato in quanto bisogna aggiornare lo stato in un posto solo. Ad esempio:
 
 ```javascript{4,10-12,24}
-class FlavorForm extends React.Component {
+class FormGusti extends React.Component {
   constructor(props) {
     super(props);
     this.state = {value: 'coconut'};
@@ -156,7 +157,7 @@ class FlavorForm extends React.Component {
   }
 
   handleSubmit(event) {
-    alert('Your favorite flavor is: ' + this.state.value);
+    alert('Il tuo gusto preferito è: ' + this.state.value);
     event.preventDefault();
   }
 
@@ -164,11 +165,13 @@ class FlavorForm extends React.Component {
     return (
       <form onSubmit={this.handleSubmit}>
         <label>
-          Pick your favorite flavor:
-          <select value={this.state.value} onChange={this.handleChange}>
-            <option value="grapefruit">Grapefruit</option>
-            <option value="lime">Lime</option>
-            <option value="coconut">Coconut</option>
+          Seleziona il tuo gusto preferito:
+          <select
+            value={this.state.value}
+            onChange={this.handleChange}>
+            <option value="pompelmo">Pompelmo</option>
+            <option value="limone">Limone</option>
+            <option value="cocco">Cocco</option>
             <option value="mango">Mango</option>
           </select>
         </label>
@@ -179,54 +182,58 @@ class FlavorForm extends React.Component {
 }
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/JbbEzX?editors=0010)
-[](codepen://forms/2)
+**[Prova su CodeSandbox](codesandbox://forms/2.js)**
 
-Overall, this makes it so that `<input type="text">`, `<textarea>`, and `<select>` all work very similarly - they all accept a `value` attribute that you can use to implement a controlled component.
+Ricapitolando, ciò fa si che `<input type="text">`, `<textarea>` e `<select>` funzionino in modo molto simile - tutti accettano un attributo `value` che puoi utilizzare per implementare un componente controllato.
 
-> Note
+> **Nota bene**
 >
-> You can pass an array into the `value` attribute, allowing you to select multiple options in a `select` tag:
+> Puoi passare un array nell'attributo `value`, permettendoti di selezionare opzioni multiple in un tag `select`:
 >
 >```js
 ><select multiple={true} value={['B', 'C']}>
 >```
 
-## The file input Tag {#the-file-input-tag}
+## Il Tag Input File {#the-file-input-tag}
 
-In HTML, an `<input type="file">` lets the user choose one or more files from their device storage to be uploaded to a server or manipulated by JavaScript via the [File API](https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications).
+In HTML, un `<input type="file">` permette all'utente di selezionare uno o più file da disco e di inviarli al server o manipolarli in JavaScript mediante le [File API](https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications).
 
 ```html
 <input type="file" />
 ```
 
-Because its value is read-only, it is an **uncontrolled** component in React. It is discussed together with other uncontrolled components [later in the documentation](/docs/uncontrolled-components.html#the-file-input-tag).
+Dato che il suo valore è sola-lettura, è un componente **non controllato** in React. Riprenderemo il discorso riguardo questo ed altri componenti non controllati [in seguito](/docs/uncontrolled-components.html#the-file-input-tag).
 
-## Handling Multiple Inputs {#handling-multiple-inputs}
+## Gestione di Input Multipli {#handling-multiple-inputs}
 
-When you need to handle multiple controlled `input` elements, you can add a `name` attribute to each element and let the handler function choose what to do based on the value of `event.target.name`.
+Quando devi gestire diversi elementi `input`, puoi aggiungere un attributo `name` ad ognuno di essi e far si che la funzione handler controlli cosa fare in base al valore di `event.target.name`.
 
-For example:
+Ad esempio:
 
-```javascript{15,18,28,37}
-class Reservation extends React.Component {
+```javascript{20,23,33,43}
+class Prenotazione extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      isGoing: true,
-      numberOfGuests: 2
+      presente: true,
+      numeroOspiti: 2,
     };
 
-    this.handleInputChange = this.handleInputChange.bind(this);
+    this.handleInputChange = this.handleInputChange.bind(
+      this
+    );
   }
 
   handleInputChange(event) {
     const target = event.target;
-    const value = target.type === 'checkbox' ? target.checked : target.value;
+    const value =
+      target.type === 'checkbox'
+        ? target.checked
+        : target.value;
     const name = target.name;
 
     this.setState({
-      [name]: value
+      [name]: value,
     });
   }
 
@@ -234,21 +241,23 @@ class Reservation extends React.Component {
     return (
       <form>
         <label>
-          Is going:
+          Sarà presente:
           <input
-            name="isGoing"
+            name="presente"
             type="checkbox"
-            checked={this.state.isGoing}
-            onChange={this.handleInputChange} />
+            checked={this.state.presente}
+            onChange={this.handleInputChange}
+          />
         </label>
         <br />
         <label>
-          Number of guests:
+          Numero di ospiti:
           <input
-            name="numberOfGuests"
+            name="numeroOspiti"
             type="number"
-            value={this.state.numberOfGuests}
-            onChange={this.handleInputChange} />
+            value={this.state.numeroOspiti}
+            onChange={this.handleInputChange}
+          />
         </label>
       </form>
     );
@@ -256,10 +265,9 @@ class Reservation extends React.Component {
 }
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/wgedvV?editors=0010)
-[](codepen://forms/3)
+**[Prova su CodeSandbox](codesandbox://forms/3.js)**
 
-Note how we used the ES6 [computed property name](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names) syntax to update the state key corresponding to the given input name:
+Nota come abbiamo utilizzato la sintassi ES6 [_computed property name_ ("nome proprietà calcolato")](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names) per aggiornare la rispettiva chiave nello stato a seconda dell'attributo `name` dell'input:
 
 ```js{2}
 this.setState({
@@ -267,7 +275,7 @@ this.setState({
 });
 ```
 
-It is equivalent to this ES5 code:
+Che in ES5 corrisponde al codice:
 
 ```js{2}
 var partialState = {};
@@ -275,7 +283,7 @@ partialState[name] = value;
 this.setState(partialState);
 ```
 
-Also, since `setState()` automatically [merges a partial state into the current state](/docs/state-and-lifecycle.html#state-updates-are-merged), we only needed to call it with the changed parts.
+Inoltre, dato che `setState()` [unisce uno stato parziale nello stato corrente](/docs/state-and-lifecycle.html#state-updates-are-merged) automaticamente, dobbiamo chiamarla con le sole parti modificate.
 
 ## Controlled Input Null Value {#controlled-input-null-value}
 
diff --git a/examples/forms/1.js b/examples/forms/1.js
index 51ae709f0..c07affab5 100644
--- a/examples/forms/1.js
+++ b/examples/forms/1.js
@@ -1,3 +1,5 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
 class FormNome extends React.Component {
   constructor(props) {
     super(props);
@@ -12,7 +14,7 @@ class FormNome extends React.Component {
   }
 
   handleSubmit(event) {
-    alert('E\' stato inserito un nome: ' + this.state.value);
+    alert("E' stato inserito un nome: " + this.state.value);
     event.preventDefault();
   }
 
diff --git a/examples/forms/2.js b/examples/forms/2.js
index a5f7be7d7..93c468c35 100644
--- a/examples/forms/2.js
+++ b/examples/forms/2.js
@@ -1,4 +1,6 @@
-class FormGusto extends React.Component {
+import React from 'react';
+import ReactDOM from 'react-dom';
+class FormGusti extends React.Component {
   constructor(props) {
     super(props);
     this.state = {value: 'cocco'};
@@ -37,6 +39,6 @@ class FormGusto extends React.Component {
 }
 
 ReactDOM.render(
-  <FormGusto />,
+  <FormGusti />,
   document.getElementById('root')
 );
diff --git a/examples/forms/3.js b/examples/forms/3.js
index a2fe85bdf..c5077f64e 100644
--- a/examples/forms/3.js
+++ b/examples/forms/3.js
@@ -1,3 +1,5 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
 class Prenotazione extends React.Component {
   constructor(props) {
     super(props);

From 45f3fc3beb4c2bba67a2ead3f828c11683700910 Mon Sep 17 00:00:00 2001
From: Alessandro De Blasis <alex@deblasis.net>
Date: Thu, 28 Feb 2019 05:52:08 +0000
Subject: [PATCH 04/14] Translation for the page 'Basics -> Forms'

---
 content/docs/forms.md | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/content/docs/forms.md b/content/docs/forms.md
index b0c92d96f..fc0aa440c 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -275,24 +275,24 @@ this.setState({
 });
 ```
 
-Che in ES5 corrisponde al codice:
+Il che in ES5 corrisponde al codice:
 
 ```js{2}
-var partialState = {};
-partialState[name] = value;
-this.setState(partialState);
+var statoParziale = {};
+statoParziale[name] = value;
+this.setState(statoParziale);
 ```
 
 Inoltre, dato che `setState()` [unisce uno stato parziale nello stato corrente](/docs/state-and-lifecycle.html#state-updates-are-merged) automaticamente, dobbiamo chiamarla con le sole parti modificate.
 
-## Controlled Input Null Value {#controlled-input-null-value}
+## Valore Null in Input Controllati {#controlled-input-null-value}
 
-Specifying the value prop on a [controlled component](/docs/forms.html#controlled-components) prevents the user from changing the input unless you desire so. If you've specified a `value` but the input is still editable, you may have accidentally set `value` to `undefined` or `null`.
+Specificando la prop `value` in un [componente controllato](/docs/forms.html#controlled-components) può far si che l'utente non possa cambiare l'input, a meno che tu lo desideri. Se hai specificato un `value` ma l'input è ancora editabile, potresti aver accidentalmente impostato `value` come `undefined` o `null`.
 
-The following code demonstrates this. (The input is locked at first but becomes editable after a short delay.)
+Il codice seguente lo dimostra. (L'input è inizialmente bloccato ma diventa editabile dopo un secondo)
 
 ```javascript
-ReactDOM.render(<input value="hi" />, mountNode);
+ReactDOM.render(<input value="ciao" />, mountNode);
 
 setTimeout(function() {
   ReactDOM.render(<input value={null} />, mountNode);
@@ -300,10 +300,10 @@ setTimeout(function() {
 
 ```
 
-## Alternatives to Controlled Components {#alternatives-to-controlled-components}
+## Alternative ai Componenti Controllati {#alternatives-to-controlled-components}
 
-It can sometimes be tedious to use controlled components, because you need to write an event handler for every way your data can change and pipe all of the input state through a React component. This can become particularly annoying when you are converting a preexisting codebase to React, or integrating a React application with a non-React library. In these situations, you might want to check out [uncontrolled components](/docs/uncontrolled-components.html), an alternative technique for implementing input forms.
+Utilizzare componenti controllati può sembrare laborioso a volte, soprattutto perché è necessario scrivere un _event handler_ per ogni modo in cui i tuoi dati possono cambiare e perchè si deve collegare lo stato di tutti gli input a quello di un componente React. Il tutto diventa particolarmente noioso quando bisogna convertire progetti preesistenti in React, o integrare un'applicazione React con una libreria non-React. In queste situazioni, si potrebbe ricorrere ai [componenti non controllati](/docs/uncontrolled-components.html), una tecnica alternativa per implementare forms ed i relativi campi di input.
 
-## Fully-Fledged Solutions {#fully-fledged-solutions}
+## Soluzioni Chiavi In Mano {#fully-fledged-solutions}
 
-If you're looking for a complete solution including validation, keeping track of the visited fields, and handling form submission, [Formik](https://jaredpalmer.com/formik) is one of the popular choices. However, it is built on the same principles of controlled components and managing state — so don't neglect to learn them.
+Se stai cercando una soluzione che include la validazione dei dati, il tener traccia dei campi visitati e la sottomissione del form, [Formik](https://jaredpalmer.com/formik) è una delle scelte popolari. Comunque, si basa sugli stessi principi dei componenti controllati e della gestione dello stato — ecco perché è bene essere familiari con questi concetti.

From bd6a179ccb97f19f7bfa89d5a9674d8bcc27c56d Mon Sep 17 00:00:00 2001
From: Luca Nardi <luca.nardi@live.it>
Date: Fri, 1 Mar 2019 05:11:51 +0000
Subject: [PATCH 05/14] Update content/docs/forms.md

Co-Authored-By: deblasis <alex@deblasis.net>
---
 content/docs/forms.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/forms.md b/content/docs/forms.md
index fc0aa440c..3758991be 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -21,7 +21,7 @@ Gli elementi HTML `form` funzionano in un modo un po' differente rispetto agli a
 </form>
 ```
 
-La sottomissione di questo form porta l'utente in una nuova pagina, questo è il comportamento di _default_ (di fabbrica). In React, se vuoi avere lo stesso comportamento, funziona. Ad ogni modo, potrebbe essere più conveniente avere una funzione JavaScript che gestisce la sottomissione del form e che ha accesso ai dati inseriti dall'utente. La tecnica standard con cui si può ottenere ciò prende il nome di "componenti controllati".
+Questo form si comporta come di consueto, facendo navigare l'utente in una nuova pagina quando viene inviato. In React, se vuoi avere lo stesso comportamento, non c'è bisogno di fare alcuna modifica. Ad ogni modo, potrebbe essere più conveniente avere una funzione JavaScript che gestisce l'invio del form e che ha accesso ai dati inseriti dall'utente. La tecnica standard con cui si può ottenere ciò prende il nome di "componenti controllati".
 
 ## Componenti Controllati {#controlled-components}
 

From 3bf4ca13591e6f9469b87b24b87fc397efbee1aa Mon Sep 17 00:00:00 2001
From: Luca Nardi <luca.nardi@live.it>
Date: Fri, 1 Mar 2019 05:11:58 +0000
Subject: [PATCH 06/14] Update content/docs/forms.md

Co-Authored-By: deblasis <alex@deblasis.net>
---
 content/docs/forms.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/forms.md b/content/docs/forms.md
index 3758991be..662f3fac9 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -25,7 +25,7 @@ Questo form si comporta come di consueto, facendo navigare l'utente in una nuova
 
 ## Componenti Controllati {#controlled-components}
 
-In HTML, gli eleenti di un form come `<input>`, `<textarea>` e `<select>` mantengono tipicamente il proprio stato e lo aggiornano in base all'input dell'utente. In React, lo stato mutabile viene tipicamente mantenuto nella proprietà `state` dei componenti eviene poi aggiornato solo mediante [`setState()`](/docs/react-component.html#setstate).
+In HTML, gli elementi di un form come `<input>`, `<textarea>` e `<select>` mantengono tipicamente il proprio stato e lo aggiornano in base all'input dell'utente. In React, lo stato mutabile viene tipicamente mantenuto nella proprietà `state` dei componenti e viene poi aggiornato solo mediante [`setState()`](/docs/react-component.html#setstate).
 
 Possiamo combinare le due cose rendendo lo _state_ in React la "singola fonte attendibile" ([SSOT](https://en.wikipedia.org/wiki/Single_source_of_truth)). Possiamo poi fare in modo che il componente React che renderizza il form controlli anche cosa succede all'interno del form in risposta agli input dell'utente. Un elemento di input in un form, il quale valore è controllato da React viene così chiamato "componente controllato".
 

From 6bf5e7782f85618de6d6b19f13926333a82afd2d Mon Sep 17 00:00:00 2001
From: Luca Nardi <luca.nardi@live.it>
Date: Fri, 1 Mar 2019 05:13:01 +0000
Subject: [PATCH 07/14] Update content/docs/forms.md

Co-Authored-By: deblasis <alex@deblasis.net>
---
 content/docs/forms.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/forms.md b/content/docs/forms.md
index 662f3fac9..bdfbb655d 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -27,7 +27,7 @@ Questo form si comporta come di consueto, facendo navigare l'utente in una nuova
 
 In HTML, gli elementi di un form come `<input>`, `<textarea>` e `<select>` mantengono tipicamente il proprio stato e lo aggiornano in base all'input dell'utente. In React, lo stato mutabile viene tipicamente mantenuto nella proprietà `state` dei componenti e viene poi aggiornato solo mediante [`setState()`](/docs/react-component.html#setstate).
 
-Possiamo combinare le due cose rendendo lo _state_ in React la "singola fonte attendibile" ([SSOT](https://en.wikipedia.org/wiki/Single_source_of_truth)). Possiamo poi fare in modo che il componente React che renderizza il form controlli anche cosa succede all'interno del form in risposta agli input dell'utente. Un elemento di input in un form, il quale valore è controllato da React viene così chiamato "componente controllato".
+Possiamo combinare le due cose rendendo lo _state_ in React la "singola fonte attendibile" ([SSOT](https://en.wikipedia.org/wiki/Single_source_of_truth)). Possiamo poi fare in modo che il componente React che renderizza il form controlli anche cosa succede all'interno del form in risposta agli input dell'utente. In un form, un elemento di input il cui valore è controllato da React viene così chiamato "componente controllato".
 
 Ad esempio, se vogliiamo far si che l'esempio precedente registri il nome inserito, possiamo riscrivere il form sotto forma di componente controllato:
 

From 4e2e0c5f1adc473f5b24abe968ed021c859a8692 Mon Sep 17 00:00:00 2001
From: Luca Nardi <luca.nardi@live.it>
Date: Fri, 1 Mar 2019 05:13:07 +0000
Subject: [PATCH 08/14] Update content/docs/forms.md

Co-Authored-By: deblasis <alex@deblasis.net>
---
 content/docs/forms.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/forms.md b/content/docs/forms.md
index bdfbb655d..a5af50223 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -29,7 +29,7 @@ In HTML, gli elementi di un form come `<input>`, `<textarea>` e `<select>` mante
 
 Possiamo combinare le due cose rendendo lo _state_ in React la "singola fonte attendibile" ([SSOT](https://en.wikipedia.org/wiki/Single_source_of_truth)). Possiamo poi fare in modo che il componente React che renderizza il form controlli anche cosa succede all'interno del form in risposta agli input dell'utente. In un form, un elemento di input il cui valore è controllato da React viene così chiamato "componente controllato".
 
-Ad esempio, se vogliiamo far si che l'esempio precedente registri il nome inserito, possiamo riscrivere il form sotto forma di componente controllato:
+Ad esempio, se vogliamo far sì che l'esempio precedente registri il nome inserito, possiamo riscrivere il form sotto forma di componente controllato:
 
 ```javascript{4,10-12,24}
 class FormNome extends React.Component {

From 71e43a7d03d3ea31df051ce1823b0ed60ff10399 Mon Sep 17 00:00:00 2001
From: Luca Nardi <luca.nardi@live.it>
Date: Fri, 1 Mar 2019 05:13:13 +0000
Subject: [PATCH 09/14] Update content/docs/forms.md

Co-Authored-By: deblasis <alex@deblasis.net>
---
 content/docs/forms.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/forms.md b/content/docs/forms.md
index a5af50223..8b8b28ff6 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -184,7 +184,7 @@ class FormGusti extends React.Component {
 
 **[Prova su CodeSandbox](codesandbox://forms/2.js)**
 
-Ricapitolando, ciò fa si che `<input type="text">`, `<textarea>` e `<select>` funzionino in modo molto simile - tutti accettano un attributo `value` che puoi utilizzare per implementare un componente controllato.
+Ricapitolando, ciò fa sì che `<input type="text">`, `<textarea>` e `<select>` funzionino in modo molto simile - tutti accettano un attributo `value` che puoi utilizzare per implementare un componente controllato.
 
 > **Nota bene**
 >

From 1065d652eac46fbb9950d53b3f699c07338fd8b7 Mon Sep 17 00:00:00 2001
From: Luca Nardi <luca.nardi@live.it>
Date: Fri, 1 Mar 2019 05:14:01 +0000
Subject: [PATCH 10/14] Update content/docs/forms.md

Co-Authored-By: deblasis <alex@deblasis.net>
---
 content/docs/forms.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/forms.md b/content/docs/forms.md
index 8b8b28ff6..e79cdd040 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -202,7 +202,7 @@ In HTML, un `<input type="file">` permette all'utente di selezionare uno o più
 <input type="file" />
 ```
 
-Dato che il suo valore è sola-lettura, è un componente **non controllato** in React. Riprenderemo il discorso riguardo questo ed altri componenti non controllati [in seguito](/docs/uncontrolled-components.html#the-file-input-tag).
+Dato che il suo valore è in sola-lettura, è un componente **non controllato** in React. Riprenderemo il discorso riguardo questo ed altri componenti non controllati [in seguito](/docs/uncontrolled-components.html#the-file-input-tag).
 
 ## Gestione di Input Multipli {#handling-multiple-inputs}
 

From 4c2b3237d8a5de095f257b2f496bfce3be7b7317 Mon Sep 17 00:00:00 2001
From: Luca Nardi <luca.nardi@live.it>
Date: Fri, 1 Mar 2019 05:14:36 +0000
Subject: [PATCH 11/14] Update content/docs/forms.md

Co-Authored-By: deblasis <alex@deblasis.net>
---
 content/docs/forms.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/forms.md b/content/docs/forms.md
index e79cdd040..fa0e991ad 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -206,7 +206,7 @@ Dato che il suo valore è in sola-lettura, è un componente **non controllato**
 
 ## Gestione di Input Multipli {#handling-multiple-inputs}
 
-Quando devi gestire diversi elementi `input`, puoi aggiungere un attributo `name` ad ognuno di essi e far si che la funzione handler controlli cosa fare in base al valore di `event.target.name`.
+Quando devi gestire diversi elementi `input`, puoi aggiungere un attributo `name` ad ognuno di essi e far sì che la funzione handler controlli cosa fare in base al valore di `event.target.name`.
 
 Ad esempio:
 

From 75190650face106a90b842fe92bee72955c69152 Mon Sep 17 00:00:00 2001
From: Luca Nardi <luca.nardi@live.it>
Date: Fri, 1 Mar 2019 05:14:44 +0000
Subject: [PATCH 12/14] Update content/docs/forms.md

Co-Authored-By: deblasis <alex@deblasis.net>
---
 content/docs/forms.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/forms.md b/content/docs/forms.md
index fa0e991ad..0ff1efe3d 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -287,7 +287,7 @@ Inoltre, dato che `setState()` [unisce uno stato parziale nello stato corrente](
 
 ## Valore Null in Input Controllati {#controlled-input-null-value}
 
-Specificando la prop `value` in un [componente controllato](/docs/forms.html#controlled-components) può far si che l'utente non possa cambiare l'input, a meno che tu lo desideri. Se hai specificato un `value` ma l'input è ancora editabile, potresti aver accidentalmente impostato `value` come `undefined` o `null`.
+Specificare la prop `value` in un [componente controllato](/docs/forms.html#controlled-components) fa sì che l'utente possa cambiare l'input solo quando lo desideri. Se hai specificato un `value` ma l'input è ancora editabile, potresti aver accidentalmente impostato `value` come `undefined` o `null`.
 
 Il codice seguente lo dimostra. (L'input è inizialmente bloccato ma diventa editabile dopo un secondo)
 

From 6fd63857e566c07d6abf04f9836d14d57ce66f8b Mon Sep 17 00:00:00 2001
From: Luca Nardi <luca.nardi@live.it>
Date: Fri, 1 Mar 2019 05:14:54 +0000
Subject: [PATCH 13/14] Update content/docs/forms.md

Co-Authored-By: deblasis <alex@deblasis.net>
---
 content/docs/forms.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/forms.md b/content/docs/forms.md
index 0ff1efe3d..f21c128cf 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -66,7 +66,7 @@ class FormNome extends React.Component {
 
 **[Prova su CodeSandbox](codesandbox://forms/1.js)**
 
-Dato che l'attributo `value` viene impostato nel nostro elemento form, il valore visualizzato sarà sempre `this.state.value`, rendendo lo stato in React l'unica fonte dati attendibile. Dato che la funzione `handleChange` viene eseguita ad ogni battitura per aggiornare lo stato di React, il valore visualizzato verrà aggiornato man mano che l'utente preme i tasti.
+Dato che l'attributo `value` viene impostato nel nostro elemento form, il valore visualizzato sarà sempre `this.state.value`, rendendo lo stato in React l'unica fonte di dati attendibile. Dato che la funzione `handleChange` viene eseguita ad ogni battitura per aggiornare lo stato di React, il valore visualizzato verrà aggiornato man mano che l'utente preme i tasti.
 
 Con un componente controllato, ogni mutazione dello stato deve aver associata una funzione _handler_. Tutto ciò rende il processo di modifica e la validazione dell'input dell'utente semplice e lineare. Ad esempio, se volessimo definire una regola che vuole che i nomi vengano sempre scritti tutti in maiuscolo, possiamo definire `handleChange` così:
 

From 2b48fa33c6320c837d7460fc207dba5b6aeec817 Mon Sep 17 00:00:00 2001
From: Luca Nardi <luca.nardi@live.it>
Date: Fri, 1 Mar 2019 05:20:58 +0000
Subject: [PATCH 14/14] Update content/docs/forms.md

Co-Authored-By: deblasis <alex@deblasis.net>
---
 content/docs/forms.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/forms.md b/content/docs/forms.md
index f21c128cf..2dc6b6700 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -107,7 +107,7 @@ class FormTema extends React.Component {
   }
 
   handleSubmit(event) {
-    alert('Un tema è stato sottomesso: ' + this.state.value);
+    alert('Un tema è stato inviato: ' + this.state.value);
     event.preventDefault();
   }