The form object

The form represents the HTML <form> elements and are generally used to send data from one application to another; data that can be added / selected by the user.

Accessing <form> elements in JavaScript

There are several ways to access the HTML <form> elements as objects in JavaScript.
Generally, the following methods are used: getElementById(), querySelector() or the: document.forms property.

If the <form> tag has an ID, you can access it with any of these syntaxes:

document.getElementById('id_form')
document.querySelector('#id_form')
document.forms['id_form']

- Example, accesses a <form> using its ID and displays the value from the 'action' attribute.

<p>Accesses a &lt;form&gt; using its ID and displays the value from the 'action' attribute.</p>
<form id='frm1' action='some_page.php' method='post'>
<p>This form with id '#frm1' has the action: <em id='resp'>#resp</em></p>
Text: <input type='text'/>
</form>

<script>
var frm = document.getElementById('frm1');
document.getElementById('resp').innerHTML = frm.action;
</script>

If the <form> tag has a name attribute, it can be accessed with this syntax:

document.forms['name_form']

- Example, accesses a <form> dupa 'name' and displays the value from the 'action' attribute.

<p>Accesses a &lt;form&gt; using its 'name' and displays the value from the 'action' attribute.</p>
<form name='frm2' action='some_adr.php' method='post'>
<p>This form with name 'frm2' has the action: <em id='resp'>#resp</em></p>
Text: <input type='text'/>
</form>

<script>
var frm = document.forms['frm2'];
document.getElementById('resp').innerHTML = frm.action;
</script>

If the <form> tag has a css class (in the class attribute), it can be accessed with this syntax:

document.querySelector('form.clas_form')

If there are multiple forms with the same 'class', the querySelector() method will return the first form with that class.

- Example, accesses a <form> using its css 'class' and displays the value from the 'action' attribute.

<p>Accesses a &lt;form&gt; using its 'class' and displays the value from the 'action' attribute.</p>
<form class='frm3' action='some_page.php' method='post'>
<p>This form with class 'frm3' has the action: <em id='resp'>#resp</em></p>
Text: <input type='text'/>
</form>

<script>
var frm = document.querySelector('form.frm3');
document.getElementById('resp').innerHTML = frm.action;
</script>

In addition to the properties and methods specific to html elements (presented at: //coursesweb.net/javascript/properties-methods-html-elements ), the form object contains its own properties and methods.

Properties of the form object

eform.acceptCharset - returns or sets the value of the accept-charset attribute.
- The 'accept-charset' attribute sets the characters type (encodig) for data in form. If it is not specified, it applies the document encodig.

<h4>Example form.acceptCharset</h4>
<form id='frm1' action='#' accept-charset='utf-8'>
Email: <input type='email' name='email'><br>
Pass: <input type='password' name='password'>
</form>
<p>Displays the value of the acceptCharset property.</p>
<blockquote id='resp'>#resp</blockquote>

<script>
var frm1 = document.getElementById('frm1');
document.getElementById('resp').innerHTML ='accept-charset = '+ frm1.acceptCharset;
</script>

eform.action - returns or sets the value of the action attribute.

<h4>Example form.action</h4>
<form id='frm1' action='page.php'>
Email: <input type='email' name='email'><br>
Pass: <input type='password' name='password'>
</form>
<p> If you click the following button, it displys the value from 'action' and sets another value.<br>
 - The second click on the button it displays the new value.</p>
<button id='btn1'>Action</button>
<blockquote id='resp'>#resp</blockquote>

<script>
var frm1 = document.getElementById('frm1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
 document.getElementById('resp').innerHTML = frm1.action;
 frm1.action ='other_page.php';
});
</script>

eform.autocomplete - returns or sets the value of the autocomplete attribute from <form>.
- When the value is 'on' (default), the browser automatically adds values in the input fields based on values previously added by the user.
- The value 'off' cancels this functionality.

<h4>Example form.autocomplete</h4>
<form id='frm1' action='#' autocomplete='off'>
Email: <input type='email' name='email'><br>
Name: <input type='text' name='nume'>
</form>
<p>If you click the following button, it displys at #resp the value from 'autocomplete' and sets another value.<br>
 - The second click on the button it displays the new value.</p>
<button id='btn1'>Autocomplete</button>
<blockquote id='resp'>#resp</blockquote>

