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

See this http://mindprod.com/jgloss/htmlforms.html#IDVSNAME

What’s the difference? The short answer is, use both and don’t worry about it. But if you want to understand this goofiness, here’s the skinny:

id= is for use as a target like this: <some-element id="XXX"></some-element> for links like this: <a href="#XXX".

name= is also used to label the fields in the message send to a server with an HTTP (HyperText Transfer Protocol) GET or POST when you hit submit in a form.

id= labels the fields for use by JavaScript and Java DOM (Document Object Model). The names in name= must be unique within a form. The names in id= must be unique within the entire document.

Sometimes the the name= and id= names will differ, because the server is expecting the same name from various forms in the same document or various radio buttons in the same form as in the example above. The id= must be unique; the name= must not be.

JavaScript needed unique names, but there were too many documents already out here without unique name= names, so the W3 people invented the id tag that was required to be unique. Unfortunately older browsers did not understand it. So you need both naming schemes in your forms.

NOTE: attribute "name" for some tags like <a> is not supported in HTML5.

Answer 2

The way I think about it and use it is simple:

id is used for CSS and JavaScript/jQuery (has to be unique in a page)

name is used for form handling in PHP when a form is submitted via HTML (has to be unique in a form - to some extent, see Paul's comment below)

Answer 3

ID i used to uniquely identify an element.

Name is used in forms. when even u submit a form. and if you dont give any name, nothing will will be submitted. And the ones only with name attribute will go out.

Answer 4

The ID of a form input element has nothing to do with the data contained within the element. IDs are for hooking the element with JavaScript and CSS. The name attribute, however, is used in the HTTP request sent by your browser to the server as a variable name associated with the data contained in the value attribute.

For instance:

<form>
    <input type="text" name="user" value="bob">
    <input type="password" name="password" value="abcd1234">
</form>

When the form is submitted, the form data will be included in the HTTP header like this:

If you add an ID attribute, it will not change anything in the HTTP header. It will just make it easier to hook it with CSS and JavaScript.

Answer 5

Below is an interesting use of the id attribute. It is used within the tag and used to identify the form for elements outside of the boundaries so that they will be included with the other fields within the form.

 <form action="action_page.php" id="form1">
 First name: <input type="text" name="fname"><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="lname" form="form1">