diff --git a/2-ui/4-forms-controls/1-form-elements/1-add-select-option/solution.md b/2-ui/4-forms-controls/1-form-elements/1-add-select-option/solution.md index 80fad3850..bc253e8df 100644 --- a/2-ui/4-forms-controls/1-form-elements/1-add-select-option/solution.md +++ b/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 dopo passo: ```html run `: +Abbiamo un ` @@ -13,10 +13,10 @@ There's a ` ``` -Use JavaScript to: +Usare JavaScript per: -1. Show the value and the text of the selected option. -2. Add an option: ``. -3. Make it selected. +1. Mostrare il valore ed il testo dell'opzione selezionata. +2. Aggiungere una option: ``. +3. Selezionarla. -Note, if you've done everything right, your alert should show `blues`. +Nota bene, svolgendo il compito correttamente, il tuo alert dovrebbe mostrare `blues`. diff --git a/2-ui/4-forms-controls/1-form-elements/article.md b/2-ui/4-forms-controls/1-form-elements/article.md index 6c7e18aca..cfc270a0e 100644 --- a/2-ui/4-forms-controls/1-form-elements/article.md +++ b/2-ui/4-forms-controls/1-form-elements/article.md @@ -1,23 +1,23 @@ -# Form properties and methods +# Proprietà dei form e metodi -Forms and control elements, such as `` have a lot of special properties and events. +I forms e gli elementi control, come `` hanno una serie di eventi e proprietà peculiari. -Working with forms will be much more convenient when we learn them. +Lavorando con i forms, questi saranno molto comodi quando li avremo imparati. -## Navigation: form and elements +## Navigazione: form e elements -Document forms are members of the special collection `document.forms`. +I form del documento sono membri della speciale collezione `document.forms`. -That's a so-called "named collection": it's both named and ordered. We can use both the name or the number in the document to get the form. +Questa è una cosiddetta "named collection": è sia associativa che ordinata. Possiamo usare sia il nome che l'indice nel documento per accedervi. ```js no-beautify -document.forms.my - the form with name="my" -document.forms[0] - the first form in the document +document.forms.my - il form con name="my" +document.forms[0] - il primo form del documento ``` -When we have a form, then any element is available in the named collection `form.elements`. +Quando abbiamo un form, allora tutti gli elementi saranno contenuti nella named collection `form.elements`. -For instance: +Per esempio: ```html run height=40
@@ -26,19 +26,19 @@ For instance:
``` -There may be multiple elements with the same name, that's often the case with radio buttons. +Potrebbero esserci elementi multipli con lo stesso nome, ed è una cosa che capita spesso con i radio buttons. -In that case `form.elements[name]` is a collection, for instance: +In questo caso `form.elements[name]` sarà una collezione, per esempio: ```html run height=40
@@ -57,13 +57,13 @@ alert(ageElems[0]); // [object HTMLInputElement] ``` -These navigation properties do not depend on the tag structure. All control elements, no matter how deep they are in the form, are available in `form.elements`. +Queste proprietà di navigazione non dipendono dalla struttura dei tags. Ogni control element, è irrilevante quanto in profondità sia dentro il form, sarà contenuto ed accessibile da `form.elements`. -````smart header="Fieldsets as \"subforms\"" -A form may have one or many `
` elements inside it. They also have `elements` property that lists form controls inside them. +````smart header="Fieldsets come \"subforms\"" +Un form può avere uno o più elementi `
` all'interno. Questi hanno anche proprietà `elements` che mostrano dei form controls all'interno. -For instance: +Per esempio: ```html run height=80 @@ -81,7 +81,7 @@ For instance: let fieldset = form.elements.userFields; alert(fieldset); // HTMLFieldSetElement - // we can get the input by name both from the form and from the fieldset + // possiamo ottenere l'input sia dal nome del form sia dal fieldset alert(fieldset.elements.login == form.elements.login); // true */!* @@ -89,14 +89,14 @@ For instance: ``` ```` -````warn header="Shorter notation: `form.name`" -There's a shorter notation: we can access the element as `form[index/name]`. +````warn header="Notazione breve: `form.name`" +Esiste una notazione breve: possiamo accedere all'elemento come `form[index/name]`. -In other words, instead of `form.elements.login` we can write `form.login`. +In altre parole, invece di `form.elements.login` possiamo scrivere `form.login`. -That also works, but there's a minor issue: if we access an element, and then change its `name`, then it is still available under the old name (as well as under the new one). +Funziona ugualmente, ma c'è un piccolo problema: se accediamo a un elemento, che in successivamente cambia il suo `name`, questo sarà ancora accessibile sia attraverso il vecchio nome, ma anche tramite quello nuovo. -That's easy to see in an example: +È facile capirlo da un esempio: ```html run height=40 @@ -104,34 +104,34 @@ That's easy to see in an example: ``` -That's usually not a problem, because we rarely change names of form elements. +Solitamente non è un problema, in quanto raramente andiamo a modificare il nome degli elementi dei form. ```` ## Backreference: element.form -For any element, the form is available as `element.form`. So a form references all elements, and elements reference the form. +Per ogni elemento, il form è disponibile come `element.form`. Quindi un form referenzia tutti gli elementi, e gli elementi referenziano il form. -Here's the picture: +Come possiamo vedere in figura: ![](form-navigation.svg) -For instance: +Per esempio: ```html run height=40
@@ -149,66 +149,66 @@ For instance: ``` -## Form elements +## Elementi del form -Let's talk about form controls. +Parliamo un po' dei form controls. -### input and textarea +### input e textarea -We can access their value as `input.value` (string) or `input.checked` (boolean) for checkboxes. +Possiamo accedere ai lori valori tramite `input.value` (string) o `input.checked` (boolean) per i checkbox. -Like this: +Come in questo caso: ```js -input.value = "New value"; -textarea.value = "New text"; +input.value = "Nuovo valore"; +textarea.value = "Nuovo testo"; -input.checked = true; // for a checkbox or radio button +input.checked = true; // per una checkbox o un radio button ``` -```warn header="Use `textarea.value`, not `textarea.innerHTML`" -Please note that even though `` holds its value as nested HTML, we should never use `textarea.innerHTML` to access it. +```warn header="Usare `textarea.value`, e non `textarea.innerHTML`" +Nota bene che, nonostante anche `` contenga il suo valore come HTML annidato, non dovremmo mai usare `textarea.innerHTML` per accedervi. -It stores only the HTML that was initially on the page, not the current value. +Esso conterrà solamente l'HTML che era stato inizialmente impostato nella pagina, e non il valore attuale. ``` -### select and option +### select ed option -A `` contiene 3 importanti proprietà: -1. `select.options` -- the collection of `