<script>
var frm1 = document.getElementById('frm1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
 document.getElementById('resp').innerHTML = frm1.autocomplete;
 frm1.autocomplete ='on';
});
</script>

eform.elements - contains an array of objects with all form elements belonging to this form. Then, the elements can be accessed in JavaScript by the order index (starting from 0), or by name (added to the 'name' attribute).

<h4>Example form.elements</h4>
<form action='#' id='frm1'>
Email: <input type='email' name='email' value='some@email.net'><br>
Pass: <input type='password' name='password' value='some_pass'>
</form>
<p> Displays the value of each input in form.</p>
<blockquote id='resp'>#resp</blockquote>

<script>
var felm = document.getElementById('frm1').elements;
var email = felm[0];
var pass = felm['password'];
document.getElementById('resp').innerHTML ='Email: '+ email.value +'<br>Pass: '+ pass.value;
</script>

eform.enctype - returns or sets the value of the 'enctype' attribute.
- The 'enctype' attribute indicates the type of content sent via the form to the server; The default value is 'application/x-www-form-urlencoded'.
- The value 'multipart/form-data' allows the form with <input type='file'> element to upload files.

<h4>Example enctype</h4>
<form id='frm1' action='#' method='post'>
Text: <input type='text'/>
</form>
<p>If you click the following button, it displys at #resp the value returned by the 'enctype' property.</p>
<button id='btn1'>enctype</button>
<blockquote id='resp'>#resp</blockquote>

<script>
var frm1 = document.getElementById('frm1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
 document.getElementById('resp').innerHTML = frm1.enctype;
});
</script>

eform.length - contains the number of elements in form.

<h4>Example form.length</h4>
<form action='#' id='frm1'>
Email: <input type='email' name='email'><br>
Pass: <input type='password' name='password'><br>
<input type='submit' name='sbmt' value='Send'>
</form>
<p> Displays the number of elements in &lt;form&gt;. It accesses them with the 'elements' property, and displays their name.</p>
<blockquote id='resp'>#resp</blockquote>

<script>
var frm1 = document.getElementById('frm1');
var res ='Number of elements in form: '+ frm1.length;

for(var i=0; i<frm1.length; i++) res +='<br>'+ frm1.elements[i].name;

document.getElementById('resp').innerHTML = res;
</script>

eform.method - returns or sets the value of the 'method' attribute of the <form>.

<h4>Example form.method</h4>
<form id='frm1' action='#' method='get'>
Text: <input type='text' name='email'>
</form>
<p> If you click the following button, it displys the value from 'method' and sets another value.<br>
 - The second click on the button it displays the new value.</p>
<button id='btn1'>method</button>
<blockquote id='resp'>#resp</blockquote>

<script>
var frm1 = document.getElementById('frm1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
 document.getElementById('resp').innerHTML = frm1.method;
 frm1.method ='post';
});
</script>

eform.name - returns or sets the value of the 'name' attribute of <form>.

<h4>Example name</h4>
<form id='frm1' action='#' name='frm_name'>
Text: <input type='text'/>
</form>
<p>If you click the following button, it displys at #resp the value returned by the 'name' property.</p>
<button id='btn1'>name</button>
<blockquote id='resp'>#resp</blockquote>

<script>
var frm1 = document.getElementById('frm1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
 document.getElementById('resp').innerHTML = frm1.name;
});
</script>

eform.noValidate - sets or returns whether the form-data should be validated or not, on submission (true or false). Defaul is true
- If the 'novalidate' attribute is true, the form data will be validated by the browser before it is submitted.

<h4>Example form.noValidate</h4>
<form id='frm1' action='#' noValidate>
Email: <input type='email' name='email'>
</form>
<p>If you click the following button, it displys at #resp the value 'true', indicating that 'novalidate' is added, then sets it with the value 'false'.<br>
 - The second click on the button it displays the new value.</p>
<button id='btn1'>noValidate</button>
<blockquote id='resp'>#resp</blockquote>

<script>
var frm1 = document.getElementById('frm1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
 document.getElementById('resp').innerHTML = frm1.noValidate;
 frm1.noValidate = false;
});
</script>

eform.target - returns or sets the value of the 'target' attribute of <form>.
- The 'target' indicates where to display the results received from submitting the form.

<h4>Example form.target</h4>
<form id='frm1' action='#' target='iframe_name'>
Text: <input type='text' name='txt1'>
</form>
<p>If you click the following button, it displys at #resp the value of thw 'target' attribute, then sets another value.<br>
 - The second click on the button it displays the new value.</p>
