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>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag is used in <table> to create table header cell?
<thead> <th> <td>
<table><tr>
  <th>Title 1</th>
  <th>Title 2</th>
</tr></table>
Which CSS property sets the distance between lines?
line-height word-spacing margin
.some_class {
  line-height: 150%;
}
Which function opens a new browser window.
alert() confirm() open()
document.getElementById("id_button").onclick = function(){
  window.open("http://coursesweb.net/");
}
Indicate the PHP function that returns an array with names of the files and folders inside a directory.
mkdir() scandir() readdir()
$ar_dir = scandir("dir_name");
var_export($ar_dir);
Properties and Methods of the Form elements

Last accessed pages

  1. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (42028)
  2. Output or Force Download MP3 with PHP (1174)
  3. PHP-MySQL free course, online tutorials PHP MySQL code (46636)
  4. Insert, Select and Update NULL value in MySQL (27461)
  5. Create simple Website with PHP (19664)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (566)
  2. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (487)
  3. Register and show online users and visitors (402)
  4. Get Attribute (ID, Class, Name, Title, Src) with jQuery (395)
  5. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (357)