Forms and control elements, such as <input>
have a lot of special properties and events.
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 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.
document.forms.my - the form with name="my"
document.forms[0] - the first form in the document
When we have a form, then any element is available in the named collection form.elements
.
For instance:
<form name="my">
<input name="one" value="1">
<input name="two" value="2">
</form>
<script>
// get the form
let form = document.forms.my; // <form name="my"> element
// get the element
let elem = form.elements.one; // <input name="one"> element
alert(elem.value); // 1
</script>
There may be multiple elements with the same name, that’s often the case with radio buttons.
In that case form.elements[name]
is a collection, for instance:
<form>
<input type="radio" name="age" value="10">
<input type="radio" name="age" value="20">
</form>
<script>
let form = document.forms[0];
let ageElems = form.elements.age;
alert(ageElems[0].value); // 10, the first input value
</script>
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
.
A form may have one or many <fieldset>
elements inside it. They also support the elements
property.
For instance:
<body>
<form id="form">
<fieldset name="userFields">
<legend>info</legend>
<input name="login" type="text">
</fieldset>
</form>
<script>
alert(form.elements.login); // <input name="login">
let fieldset = form.elements.userFields;
alert(fieldset); // HTMLFieldSetElement
// we can get the input both from the form and from the fieldset
alert(fieldset.elements.login == form.elements.login); // true
</script>
</body>
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
.
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).
That’s easy to see in an example:
<form id="form">
<input name="login">
</form>
<script>
alert(form.elements.login == form.login); // true, the same <input>
form.login.name = "username"; // change the name of the input
// form.elements updated the name:
alert(form.elements.login); // undefined
alert(form.elements.username); // input
// the direct access now can use both names: the new one and the old one
alert(form.username == form.login); // true
</script>
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.
Here’s the picture:
For instance:
<form id="form">
<input type="text" name="login">
</form>
<script>
// form -> element
let login = form.login;
// element -> form
alert(login.form); // HTMLFormElement
</script>
Form elements
Let’s talk about form controls, pay attention to their specific features.
input and textarea
We can access their value as input.value
(string) or input.checked
(boolean) for checkboxes.
Like this:
input.value = "New value";
textarea.value = "New text";
input.checked = true; // for a checkbox or radio button
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.
select and option
A <select>
element has 3 important properties:
select.options
– the collection of<option>
elements,select.value
– the value of the currently selected option,select.selectedIndex
– the number of the currently selected option.
So we have three ways to set the value of a <select>
:
- Find the needed
<option>
and setoption.selected
totrue
. - Set
select.value
to the value. - Set
select.selectedIndex
to the number of the option.
The first way is the most obvious, but (2)
and (3)
are usually more convenient.
Here is an example:
<select id="select">
<option value="apple">Apple</option>
<option value="pear">Pear</option>
<option value="banana">Banana</option>
</select>
<script>
// all three lines do the same thing
select.options[2].selected = true;
select.selectedIndex = 2;
select.value = 'banana';
</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.
Like this:
<select id="select" multiple>
<option value="blues" selected>Blues</option>
<option value="rock" selected>Rock</option>
<option value="classic">Classic</option>
</select>
<script>
// get all selected values from multi-select
let selected = Array.from(select.options)
.filter(option => option.selected)
.map(option => option.value);
alert(selected); // blues,rock
</script>
The full specification of the <select>
element is available in the specification https://html.spec.whatwg.org/multipage/forms.html#the-select-element.
new Option
This is rarely used on its own. But there’s still an interesting thing.
In the specification of the option element there’s a nice short syntax to create <option>
elements:
option = new Option(text, value, defaultSelected, selected);
Parameters:
text
– the text inside the option,value
– the option value,defaultSelected
– iftrue
, thenselected
HTML-attribute is created,selected
– iftrue
, then the option is selected.
For instance:
let option = new Option("Text", "value");
// creates <option value="value">Text</option>
The same element selected:
let option = new Option("Text", "value", true, true);
<option>
Option elements have additional properties:
selected
- Is the option selected.
index
- The number of the option among the others in its
<select>
. text
- Text content of the option (seen by the visitor).
Summary
Form navigation:
document.forms
- A form is available as
document.forms[name/index]
. form.elements
- Form elements are available as
form.elements[name/index]
, or can use justform[name/index]
. Theelements
property also works for<fieldset>
. element.form
- Elements reference their form in the
form
property.
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.
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.
Yorumlar
<code>
kullanınız, birkaç satır eklemek için ise<pre>
kullanın. Eğer 10 satırdan fazla kod ekleyecekseniz plnkr kullanabilirsiniz)