<button id='btn1'>target</button>
<blockquote id='resp'>#resp</blockquote>

<script>
var frm1 = document.getElementById('frm1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
 document.getElementById('resp').innerHTML = frm1.target;
 frm1.target ='_blank';
});
</script>

Methods of the form object

eform.reportValidity() - returns true if data in the form elements are valid (according to defined settings), otherwise False.

<h4>Example form.reportValidity()</h4>
<form id='frm1' action='#'>
Nume: <input type='text' pattern='[A-z0-9]{3,}' required placeholder='Minimum 3 letters / numbers'><br>
Email: <input type='email' required>
</form>
<p> The input fields have the 'required' attribute.<br>
 - Click on the button to check the value returned by the reportValidity() method, and it displays the response at #resp.</p>
<button id='btn1'>Send</button>
<blockquote id='resp'>#resp</blockquote>

<script>
var frm1 = document.getElementById('frm1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var res = frm1.reportValidity() ?'Data completed correctly' :'Fill in all the input fields correctly.<br>The Name at least 3 characters, only letters and numbers';
 document.getElementById('resp').innerHTML = res;
});
</script>

eform.reset() - resets the form to its initial state (like the reset button).

<h4>Example form.reset()</h4>
<form id='frm1' action='#'>
Text: <input type='text' value='some-val'><br>
Select: <select><option value='gamv'>gamv.eu</option><option selected value='marplo'>marplo.net</option></select>
</form>
<p> Modify the form data, then click the next button.</p>
<button id='btn1'>Rseteaza</button>

<script>
var frm1 = document.getElementById('frm1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
 frm1.reset();
 alert('form resetted');
});
</script>

eform.submit() - submits the form to the server. (like the Submit button).

<h4>Example form.submit()</h4>
<form id='frm1' action='#'>
Text: <input name='txt1' type='text'>
</form>
<p> If the text in the text box has at least 3 characters, clicking on the button will submit the form, if it has less then 3 characters', it display a message.</p>
<button id='btn1'>Trimite</button>
<blockquote id='resp'>#resp</blockquote>

<script>
var frm1 = document.getElementById('frm1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var tval = frm1['txt1'].value;
 if(tval.length >2) frm1.submit();
 else document.getElementById('resp').innerHTML ='Add minimum 3 characters.';
});
</script>

Events of the form object

Events are triggered when certain actions are performed. They can be used to execute some functions when the specified action occurs.

reset - it is triggered when the form is resetted (with the 'reset' button, or the reset() method).

<h4>Example reset</h4>
<form id='frm1' action='#'>
Text: <input type='text' value='some-val'><br>
Select: <select><option value='gamv'>gamv.eu</option><option selected value='marplo'>marplo.net</option></select><br>
<input type='reset' value='Reset'>
</form>
<p> Click on the following button.</p>
<blockquote id='resp'>#resp</blockquote>

<script>
var frm1 = document.getElementById('frm1');

//when #frm1 is resetted
frm1.addEventListener('reset', (ev)=>{
 document.getElementById('resp').innerHTML ='The form is resetted.';
});
</script>

submit - it is triggered when the form is submitted (with the 'submit' button).
- It is useful for validating form data or performing certain instructions before submitting the form.
- The ev.preventDefault() method cancels the automatic submission of the form ('ev' represents the emitted event).

<h4>Example submit</h4>
<form id='frm1' action='#'>
Text: <input type='text' name='txt1' placeholder='Minimum 3 characters'><br>
<input type='submit' value='Submit'>
</form>
<p>If the text field contains less then 3 characters when the form is submited, it displays a message.<br>
 Otherwise, it submit the form with the submit() method.</p>
<blockquote id='resp'>#resp</blockquote>

<script>
var frm1 = document.getElementById('frm1');

//when #frm1 is submitted
frm1.addEventListener('submit', (ev)=>{
 //stops automatic form submission
 ev.preventDefault();

 var tval = frm1['txt1'].value;
 if(tval.length <3) document.getElementById('resp').innerHTML ='Add minimum 3 characters.';
 else frm1.submit();
});
</script>

<<-anchor and link object -- Accessing form fields->>

The form object

Javascript Course

Accessing <form> elements in JavaScript

Properties of the form object

Methods of the form object

Events of the form object

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Last accessed pages

Popular pages this month