Difference between id and name attributes in HTML

Question

What is the difference between the id and name attributes? They both seem to serve the same purpose of providing an identifier.

I would like to know (specifically with regards to HTML forms) whether or not using both is necessary or encouraged for any reasons.

Answer 1

Use name attributes for form controls (such as <input> and <select>), as that's the identifier used in the POST or GET call that happens on form submission.

Use id attributes whenever you need to address a particular HTML element with CSS, JavaScript or a fragment identifier. It's possible to look up elements by name, too, but it's simpler and more reliable to look them up by ID.

Answer 2

name is deprecated for link targets, and invalid in HTML5. It no longer works at least in latest Firefox (v13). Change <a name="hello"> to<a id="hello">

The target does not need to be an <a> tag, it can be <p id="hello"> or <h2 id="hello"> etc. which is often cleaner code.

As other posts say clearly, name is still used (needed) in forms. It is also still used in META tags.

Answer 3

If you're not using the form's own submit method to send information to a server (and are instead doing it using javascript) you can use the name attribute to attach extra information to an input - rather like pairing it with a hidden input value, but looks neater because it's incorporated into the input.

This bit does still currently work in Firefox although I suppose in the future it might not get allowed through.

You can have multiple input fields with the same name value, as long as you aren't planning to submit the old fashioned way.

Answer 4

name Vs id

name

• Name of the element. For example used by the server to identify the fields in form submits.
• Supporting elements are <button>, <form>, <fieldset>, <iframe>, <input>, <keygen>, <object>, <output>, <select>, <textarea>, <map>, <meta>, <param>
• Name does not have to be unique.

id

• Often used with CSS to style a specific element. The value of this attribute must be unique.
• Id is Global attributes, they can be used on all elements, though the attributes may have no effect on some elements.
• Must be unique in the whole document.
• This attribute's value must not contain white spaces, in contrast to the class attribute, which allows space-separated values.
• Using characters except ASCII letters and digits, '_', '-' and '.' may cause compatibility problems, as they weren't allowed in HTML 4. Though this restriction has been lifted in HTML 5, an ID should start with a letter for compatibility.

Answer 5

Id : 1) It is used to identify the HTML element through the Document Object Model (via Javascript or styled with CSS). 2) Id is expected to be unique within the page.

Name corresponds to the form element and identifies what is posted back to the server. Example :

<form action="action_page.php" id="Myform">
 First name: <input type="text" name="FirstName"><br>
 <input type="submit" value="Submit">
 </form>

 <p>The "Last name" field below is outside the form element, but still part of the form.</p>
 Last name: <input type="text" name="LastName" form="Myform">

Answer 6

Based on personal experiences and according to the W3 Schools description for attributes:

ID is a Global Attribute and applies to virtually all elements in HTML. It is used to uniquely identify elements on the Web page, and its value is mostly accessed from the frontend (typically through JavaScript or jQuery).

name is an attribute that is useful to specific elements (such as form elements, etc) in HTML. Its value is mostly sent to the backend for processing.

https://www.w3schools.com/tags/ref_attributes.asp