Chapter 4: Forms, controls

4.1 Form properties and methods

Navigation: form and elements

Document forms are members of the special collection document.forms.

document.forms.my - the form with name="my"
document.forms[0] - the first form in the document

Any element is available in the named collection form.elements. form.elements[name] is a collection.

let elem = form.elements.age;
alert(elem[0]);

Backreference: element.form

For any element, the form is available as element.form.

Form elements

input and textarea

We can access their value as input.value (string) or input.checked (boolean) for checkboxes.

select and option

• select.options – the collection of <option> subelements.

• select.value – the value of the currently selected <option>.

• select.selectedIndex – the number of the currently selected <option>.

new Option

option = new Option(text, value, defaultSelected, selected);

• defaultSelected - set HTML-attribute, that we can get using option.getAttribute('selected').

• selected - if true, then the option is selected.

4.2 Focusing: focus/blur

There’s an autofocus HTML attribute that puts the focus into an element by default when a page loads.

Events focus/blur

The focus event is called on focusing, and blur – when the element loses the focus.

Methods focus/blur

Methods elem.focus() and elem.blur() set/unset the focus on the element.

onblur works after the element lost the focus, so we can't use preventDefault().

Allow focusing on any element: tabindex

focus/blur support is guaranteed for elements that a visitor can interact with: <button>, <input>, <select>, <a> and so on.

Any element becomes focusable if it has tabindex. The switch order is: elements with tabindex from 1 and above go first, and then elements without tabindex.

• tabindex="0" puts an element among those without tabindex.

• tabindex="-1" - the Tab key ignores such elements, but method elem.focus() works.

Delegation: focusin/focusout

Events focus and blur do not bubble. However, they propagate down on the capturing phase.

focusin and focusout events exactly do the same as focus/blur, but they bubble. They must be assigned using elem.addEventListener.

4.3 Events: change, input, cut, copy, paste

Event: change

The change event triggers when the element has finished changing.

• input: it triggers after losing focus.

• select, input type=checkbox/radio: it triggers right after the selection changes.

Event: input

The input event triggers every time after a value is modified by the user.

The input event occurs after the value is modified.

Events: cut, copy, paste

We can use event.preventDefault() to abort the action, then nothing gets copied/pasted.

4.4 Forms: event and method 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.

Event: submit

To submit a form:

• Click <input type="submit"> or <input type="image">.

• Press Enter on an input field.

When a form is sent using Enter on an input field, a click event triggers on the <input type="submit">.

Method: submit

To submit a form to the server manually, we can call form.submit(). The submit event is not generated.