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.

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>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which HTML element can be used to embed a SWF flash content?
<object> <div> <script>
<object type="application/x-shockwave-flash" data="file.swf" width="500" height="250">
 <param name="src" value="file.swf" />
 Your browser not support SWF.
</object>
Which CSS pseudo-class adds a style to an input form field that has keyboard input focus?
:active :focus :hover
input:focus {
  background-color: #88fe88;
}
Click on the instruction which converts a JSON string into a JavaScript object.
JSON.stringify(javascript_object) object.toString() JSON.parse(json_string)
var jsnstr = '{"url": "http://coursesweb.net/", "title": "Web Development Courses"}';
var obj = JSON.parse(jsnstr);
alert(obj.url);
Indicate the PHP function which can be used to create or write a file on server.
fopen() file_put_contents() file_get_contents()
if (file_put_contents("file.txt", "content")) echo "The file was created";
else echo "The file can not be created";
The form object

Last accessed pages

  1. Follow the mouse cursor with a DIV inside a Parent (2914)
  2. Add Pause in JavaScript script (9991)
  3. Input text fields (2286)
  4. Read Excel file data in PHP - PhpExcelReader (61135)
  5. Detecting events in ActionScript 3 (787)

Popular pages this month

  1. Insert, Select and Update NULL value in MySQL (558)
  2. Read Excel file data in PHP - PhpExcelReader (467)
  3. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (342)
  4. PHP getElementById and getElementsByTagName (266)
  5. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (253)