form

Author: iliakan

2-ui/4-forms-controls/1-form-elements/article.md

@@ -52,7 +52,7 @@ let form = document.forms[0];
 let ageElems = form.elements.age;
 
 *!*
-alert(ageElems[0].value); // 10, the value of the first input name="age"
+alert(ageElems[0]); // [object HTMLInputElement]
 */!*
 </script>
 ```
@@ -61,7 +61,7 @@ These navigation properties do not depend on the tag structure. All control elem
 
 
 ````smart header="Fieldsets as \"subforms\""
-A form may have one or many `<fieldset>` elements inside it. They also support the `elements` property.
+A form may have one or many `<fieldset>` elements inside it. They also have `elements` property that lists form controls inside them.
 
 For instance:
 
@@ -81,7 +81,7 @@ For instance:
     let fieldset = form.elements.userFields;
     alert(fieldset); // HTMLFieldSetElement
 
-    // we can get the input both from the form and from the fieldset
+    // we can get the input by name both from the form and from the fieldset
     alert(fieldset.elements.login == form.elements.login); // true
 */!*
   </script>
@@ -92,7 +92,7 @@ For instance:
 ````warn header="Shorter notation: `form.name`"
 There's a shorter notation: we can access the element as `form[index/name]`.
 
-Instead of `form.elements.login` we can write `form.login`.
+In other words, instead of `form.elements.login` we can write `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).
 
@@ -113,7 +113,7 @@ That's easy to see in an example:
   alert(form.elements.username); // input
 
 *!*
-  // the direct access now can use both names: the new one and the old one
+  // form allows both names: the new one and the old one
   alert(form.username == form.login); // true
 */!*
 </script>
@@ -152,7 +152,7 @@ For instance:
 
 ## Form elements
 
-Let's talk about form controls, pay attention to their specific features.
+Let's talk about form controls.
 
 ### input and textarea
 
@@ -168,20 +168,22 @@ input.checked = true; // for a checkbox or radio button
 ```
 
 ```warn header="Use `textarea.value`, not `textarea.innerHTML`"
-Please note that even though `<textarea>...</textarea>` holds its value as nested HTML, we should never use `textarea.innerHTML`. It stores only the HTML that was initially on the page, not the current value.
+Please note that even though `<textarea>...</textarea>` holds its value as nested HTML, we should never use `textarea.innerHTML` to access it.
+
+It stores only the HTML that was initially on the page, not the current value.
 ```
 
 ### select and option
 
 A `<select>` element has 3 important properties:
 
-1. `select.options` -- the collection of `<option>` elements,
-2. `select.value` -- the value of the currently selected option,
-3. `select.selectedIndex` -- the number of the currently selected option.
+1. `select.options` -- the collection of `<option>` subelements,
+2. `select.value` -- the value of the currently selected `<option>`,
+3. `select.selectedIndex` -- the number of the currently selected `<option>`.
 
-So we have three ways to set the value of a `<select>`:
+So we have three ways to set the value of a `<select>`, that do the same:
 
-1. Find the needed `<option>` and set `option.selected` to `true`.
+1. Find the corresponding `<option>` element and set `option.selected` to `true`.
 2. Set `select.value` to the value.
 3. Set `select.selectedIndex` to the number of the option.
 
@@ -204,9 +206,9 @@ Here is an example:
 </script>
 ```
 
-Unlike most other controls, `<select multiple>` allows multiple choice. In that case we need to walk over `select.options` to get all selected values.
+Unlike most other controls, `<select>` allows to select multiple options at once if it has `multiple` attribute. That's feature is rarely used. In that case we need to use the first ways: add/remove the `selected` property from `<option>` subelements.
 
-Like this:
+We can get their collection as `select.options`, for instance:
 
 ```html run
 <select id="select" *!*multiple*/!*>
@@ -231,7 +233,7 @@ The full specification of the `<select>` element is available in the specificati
 
 This is rarely used on its own. But there's still an interesting thing.
 
-In the specification of [the option element](https://html.spec.whatwg.org/multipage/forms.html#the-option-element) there's a nice short syntax to create `<option>` elements:
+In the [specification](https://html.spec.whatwg.org/multipage/forms.html#the-option-element) there's a nice short syntax to create `<option>` elements:
 
 ```js
 option = new Option(text, value, defaultSelected, selected);
@@ -244,6 +246,8 @@ Parameters:
 - `defaultSelected` -- if `true`, then `selected` HTML-attribute is created,
 - `selected` -- if `true`, then the option is selected.
 
+There may be a small confusion about `defaultSelected` and `selected`. That's simple: `defaultSelected` sets HTML-attribute, that we can get using `option.getAttribute('selected')`. And `selected` - whether the option is selected or not, that's more important. Usually both values are either set to `true` or not set (same as `false`).
+
 For instance:
 
 ```js
@@ -257,18 +261,20 @@ The same element selected:
 let option = new Option("Text", "value", true, true);
 ```
 
-```smart header="Additional properties of `<option>`"
-Option elements have additional properties:
+Option elements have properties:
 
-`selected`
+`option.selected`
 : Is the option selected.
 
-`index`
+`option.index`
 : The number of the option among the others in its `<select>`.
 
-`text`
+`option.text`
 : Text content of the option (seen by the visitor).
-```
+
+## References
+
+- Specification: <https://html.spec.whatwg.org/multipage/forms.html>.
 
 ## Summary
 
@@ -285,6 +291,8 @@ Form navigation:
 
 Value is available as `input.value`, `textarea.value`, `select.value` etc, or `input.checked` for checkboxes and radio buttons.
 
-For `<select>` we can also get the value by the index `select.selectedIndex` or through the options collection `select.options`. The full specification of this and other elements is in the specification <https://html.spec.whatwg.org/multipage/forms.html>.
+For `<select>` we can also get the value by the index `select.selectedIndex` or through the options collection `select.options`.
+
+These are the basics to start working with forms. We'll meet many examples further in the tutorial.
 
-These are the basics to start working with forms. We'll meet many examples further in the tutorial. In the next chapter we'll cover `focus` and `blur` events that may occur on any element, but are mostly handled on forms.
+In the next chapter we'll cover `focus` and `blur` events that may occur on any element, but are mostly handled on forms.