Form Properties and Methods
The method property is targeted at setting or returning the value of the method attribute in a form.
The method attribute indicates the way of sending form-data. The latter is sent to the page, specified in the action attribute.
Navigation: Form and Elements¶
Document forms are the components of the specific collection, known as document.forms. It is a so-called “named collection”, both named and ordered. For getting the form both the name and the number can be used, like here:
document.forms.myForm - the form with name="myForm"
document.forms[0] - it's the first form in the document
While having a form, any element is available in the named collection form.elements, like in this example:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form name="myForm">
<input name="firstName" value="1">
<input name="lastName" value="2">
</form>
<script>
// get the form
let form = document.forms.myForm; // <form name="myForm"> element
// get the element
let elem = form.elements.firstName; // <input name="firstName"> element
alert(elem.value); // 1
</script>
</body>
</html>Multiple elements can exist with the same name: for example, the case with radio buttons. In such a case, form.elements[name] is a collection, for example:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form>
<input type="radio" name="age" value="1">Value1</input>
<input type="radio" name="age" value="2">Value2</input>
</form>
<script>
let form = document.forms[0];
let ageElems = form.elements.age;
alert(ageElems[0]); // [object HTMLInputElement]
</script>
</body>
</html>The navigation properties don't rely upon the tag structure. All the control elements are available inside form.elements.
Fieldsets as “Subforms”
A form can contain one or many <fieldset> elements. Also, they have elements property, which is controlled by the lists form inside them. Here is an example:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form id="formId">
<fieldset name="infoFields">
<legend>info</legend>
<input name="login" type="text">
</fieldset>
</form>
<script>
alert(formId.elements.login); // <input name="login">
let fieldset = formId.elements.infoFields;
alert(fieldset); // HTMLFieldSetElement
// we can get input by name both from the form and from a set of fields
alert(fieldset.elements.login == formId.elements.login); // true
</script>
</body>
</html>You can also use a shorter notation: form.name. So, you have the option of accessing the element as form[index/name]. In other words, you can simply write form.login instead of form.elements.login. That also can work, but there is a small problem: when accessing an element and changing its name, it will still be available under the previous name. It is demonstrated in the following example:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
</style>
</head>
<body>
<form id="form">
<input name="login">
</form>
<script>
alert(form.elements.login == form.login); // true, it's the same <input>
form.login.name = "name"; // change the name of the input
// form.elements updated the name:
alert(form.elements.login); // undefined
alert(form.elements.name); // input
// form allows both names: the new and the old
alert(form.name == form.login); // true
</script>
</body>
</html>Backreference: element.form¶
The form is available as element.form for any element. So, elements reference the form and the form references all elements, as demonstrated in the picture below:
And, here is an example:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
</style>
</head>
<body>
<form id="form">
<input type="text" name="login">
</form>
<script>
// form -> element
let login = form.login;
// element -> form
alert(login.form); // HTMLFormElement
</script>
</body>
</html>Form Elements¶
Let’s look through the main form elements:
- input and text area
Their value can be accessed as input.value (string) or input.checked (boolean) for checkboxes, as shown in the example below:
input.value = "The Value"; textarea.value = "The text" input.checked = true; // checkbox or radio buttonAlso, take into consideration that although <textarea>...</textarea> keeps its value as nested HTML, textarea.innerHTML should never be used for accessing it. It includes only the HTML that was initially on the page and not the current value.
- select and option
A <select> element has three significant properties:
- The group of <option> subelements is known as select.options.
- The value of the currently selected <option> is select.value.
- The number of the currently selected <option> .
Accordingly, they offer three different ways of setting a value for the <select>:
- Finding the matching <option> element and set option.selected to true.
- Setting select.value to the value.
- Setting select.selectedIndex to the number of the option.
The 2nd and the 3rd ways are more convenient, but the first is the most obvious one.
Here is an example:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <style> </style> </head> <body> <select id="select"> <option value="green">Green</option> <option value="red">Red</option> <option value="blue">Blue</option> </select> <script> // all three lines do the same thing select.options[2].selected = true; select.selectedIndex = 2; select.value = 'red'; </script> </body> </html>In contrast to most other controls, <select> helps to control multiple options simultaneously, if it has the attribute multiple. However, this feature is rarely used. Hence, you can use the first way that is added/remove the selected property <option> from subelements.
In the example, we demonstrate how to get their collection as select.options:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <style> </style> </head> <body> <select id="select" multiple> <option value="green" selected>Green</option> <option value="red" selected>Red</option> <option value="blue">Blue</option> </select> <script> // get all selected values from multiple selection let selected = Array.from(select.options) .filter(option => option.selected) .map(option => option.value); alert(selected); // green, red </script> </body> </html> - new option
This element is also used rarely on its own. But in its specification there is a pretty short syntax for creating <option> elements, like this:
let option = new Option(text, value, defaultSelected, selected);The parameters are the following:
- text is the text within the option,
- value is the value of the option,
- defaultSelected – if it's true, then selected HTML-attribute is generated,
- selected – if it's true, then the option is picked out.
Sometimes there is a confusion over defaultSelected and selected. The difference between them is the following: defaultSelecte specifies the HTML-attribute, which you can get using option.getAttribute('selected'), and the selected sets whether the is selected or not. It is more important. In principle, both values can be set to true or false. For example:
let option = new Option('text', 'value');
// creates <option value="value">text</option>In the example below, the same element is selected:
let option = new Option('text', 'value', true, true);Option elements include the following properties:
- option.selected - the option is selected.
- option.index - the number of the option amid the others in its kbd class="highlighted"><select>.
- option.text -the option’s text content.
0 Comments
CAN FEEDBACK
Emoji