Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to find the name and the target of a form in JavaScript?
In JavaScript, you can access the name and target attributes of HTML forms using DOM properties. These attributes help identify forms and control where form submissions open.
The name attribute provides a unique identifier for the form, while the target attribute specifies where to display the response after form submission. Common target values include _self (same window), _blank (new window), _parent, and _top.
Syntax
To access form properties, use the following syntax:
// Get form name
document.getElementById('formId').name;
// Get form target
document.getElementById('formId').target;
Example 1: Getting Form Name
This example demonstrates how to retrieve the name attribute of a form:
<!DOCTYPE html>
<html>
<head>
<title>Form Name Example</title>
</head>
<body>
<div style="text-align: center">
<form id="myForm" name="Login Form" action="/action_page.php" target="_self">
First name: <input type="text" name="fname"><br><br>
Last name: <input type="text" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
<p id="result"></p>
</div>
<script>
document.getElementById('result').innerHTML = 'Name of the form: ' + document.getElementById('myForm').name;
</script>
</body>
</html>
Name of the form: Login Form
Example 2: Getting Form Target (_self)
This example shows how to access the target attribute when set to _self:
<!DOCTYPE html>
<html>
<head>
<title>Form Target Example</title>
</head>
<body>
<div style="text-align: center">
<form id="myForm" name="Registration Form" action="/action_page.php" target="_self">
Email: <input type="email" name="email"><br><br>
Password: <input type="password" name="password"><br><br>
<input type="submit" value="Register">
</form>
<p id="result"></p>
</div>
<script>
document.getElementById('result').innerHTML = 'Target of the form: ' + document.getElementById('myForm').target;
</script>
</body>
</html>
Target of the form: _self
Example 3: Getting Both Name and Target (_blank)
This example retrieves both the name and target attributes, with target set to _blank:
<!DOCTYPE html>
<html>
<head>
<title>Form Name and Target Example</title>
</head>
<body>
<div style="text-align: center">
<form id="myForm" name="Student Login Form" action="/action_page.php" target="_blank">
Username: <input type="text" name="username"><br><br>
Student ID: <input type="text" name="studentId"><br><br>
<input type="submit" value="Login">
</form>
<p id="result"></p>
</div>
<script>
const form = document.getElementById('myForm');
document.getElementById('result').innerHTML =
'Form Name: ' + form.name + '<br>' +
'Form Target: ' + form.target;
</script>
</body>
</html>
Form Name: Student Login Form Form Target: _blank
Target Attribute Values
| Target Value | Description |
|---|---|
_self |
Opens in the same window/tab (default) |
_blank |
Opens in a new window/tab |
_parent |
Opens in the parent frame |
_top |
Opens in the full body of the window |
Conclusion
Use document.getElementById().name and document.getElementById().target to access form attributes. These properties are essential for form validation and controlling submission behavior in web applications.
1K+ Views
