Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
What is the difference between id and name attributes in HTML?
ID attribute
ID is an input form element, and it has nothing to do with data contained within the element. Input element ids are for hooking the element with JavaScript and CSS. By using id attribute, we can validate and manipulate the value of an element at client side.
In java script, using id attribute we can get the value of input element.
document.getElementById("id").value;
In CSS, ID attribute is referenced with # character.
#id
If we consider HTML elements, the ID attribute is unique identifier, it is a case sensitive and begins with a letter, In URL ID attribute can use as an anchor reference.
Example
Following is the example, demonstrating the usage of ID attribute −
<!DOCTYPE html>
<html>
<head>
<style>
#myId {
background-color: yellow;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<h1 id="myId">TutorialsPoint</h1>
</body>
</html>
When we run the above program, output is displayed as Tutorialspoint text in center with black color text and yellow background color.
Name Attribute
The name attribute is used in the HTTP request which is sent by browser to the server as a variable name associated with the data contained in the value attribute. Using name attribute, we can validate and manipulate the value of an element at server side.
In server side, using name attribute we can get the value of input element.
request.getParameter("name");
Name attribute is also case sensitive and begins with letter but name attribute is not Unique.
In java script, name attribute is referenced with,
getElementsByName();
In CSS, the name attribute cannot be referenced.
Usage of Name attribute in HTML
In a <form> element, the name attribute is used as a reference to submit data.
Example
Below example shows the usage of Name attribute in form tag −
<form action="action.php" method="get"> Select the course: <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>
Example
Below example shows the usage of Name attribute in iframe tag.
In an <iframe> element, the name attribute is used to target a form submission.
<iframe src=”sample.html name=”iframe1”></iframe> <a href=https://www.tutorialspoint.com/index.htm target=”iframe1”> TutrialsPoint.com </a>
Example
Following example shows the usage of Name attribute in map element.
In a <meta> element, the name attribute indicates a name for value of the content.
<img src=”Flower.jpg” height=”120” width=”140” alt=”Flower” usemap=”#flowermap”> <map name=”flowermap”> <area shape=”circle” cords=”120,54,8” href=”rose.htm” alt=”Rose”> </map>
Example
Following example shows the usage of Name attribute in meta element. In a <meta> element, the name attribute indicates a name for value of the content.
<head> <meta name=”desc” content =”Tutorials”> <meta name=”keywords” content=”CSS, JavaScript”> </head>
Example
Following example, demonstrates the usage of Name attribute −
<!DOCTYPE html>
<html>
<body>
<h1>Select Name attribute</h1>
<p>The name attribute mention the names of course in drop down list:</p>
<form action="page1.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>
<br>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
When we run the above program, name attribute with drop down list of courses options are displayed. And the button labelled as submit is observed to submit the information entered.
Differences between ID and Name attributes in HTML
Following are few differences which are explained between ID and Name attribute −
ID Attribute |
Name Attribute |
|---|---|
ID attribute is a unique within the HTML |
Name attribute is not unique |
It is called as identifier of overall HTML element |
With in the HTML, it is called as identifier of name-value pairs. |
ID attributes can apply to CSS stylesheet and JavaScript |
Name attribute can use in JavaScript only, it is not applicable to CSS |
Within the element no correspondence to data |
Within the element there is a correspondence to data |
ID performance is greater when compare to Name attribute |
Name attribute performance is less when compared to ID attribute |
In JavaScript ID attribute used as document.getElementById("id").value; |
In JavaScript Name attribute is referenced as getElementsByName(); |
ID is a Global attribute access from frontend |
Name is a local attribute inserted at the time of backend coding |
1K+ Views
