Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML input - name vs. id [duplicate]

When using the HTML <input> tag, what is the difference between the use of the name and id attributes especially that I found that they are sometimes named the same?

like image 941
Simplicity Avatar asked Sep 19 '11 11:09

Simplicity


People also ask

Is name and id same in HTML?

Even though you can technically use the name to look out for CSS stylesheets or JavaScript elements, the ID is meant for it. The former is associated with the form element and is better to identify what is sent to the server. So using the same word for both the HTML name and ID attributes is not a “problem” as such.

Should input names be unique?

Yes, it validates (with surrounding body, doctype, etc added). No warnings re the duplicate names.

What is the difference between id and name attribute?

The name attribute is for submitting a form element to the server; many elements may share the same name (e.g. radio buttons, which must have the same name within the set). The id attribute is for uniquely identifying any element (not just form elements). It must be unique throughout the entire document.

What is difference between id name and value in HTML?

The id attribute specifies a unique id for an HTML element. The value of the id attribute must be unique within the HTML document. The id attribute is used to point to a specific style declaration in a style sheet.


2 Answers

In HTML4.01:

Name Attribute

  • Valid only on <a>, <form>, <iframe>, <img>, <map>, <input>, <select>, <textarea>
  • Name does not have to be unique, and can be used to group elements together such as radio buttons & checkboxes
  • Can not be referenced in URL, although as JavaScript and PHP can see the URL there are workarounds
  • Is referenced in JavaScript with getElementsByName()
  • Shares the same namespace as the id attribute
  • Must begin with a letter
  • According to specifications is case sensitive, but most modern browsers don't seem to follow this
  • Used on form elements to submit information. Only input tags with a name attribute are submitted to the server

Id Attribute

  • Valid on any element except <base>, <html>, <head>, <meta>, <param>, <script>, <style>, <title>
  • Each Id should be unique in the page as rendered in the browser, which may or may not be all in the same file
  • Can be used as anchor reference in URL
  • Is referenced in CSS or URL with # sign
  • Is referenced in JavaScript with getElementById(), and jQuery by $(#<id>)
  • Shares same name space as name attribute
  • Must contain at least one character
  • Must begin with a letter
  • Must not contain anything other than letters, numbers, underscores (_), dashes (-), colons (:), or periods (.)
  • Is case insensitive

In (X)HTML5, everything is the same, except:

Name Attribute

  • Not valid on <form> any more
  • XHTML says it must be all lowercase, but most browsers don't follow that

Id Attribute

  • Valid on any element
  • XHTML says it must be all lowercase, but most browsers don't follow that

This question was written when HTML4.01 was the norm, and many browsers and features were different from today.

like image 93
Kumar Akarsh Avatar answered Oct 16 '22 09:10

Kumar Akarsh


The name attribute is used for posting to e.g. a web server. The id is primarily used for CSS (and JavaScript). Suppose you have this setup:

<input id="message_id" name="message_name" type="text" /> 

In order to get the value with PHP when posting your form, it will use the name attribute, like this:

$_POST["message_name"]; 

The id is used for styling, as said before, for when you want to use specific CSS content.

#message_id {     background-color: #cccccc; } 

Of course, you can use the same denomination for your id and name attribute. These two will not interfere with each other.

Also, name can be used for more items, like when you are using radio buttons. Name is then used to group your radio buttons, so you can only select one of those options.

<input id="button_1" type="radio" name="option" /> <input id="button_2" type="radio" name="option" /> 

And in this very specific case, I can further say how id is used, because you will probably want a label with your radio button. Label has a for attribute, which uses the id of your input to link this label to your input (when you click the label, the button is checked). An example can be found below

<input id="button_1" type="radio" name="option" /><label for="button_1">Text for button 1</label> <input id="button_2" type="radio" name="option" /><label for="button_2">Text for button 2</label> 
like image 38
Michiel Standaert Avatar answered Oct 16 '22 09:10

Michiel Standaert