Properties and Methods of the Form elements

Methods for form elements

In addition to the properties and methods specific of HTML elements (presented to: coursesweb.net/javascript/properties-methods-html-elements ), objects of the <form> contain their specific properties and methods.

Useful properties of the form elements

Here there are presented some of the most used properties related to the form objects.
- There is a complete list to MDN: HTMLInputElement - Properties.

elm.autofocus - returns or set the 'autofocus' attribute in 'elm'.
- When the 'autofocus' is added (set True), the <input> gets focus when page loads. If it is not added, is false.

<h4>Example elm.autofocus</h4>
<form action='#'>
Text: <input type='text' name='txt1' autofocus><br>
<input type='button' value='Click' id='btn1'>
</form>
<p>When click on the button it checks if the 'txt1' input field has 'autofocus'; it displays the response in #resp.</p>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var frm = ev.target.form; //parent form
 document.getElementById('resp').innerHTML = frm['txt1'].autofocus;
});
</script>

elm.checked - returns or sets the state of the 'checkbox' and 'radio' elements.
- It returns True when the checkbox /radio button is 'checked', otherwise, False.

<h4>Example elm.checked</h4>
<form action='#'>
 CoursesWeb.net <input type='checkbox'/><br>
 MarPlo.net <input type='checkbox'/><br>
 GamV.eu <input type='checkbox'/>
<p>When click on the button it checks /unchecks all the 'checkbox' items.</p>
 <input type='button' value='Check /Uncheck' id='btn1'>
</form>

<script>
//initial value for checked
var check = false;

document.getElementById('btn1').addEventListener('click', (ev)=>{
 check = !check; //switch the value from false to true and vice versa
 var frm = ev.target.form; //parent form

 //traverses the items in frm
 for(var i=0; i<frm.length; i++){
 //if it is checkbox type, it sets 'checked' with the value from 'check'
 if(frm[i].type.toLowerCase() =='checkbox') frm[i].checked = check;
 }
});
</script>

elm.disabled - returns or sets the 'disabled' attribute.
- When 'disabled' is set True, the value of that element cannot be changed and is not sent when the form is sent. If it is not added, is false.

<h4>Example elm.disabled</h4>
<form action='#'>
Text: <input type='text' name='txt1' value='txt1'><br>
<input type='button' value='Disable' id='btn1'>
</form>
<p>When click on the button it adds to #resp the value of the 'disabled' attribute of 'txt1', then it sets 'disabled' true.<br>
 - The second click displays the new value.</p>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var frm = ev.target.form; //parent form
 document.getElementById('resp').innerHTML = frm['txt1'].disabled;
 frm['txt1'].disabled = true;
});
</script>

elm.form - returns an object with the parent <form> (in which 'elm' is added).

<h4>Example elm.form</h4>
<form id='frm1' action='#' method='post'>
Text: <input type='text'><br>
<input type='button' value='Click' id='btn1'>
</form>
<p>When click on the button it adds in #resp the id of the parent form (in which the button is added).</p>
<blockquote id='resp'>#resp</blockquote>

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

elm.formAction - returns or sets the value of the 'formaction' attribute.
- The 'formaction' attribute can be added in Submit buttons, and indicates where to send the form (ignores the address from 'action').

<h4>Example elm.formAction</h4>
<form id='frm1' action='#' method='post'>
Text: <input type='text'><br>
<input type='submit' value='Submit' name='sbmt' formaction='some_page.php'>
</form>
<p>When click on the Submit button, it adds in #resp the value returned by 'formAction', and sets other value.<br>
 - The second click displays the new value.</p>
<blockquote id='resp'>#resp</blockquote>

<script>
var frm = document.getElementById('frm1');
frm.addEventListener('submit', (ev)=>{
 ev.preventDefault(); //to not sends the form
 document.getElementById('resp').innerHTML = frm['sbmt'].formAction;
 frm['sbmt'].formAction ='other_pg';
 return false;
});
</script>

elm.formMethod - returns or sets the value of the 'formmethod' attribute.
- The 'formmethod' attribute can be added in Submit buttons, and rewrites the value of the 'method' attribute in <form>.

<h4>Example elm.formMethod</h4>
<form id='frm1' action='#' method='get'>
Text: <input type='text'><br>
<input type='submit' value='Submit' name='sbmt' formmethod='post'>
</form>
<p>When click on the Submit button, it adds in #resp the value returned by 'formMethod'.</p>
<blockquote id='resp'>#resp</blockquote>

<script>
var frm = document.getElementById('frm1');
frm.addEventListener('submit', (ev)=>{
 ev.preventDefault(); //to not send the form
 document.getElementById('resp').innerHTML = frm['sbmt'].formMethod;
});
</script>

elm.maxLength - returns or sets the value of the 'maxlength' attribute.
- The 'maxlength' attribute specifies the maximum number of allowed characters in an input or textarea.

<h4>Example elm.maxLength</h4>
<p>Displays the value of 'maxlength' from textarea, the maximum number of allowed characters.</p>
Description (you can add maximum <em id='resp'>nr</em> characters):<br>
 <textarea id='txta1' maxlength='180'></textarea>

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

elm.name - returns or sets the value of the 'name' attribute.

<h4>Example elm.name</h4>
<form action='#'>
Text: <input name='txt1' type='text'><br>
<input type='button' value='Click' id='btn1'>
</form>
<p>When click on the button it adds in #resp the value of the 'name' attribute of the first element in Form.</p>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var frm = ev.target.form; //parent form
 document.getElementById('resp').innerHTML = frm[0].name;
});
</script>

