Javascript Form Properties

Javascript Forms and control elements, such as <input> have a lot of special properties and events.

We are working with forms that will be much more convenient when we learn them.

Navigation: form and elements:

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

⦁ That is 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 javascript form.

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

Named collection form.elements:

For instance:

<!doctype html>
<body>
<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>
</body>

OUTPUT:

Backreference: element.form

For any element, the form is available as the element.form. So a javascript form references all elements, and elements reference the form.

<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>

OUTPUT: