HTML input - name vs id

Question

When using the HTML  lt input gt  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

User · Answer

If you are using JavaScript CSS  you must use  id  of control to apply any CSS JavaScript stuff on it   If you use name  CSS won t work for that control  As an example  if you use a JavaScript calendar attached to a textbox  you must use id of text control to assign it the JavaScript calendar

User · Answer

name is the name that is used when the value is passed  in the url or in the posted data   id is used to uniquely identify the element for CSS styling and JavaScript   The id can be used as an anchor too  In the old days   lt a name was used for that  but you should use the id for anchors too  name is only to post form data

User · Answer

An interesting case of using the same name  input elements of type checkbox like this    lt input id  fruit-1  type  checkbox  value  apple   name  myfruit    gt   lt input id  fruit-2  type  checkbox  value  orange  name  myfruit    gt    At least if the response is processed by PHP  if you check both boxes  your POST data will show    myfruit 0      apple   amp  amp   myfruit 1      orange    I don t know if that sort of array construction would happen with other server-side languages   or if the value of the name attribute is only treated as a string of characters  and it s a fluke of PHP syntax that a 0-based array gets built based on the order of the data in the POST response  which is just   myfruit         apple myfruit         orange   Can t do that kind of trick with ids  A couple of answers in What are valid values for the id attribute in HTML  appear to quote the spec for HTML 4  though they don t give a citation       ID and NAME tokens must begin with a letter   A-Za-z   and may be   followed by any number of letters  digits   0-9    hyphens   -      underscores        colons        and periods          So the characters   and   are not valid in either ids or names in HTML4  they would be okay in HTML5   But as with so many things html  just because it s not valid doesn t mean it won t work or isn t extremely useful

User · Answer

name is used for form submission in DOM  Document Object Model    ID is used to unique name of html controls in DOM specially for Javascript  amp  CSS

User · Answer

IDs must be unique    within page DOM element tree so each control is individually accessible by its id on the client side  within browser page  by  Javascript scripts loaded in the page CSS styles defined on the page   Having non-unique IDs on your page will still render your page  but it certainly won t be valid  Browsers are quite forgiving when parsing invalid HTML  but don t do that just because it seems that it works   Names are quite often unique but can be shared    within page DOM between several controls of the same type  think of radio buttons  so when data gets POSTed to server only a particular value gets sent  So when you have several radio buttons on your page  only the selected one s value gets posted back to server even though there are several related radio button controls with the same name   Addendum to sending data to server  When data gets sent to server  usually by means of HTTP POST request  all data gets sent as name-value pairs where name is the name of the input HTML control and value is its value as entered selected by the user  This is always true for non-Ajax requests  In Ajax requests name-value pairs can be independent of HTML input controls on the page  because developers can send whatever they want to the server  Quite often values are also read from input controls  but I m just trying to say that this is not necessarily the case   When names can be duplicated It may sometimes be beneficial that names are shared between controls of any form input type  But when  You didn t state what your server platform may be  but if you used something like Asp net MVC you get the benefit of automatic data validation  client and server  and also binding sent data to strong types  That means that those names have to match type property names  Now suppose you have this scenario   you have a view with a list of items of the same type user usually works with one item at a time  so they will only enter data with one item alone and send it to server  So your view s model  since it displays a list  is of type IEnumerable lt SomeType gt  but your server side only accepts one single item of type SomeType  How about name sharing then  Each item is wrapped within its own FORM element and input elements within it have the same names so when data gets to the server  from any element  it gets correctly bound to the string type expected by the controller action  This particular scenario can be seen on my Creative stories mini-site  You won t understand the language  but you can check out those multiple forms and shared names  Never mind that IDs are also duplicated  which is a rule violation  but that could be solved  It just doesn t matter in this case

User · Answer

name identifies form fields    so they can be shared by controls that stand to represent multiple possibles values for such a field  radio buttons  checkboxes   They will be submitted as keys for form values  id identifies DOM elements   so they can be targeted by CSS or Javascript      names also used to identify local anchors  but this is deprecated and  id  is a preferred way to do so nowadays

User · Answer

The id is used to uniquely identify an element in JavaScript or CSS   The name is used in form submission  When you submit a form only the fields with a name will be submitted

User · Answer