elm.placeholder - returns or sets the value of the 'placeholder' attribute.

<h4>Example elm.placeholder</h4>
<form action='#'>
Name: <input type='text' name='txt1' placeholder='Add a name'><br>
 <input type='button' value='placeholder' id='btn1'>
</form>
<p>When click on the button it adds in #resp the value of the 'placeholder' attribute from 'txt1', then it sets another value for 'placeholder'.<br>
 - The second click displays the new value.</p>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var frm = ev.target.form; //parent form
 document.getElementById('resp').innerHTML = frm['txt1'].placeholder;
 frm['txt1'].placeholder ='Your Name';
});
</script>

elm.readOnly - returns or sets the 'readonly' attribute.
- When 'readonly' is added (set True), the value of that element cannot be changed. If it is not added, is false.

<h4>Example elm.readOnly</h4>
<form action='#'>
Text: <input type='text' name='txt1' value='txt'><br>
<p> - Write something in the text box, after pressing the button try adding more text.</p>
<input type='button' value='readOnly' id='btn1'>
</form>
<p>When click on the button it adds in #resp the value of the 'readonly' attribute from 'txt1', then sets 'readOnly' true.<br>
 - The second click displays the new value.</p>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var frm = ev.target.form; //parent form
 document.getElementById('resp').innerHTML = frm['txt1'].readOnly;
 frm['txt1'].readOnly = true;
});
</script>

elm.required - returns or sets the 'required' attribute.
- When 'required' is added (set True), the user must fill in a value before submitting a form. If it is not added, is false.

<h4>Example elm.required</h4>
<form action='#'>
Name: <input type='text' name='txt1' required><br>
<input type='button' value='required' id='btn1'>
</form>
<p>When click on the button it checks if the 'txt1' element is 'required'.</p>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var frm = ev.target.form; //parent form
 document.getElementById('resp').innerHTML = frm['txt1'].required;
});
</script>

elm.type - returns or sets the value of the 'type' attribute.

<h4>Example elm.type</h4>
<form action='#'>
Text: <input name='txt1' type='text'><br>
<input type='button' value='Click' id='btn1'>
</form>
<p>When click on the button it adds in #resp the type of the form element with the name 'txt1', then it sets the type 'email'.<br>
 - The second click displays the new value.</p>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var frm = ev.target.form; //parent form
 document.getElementById('resp').innerHTML = frm['txt1'].type;
 frm['txt1'].type ='email';
});
</script>

elm.value - returns or sets the value of the 'value' attribute.

<h4>Example elm.value</h4>
Nr.: <input type='number' id='nr' value='0'><br>
<p>Every click on the button increments the value from 'nr'.</p>
<input type='button' value='Click' id='btn1'>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var elm = document.getElementById('nr');

 //value returns the value as string; Number() converts it to number
 var nr = Number(elm.value) +1;
 elm.value = nr;
});
</script>

Methods for form elements

elm.checkValidity() - returns True if 'elm' contains valid data (according to defined settings), otherwise, False.

<h4>Example elm.checkValidity()</h4>
 Nume: <input type='text' pattern='[A-z0-9]{3,}' required placeholder='Minimum 3 letters / numbers' id='txt1'>
<p> The input for Name is 'required'.<br>
 - When click on the button it checks the value returned by the checkValidity() method, and adds the value in #resp.</p>
<button id='btn1'>checkValidity</button>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var res = document.getElementById('txt1').checkValidity() ?'Correctly' :'Fill in the name, at least 3 characters, only letters and numbers';
 document.getElementById('resp').innerHTML = res;
});
</script>

elm.click() - makes click on 'elm' and emittes the 'click' event.

<h4>Example elm.click()</h4>
Name: <input type='text' id='txt1'><br>
<p>When click on the button it is performed from JavaScript click on the text box.<br>
 - The click on the text box has set to display an alert dialog box.</p>
 <input type='button' value='Click' id='btn1'>

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

//click on button
document.getElementById('btn1').addEventListener('click', (ev)=>{
 txt1.click();
});

//click on t3xt box
txt1.addEventListener('click', (ev)=>{
 alert('It performed Click on the text box');
});
</script>

elm.focus() / elm.blur()
- the focus() method focus on the input element.
- the blur() method removes focus from input.

<style>
#txt1:focus {
background: #efefa0;
font-weight: 700;
}
</style>

<h4>Example: elm.focus() / elm.blur()</h4>
<p>When the input field gets focus, it changes its css styles.</p>
Name: <input type='text' id='txt1'><br>
 <input type='button' value='Focus' id='btn1'> / <input type='button' value='Blur' id='btn2'>
<p>Click on the buttons to give /remove focus on input field.</p>

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

//butonul pt. Focus
document.getElementById('btn1').addEventListener('click', (ev)=>{
 txt1.focus();
});

//butonul pt. Blur
document.getElementById('btn2').addEventListener('click', (ev)=>{
 txt1.blur();
});
</script>

elm.select() - selects the input text in the element, and focuses it.

<h4>Example elm.select()</h4>
Description:<br>
 <textarea id='txta'>When click on the button, this text will be selected.</textarea><br>
 <input type='button' value='Select' id='btn1'>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 document.getElementById('txta').select();
});

//click-ul pe caseta de text
txt1.addEventListener('click', (ev)=>{
 alert('S-a efectuat Click pe caseta de text');
});
</script>

<<-Properties and Methods of .. -- List with JavaScript events->>

Properties and Methods of the Form elements

Javascript Course

Useful properties of the form elements

Methods for form elements

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Last accessed pages

Popular pages this month