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
What is the difference between id and name attributes in HTML?
The id and name attributes in HTML serve different purposes. The id attribute uniquely identifies an element for CSS styling and JavaScript manipulation on the client side, while the name attribute identifies form data sent to the server as name-value pairs in the HTTP request.
Syntax
Following is the syntax for using the id attribute −
<tag id="uniqueId">Content</tag>
Following is the syntax for using the name attribute −
<input type="text" name="fieldName" value="data">
The id must be unique within the document, while the name can be shared across multiple elements (e.g., radio buttons in the same group).
ID Attribute
The ID attribute is a unique identifier for an HTML element. It has nothing to do with the data contained within the element. It is used for hooking the element with JavaScript and CSS. By using the id attribute, we can validate and manipulate the value of an element on the client side.
In JavaScript, we can get the value of an input element using the id attribute −
document.getElementById("id").value;
In CSS, the ID attribute is referenced with the # character −
#id {
color: red;
}
The ID attribute is case sensitive, must begin with a letter, and can be used as an anchor reference in URLs (e.g., page.html#sectionId).
Example
Following example demonstrates the usage of the ID attribute with CSS styling −
<!DOCTYPE html>
<html>
<head>
<title>ID Attribute Example</title>
<style>
#myId {
background-color: yellow;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<h1 id="myId">TutorialsPoint</h1>
</body>
</html>
The output displays "TutorialsPoint" centered with black text on a yellow background −
TutorialsPoint (centered, black text, yellow background)
Name Attribute
The name attribute is used in the HTTP request sent by the browser to the server as a variable name associated with the data in the value attribute. Using the name attribute, we can validate and manipulate element values on the server side.
On the server side, we can retrieve the value using the name attribute (Java example) −
request.getParameter("name");
In JavaScript, the name attribute is referenced with −
document.getElementsByName("name");
The name attribute is also case sensitive and begins with a letter, but unlike id, it is not required to be unique. The name attribute cannot be used as a CSS selector.
Usage of Name Attribute
The name attribute is used across several HTML elements −
-
In a
<form>element, it is used as a reference when submitting data to the server. -
In
<iframe>, it provides a target name for links. -
In
<map>, it associates the map with an image via theusemapattribute. -
In
<meta>, it specifies metadata type likedescriptionorkeywords.
Example − Name Attribute in Form Buttons
Following example shows the usage of the name attribute with submit buttons −
<!DOCTYPE html>
<html>
<head>
<title>Name Attribute - Buttons</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<p>Select the course:</p>
<form action="/action_page.php" method="get">
<button name="course" type="submit" value="HTML">HTML</button>
<button name="course" type="submit" value="JavaScript">JavaScript</button>
<button name="course" type="submit" value="CSS">CSS</button>
</form>
</body>
</html>
Each button shares the same name="course" but submits a different value. The server receives course=HTML, course=JavaScript, or course=CSS depending on which button is clicked.
Example − Name Attribute in Select Dropdown
Following example demonstrates the name attribute with a dropdown list −
<!DOCTYPE html>
<html>
<head>
<title>Name Attribute - Select</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Select a Course</h2>
<form action="/action_page.php">
<label for="course">Choose a course:</label>
<select name="course" id="course">
<option value="html">HTML5</option>
<option value="css">CSS</option>
<option value="java">JAVA</option>
<option value="oracle">ORACLE</option>
</select>
<input type="submit" value="Submit">
</form>
</body>
</html>
The dropdown shows a list of courses. On submission, the server receives course=html (or whichever option is selected) as a name-value pair.
ID and Name Used Together
In practice, form elements often use both id and name. The id is used for JavaScript access and CSS styling, while the name is used for server-side form submission.
Example
Following example shows both attributes working together −
<!DOCTYPE html>
<html>
<head>
<title>ID and Name Together</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<form action="/submit.php" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="user_name" value="admin">
<button type="button" onclick="showValue()">Show Value</button>
<p id="output"></p>
</form>
<script>
function showValue() {
var val = document.getElementById("username").value;
document.getElementById("output").textContent = "Value: " + val;
}
</script>
</body>
</html>
Here, JavaScript uses id="username" to read the input value on the client side, while the server will receive user_name=admin as the form data through the name attribute.
Username: admin [Show Value] (Clicking the button displays: Value: admin)
Differences Between ID and Name Attributes
Following are the key differences between the ID and Name attributes −
| ID Attribute | Name Attribute |
|---|---|
| Must be unique within the HTML document. | Does not need to be unique; multiple elements can share the same name. |
| Used as a general identifier for any HTML element. | Used as an identifier for name-value pairs in form submissions. |
Can be used with both CSS (#id) and JavaScript. |
Can be used with JavaScript only; not applicable to CSS selectors. |
| No correspondence to the data inside the element. | Directly associated with the data contained in the element's value. |
Accessed via document.getElementById("id"). |
Accessed via document.getElementsByName("name"). |
| A global attribute; can be applied to any HTML element. | Applicable mainly to form elements, iframes, maps, and meta tags. |
| Can be used as an anchor reference in URLs. | Cannot be used as an anchor reference. |
Conclusion
The id attribute is a unique, client-side identifier used for CSS styling, JavaScript manipulation, and anchor linking. The name attribute is used primarily for submitting form data to the server and does not need to be unique.
3K+ Views
