Copyright

Using JavaScript to Return Elements from HTML Forms

Instructor: Alexis Kypridemos

Alexis is a technical writer for an IT company and has worked in publishing as a writer, editor and web designer. He has a BA in Communication.

In this lesson we'll explain how to use JavaScript to identify HTML form elements, as well as get the values the user enters and store them in variables.

JavaScript and HTML Form Elements

We can use JavaScript to work with HTML form elements and the values that users input into those elements. Before we can work with the data provided by the user, we first need to identify the form elements in the code. The following example demonstrates a few ways to do this:

<!DOCTYPE html>
<body>
<form onsubmit = "return getData()">
<label>Please enter your login credentials:</label>
<br/>
Username:<br/>
<input type = "text"><br/>
Email:<br/>
<input type = "text" id = "email"><br/>
Password:<br/>
<input type = "password" name = "password"><br/>
<br/>
<input type = "submit">
</form>
<script>
function getData(){
var username = document.getElementsByTagName("input")[0];
var email = document.getElementById("email");
var password = document.forms[0].password;
window.alert(password.value);
}
</script>
</body>
</html>

Identifying Form Elements

In this example we've got an HTML form with three inputs and each one has different properties and different ways they can be identified.

By Tag Name

The first input is a simple text input with no additional identifiers: <input type = "text">.

To identify this particular element in JavaScript, we have no other option but to use its element tag, <input>, and the order with which it appears on the page. In this case, this input is the first so we get it with this line of code:

var username = document.getElementsByTagName("input")[0];

We use the document.getElementsByTagName() method, and specify the tag name we're looking for which is "input". Additionally, we add the [0] ordinal, to specify that we're looking for the first such item in the document. Remember, JavaScript starts counting from 0, not 1. This line of code also assigns the form element to the variable username. More details about this later in the lesson.

By ID

The second input element is again a text input, but it also has an ID: <input type = "text" id = "email">.

Because of the ID, we can use this method in the code: document.getElementById("email"), specifying the element's ID as the method's argument (email). The document.getElementById() method works only for elements that have been assigned an ID.

By Name

Finally, the last input element, a password input, has a name attribute instead of an ID: <input type = "password" name = "password">. Again we could use the document.getElementsByTagName("input") method, and change the ordinal to [2], but to make things interesting, we used this method instead:

document.forms[0].password

What we've done here is use the forms document attribute. We used the [0] ordinal again to specify that we're talking about the first form in the document. This is necessary even though there is only one form. Then we specified the input by including its name after the forms attribute.

To unlock this lesson you must be a Study.com Member.
Create your account

Register to view this lesson

Are you a student or a teacher?

Unlock Your Education

See for yourself why 30 million people use Study.com

Become a Study.com member and start learning now.
Become a Member  Back
What teachers are saying about Study.com
Try it risk-free for 30 days

Earning College Credit

Did you know… We have over 160 college courses that prepare you to earn credit by exam that is accepted by over 1,500 colleges and universities. You can test out of the first two years of college and save thousands off your degree. Anyone can earn credit-by-exam regardless of age or education level.

To learn more, visit our Earning Credit Page

Transferring credit to the school of your choice

Not sure what college you want to attend yet? Study.com has thousands of articles about every imaginable degree, area of study and career path that can help you find the school that's right for you.

Create an account to start this course today
Try it risk-free for 30 days!
Create An Account
Support