There are many types of HTML form elements for different types of data that can be added or selected by the user.
- See the HTML tutorials: Forms and Input, and New Form elements and attributes in HTML5.
There are several ways to access elements of a <form> in JavaScript.
Generally, these methods are used: getElementById()
, querySelector()
, the syntax: eform['elm_name']
, or the eform.elements[index]
property.
<h4>Accesses the input by ID</h4> <form action='#' method='post'> Text: <input type='text' value='some-val' id='txt1'/> </form> <p>If you click the following button, accesses the text field by ID, and displays its 'value'.</p> <button id='btn1'>Click</button> <blockquote id='resp'>#resp</blockquote> <script> document.getElementById('btn1').addEventListener('click', (ev)=>{ var ftxt = document.getElementById('txt1'); document.getElementById('resp').innerHTML = ftxt.value; }); </script>
<h4>Accesses the input by name</h4> <form id='frm1' action='#' method='post'> Text: <input type='text' value='some-val' name='txt1'/> </form> <p>If you click the following button, accesses the text field by its 'name', and displays its 'value'.</p> <button id='btn1'>Click</button> <blockquote id='resp'>#resp</blockquote> <script> document.getElementById('btn1').addEventListener('click', (ev)=>{ var frm1 = document.getElementById('frm1'); document.getElementById('resp').innerHTML = frm1['txt1'].value; }); </script>
If there are multiple forms fields with the same 'class' in the specified form, the querySelector() method will return the first field with that class.
- Example, accesses an input <form> field using its css 'class' and displays its 'value'.<h4>Accesses the input by class</h4> <form id='frm1' action='#' method='post'> Text: <input type='text' value='some-val' class='ftxt'/> </form> <p>If you click the following button, it accesses a form field by css class, and displays its 'value'.</p> <button id='btn1'>Click</button> <blockquote id='resp'>#resp</blockquote> <script> document.getElementById('btn1').addEventListener('click', (ev)=>{ var ftxt = document.querySelector('#frm1 .ftxt'); document.getElementById('resp').innerHTML = ftxt.value; }); </script>
<h4>Accesses input by its index order</h4> <form id='frm1' action='#' method='post'> Check: <input type='checkbox' value='some-val'/><br> Text: <input type='text' value='txt-val'/> </form> <p>If you click the following button, it accesses the first form field, and shows its 'type'.</p> <button id='btn1'>Click</button> <blockquote id='resp'>#resp</blockquote> <script> document.getElementById('btn1').addEventListener('click', (ev)=>{ var ftxt = document.getElementById('frm1'); document.getElementById('resp').innerHTML = ftxt[0].type; }); </script>
Forms elements have specific properties and methods that can be used in JavaScript to interact with the user.
- There is a list with useful properties and methods of the elements from <form> at the page:
coursesweb.net/javascript/properties-methods-form-elements
<img src="image.jpg" usemap="#map1"> <map name="map1"> <area shape="rect" coords="9, 120, 56, 149" href="#"> <area shape="rect" coords="100, 200, 156, 249" href="#"> </map>
#id { overflow: auto; }
document.getElementById("id").onmouseover = function(){ document.write("Have Good Life"); }
if(isset($_GET["id"])) { echo $_GET["id"]; }