name vs. id

 

当使用HTML <input>标记时，使用name和id属性有什么区别，特别是我发现它们有时被命名为相同？

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 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 <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 JS 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> 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.

    the name attribute is used for posting to eg a webserver. 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. 

    #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. 

    <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 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 

    <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>

    And I guess that's about it.

    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<SomeType> 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 ID s are also duplicated (which is a rule violation) but that could be solved. It just doesn't matter in this case.

    链接地址: http://www.djcxy.com/p/15462.html

    上一篇: JavaScript的getElementById（）和getElementsByName（）函数有什么区别？

    下一篇: 名称与ID