From b162ceb8e6ee7ee9b7afab41998a08155cc4296a Mon Sep 17 00:00:00 2001 From: vplentinax Date: Tue, 9 Jun 2020 00:49:20 -0400 Subject: [PATCH] sync-ui-forms-controls --- .../1-add-select-option/task.md | 2 + .../1-form-elements/article.md | 73 +++++++++++-------- .../1-form-elements/form-navigation.svg | 42 +---------- .../3-editable-div/solution.view/my.css | 2 +- .../3-editable-div/source.view/my.css | 2 +- .../4-edit-td-click/solution.view/my.css | 7 +- .../2-focus-blur/5-keyboard-mouse/solution.md | 2 +- 2-ui/4-forms-controls/2-focus-blur/article.md | 30 ++++---- .../3-events-change-input/article.md | 32 +++++--- .../4-forms-submit/article.md | 2 +- 10 files changed, 93 insertions(+), 101 deletions(-) diff --git a/2-ui/4-forms-controls/1-form-elements/1-add-select-option/task.md b/2-ui/4-forms-controls/1-form-elements/1-add-select-option/task.md index 9b218aa7f..a0e74da57 100644 --- a/2-ui/4-forms-controls/1-form-elements/1-add-select-option/task.md +++ b/2-ui/4-forms-controls/1-form-elements/1-add-select-option/task.md @@ -18,3 +18,5 @@ Use JavaScript to: 1. Show the value and the text of the selected option. 2. Add an option: ``. 3. Make it selected. + +Note, if you've done everything right, your alert should show `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 5a95d5147..01af1f400 100644 --- a/2-ui/4-forms-controls/1-form-elements/article.md +++ b/2-ui/4-forms-controls/1-form-elements/article.md @@ -2,13 +2,13 @@ Forms and control elements, such as `` have a lot of special properties and events. -Working with forms can be much more convenient if we know them. +Working with forms will be much more convenient when we learn them. ## Navigation: form and elements Document forms are members of the special collection `document.forms`. -That's a *named* collection: we can use both the name and the number to get the form. +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. ```js no-beautify document.forms.my - the form with name="my" @@ -51,15 +51,17 @@ let form = document.forms[0]; let ageElems = form.elements.age; -alert(ageElems[0].value); // 10, the first input value +*!* +alert(ageElems[0]); // [object HTMLInputElement] +*/!* ``` -These navigation properties do not depend on the tag structure. All elements, no matter how deep they are in the form, are available in `form.elements`. +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`. ````smart header="Fieldsets as \"subforms\"" -A form may have one or many `
` elements inside it. They also support the `elements` property. +A form may have one or many `
` elements inside it. They also have `elements` property that lists form controls inside them. For instance: @@ -79,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 */!* @@ -90,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). @@ -111,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 */!* @@ -123,8 +125,7 @@ That's usually not a problem, because we rarely change names of form elements. ## Backreference: element.form -For any element, the form is available as `element.form`. So a form references all elements, and elements -reference the form. +For any element, the form is available as `element.form`. So a form references all elements, and elements reference the form. Here's the picture: @@ -150,11 +151,11 @@ 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 -Normally, we can access the value as `input.value` or `input.checked` for checkboxes. +We can access their value as `input.value` (string) or `input.checked` (boolean) for checkboxes. Like this: @@ -166,20 +167,22 @@ input.checked = true; // for a checkbox or radio button ``` ```warn header="Use `textarea.value`, not `textarea.innerHTML`" -Please note that 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 `` 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 ``: +They provide three different ways of setting a value for a `` allows multiple choice. In that case we need to walk over `select.options` to get all selected values. +Unlike most other controls, ` @@ -223,11 +226,13 @@ Like this: ``` -The full specification of the `` element is available in the specification . ### new Option -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 `