I hope you can find the following brief example helpful    lt  DOCTYPE html gt   lt html gt   lt head gt     lt script gt      function checkGender          if document getElementById  male   checked             alert  Selected gender    document getElementById  male   value         else if document getElementById  female   checked             alert  Selected gender    document getElementById  female   value                else           alert  Please choose your gender                    lt  script gt   lt  head gt   lt body gt   lt h1 gt Select your gender  lt  h1 gt    lt form gt     lt input type  radio  id  male  name  gender  value  male  gt Male lt br gt     lt input type  radio  id  female  name  gender  value  female  gt Female lt br gt     lt button onclick  checkGender    gt Check gender lt  button gt    lt  form gt    lt  body gt   lt  html gt    In the code  note that both  name  attributes are the same to define optionality between  male  or  female   but the  id s are not equals to differentiate them

User · Answer

The name attribute on an input is used by its parent HTML  lt form gt s to include that element as a member of the HTTP form in a POST request or the query string in a GET request   The id should be unique as it should be used by JavaScript to select the element in the DOM for manipulation and used in CSS selectors

User · Answer

The name definies what the name of the attribute will be as soon as the form is submitted  So if you want to read this attribute later you will find it under the  name  in the POST or GET Request   Whereas the id is used to adress a field or element in javascript or css

User · Answer

In HTML4 01   Name Attribute   Valid only on  lt a gt    lt form gt    lt iframe gt    lt img gt    lt map gt    lt input gt    lt select gt    lt textarea gt  Name does not have to be unique  and can be used to group elements together such as radio buttons  amp  checkboxes Can not be referenced in URL  although as JavaScript and PHP can see the URL there are workarounds Is referenced in JS with getElementsByName   Shares the same namespace as the id attribute Must begin with a letter According to specs 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  lt base gt    lt html gt    lt head gt    lt meta gt    lt param gt    lt script gt    lt style gt    lt title gt  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 JS with getElementById    and jQuery by     lt id gt   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  lt form gt  anymore 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

User · Answer

Adding some actual references to W3 docs that authoritatively explain the role of the  name  attribute on form elements    For what it s worth  I arrived here while exploring exactly how Stripe js works to implement safe interaction with payment gateway Stripe  In particular  what causes a form input element to get submitted back to the server  or prevents it from being submitted    The following W3 docs are relevent   HTML 4   https   www w3 org TR html401 interact forms html control-name  Section 17 2 Controls  HTML 5   https   www w3 org TR html5 forms html form-submission-0 and  https   www w3 org TR html5 forms html constructing-the-form-data-set  Section 4 10 22 4 Constructing the form data set   As explained therein  an input element will be submitted by the browser if and only if it has a valid  name  attribute    As others have noted  the  id  attribute uniquely identifies DOM elements  but is not involved in normal form submission   Though  id  or other attributes can of course be used by javascript to obtain form values  which javascript could then use for AJAX submissions and so on    One oddity regarding previous answers commenters concern about id s values  and name s values being in the same namespace  So far as I can tell from the specs  this applied to some deprecated uses of the name attribute  not on form elements    For example https   www w3 org TR html5 obsolete html       Authors should not specify the name attribute on a elements  If the attribute is present  its value must not be the empty string and must neither be equal to the value of any of the IDs in the element s home subtree other than the element s own ID  if any  nor be equal to the value of any of the other name attributes on a elements in the element s home subtree  If this attribute is present and the element has an ID  then the attribute s value must be equal to the element s ID  In earlier versions of the language  this attribute was intended as a way to specify possible targets for fragment identifiers in URLs  The id attribute should be used instead     Clearly in this special case there s some overlap between id and name values for  a  tags  But this seems to be a peculiarity of processing for fragment ids  not due to general sharing of namespace of ids and names

User · Answer

the name attribute is used for posting to e g  a webserver  The id is primarily used for css  and javascript   Suppose you have this setup    lt input id  message id  name  message name  type  text    gt    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    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 radiobuttons  Name is then used to group your radiobuttons  so you can only select one of those options    lt input id  button 1  type  radio  name  option    gt   lt input id  button 2  type  radio  name  option    gt    And in this very specific case  I can further say how id is used  because you will probably want a label with your radiobutton  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   Example can be found below   lt input id  button 1  type  radio  name  option    gt  lt label for  button 1  gt Text for button 1 lt  label gt   lt input id  button 2  type  radio  name  option    gt  lt label for  button 2  gt Text for button 2 lt  label gt

[html] HTML input - name vs. id

Examples related to html

Examples related to html-input