How to Access HTML Form Elements in JavaScript

 21 - Jan - 2022
 XpertPhp
 28

In this tutorial, we will explain to you how to access HTML form elements in JavaScript. we can easily get HTML form elements value using javascript. Example

<!DOCTYPE html>
<html>
<head>
  <title>How to Access HTML Form Elements in JavaScript</title>
  <script type="text/javascript">
  function send(){
    var name    = document.forms[0].elements[0].value;
    console.log(name);
    var email   = document.forms[0].elements[1].value;
    console.log(email);
    var message = document.forms[0].elements[2].value;
    console.log(message);
    }
  </script>
</head>
<body>
  <form>
    Enter your name:
    <input type="text" name="name"> <br> <br>
    Enter your Email: 
    <input type="email" name="email"> <br> <br>
    Enter Your Message: 
    <input type="text" name="message"> <br> <br>
    <input type="button" name="submit" value="send" onclick="send()" />
  </form>  
</body>
</html>
Output
w3snippets
w3@gmail.com
hi how are you