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
Updated on: 2023-10-04T16:27:25+05:30

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements