SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    SitePoint Guru tictike's Avatar
    Join Date
    Apr 2008
    Location
    Canada
    Posts
    863
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    form element id and name attribute

    I read somewhere that most form elements should have an id and name attribute, but now I forget the reasoning and part of me does not agree. Is that how you markup your forms?

  2. #2
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For most form controls, the name attribute is required. When a form is submitted, it is the name+value that is sent to the server. If you use id instead of name, you are not guaranteed the data will be sent, or if it is, with the proper key.

    "name" and "id" share a namespace, so if a name token is used one place, an id with the same token may not be used elsewhere.

    CSS does not address the name attribute, so the id must be used if you want to style a given element. Also, the for attribute expects the id of the referenced element. Thus id and name, with the same token on an element is quite common.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  3. #3
    SitePoint Evangelist bals28mjk's Avatar
    Join Date
    Aug 2007
    Posts
    405
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I like using the id attribute for DOM scripting and find name/value pairs useful for submitting variables to server side scripts.

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gary.turner View Post
    CSS does not address the name attribute, so the id must be used if you want to style a given element.
    Yes it does.
    Code CSS:
    input[name="foo"] {...}
    It's not supported by really old browsers (like IE6 and Netscape 4) though.
    Birnam wood is come to Dunsinane

  5. #5
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    Yes it does.
    Code CSS:
    input[name="foo"] {...}
    It's not supported by really old browsers (like IE6 and Netscape 4) though.
    Quite right. It's easy to forget what can't be used generally. Thanks MSFT. Now if IE6 would only pull the dirt in over itself.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  6. #6
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gary.turner View Post
    Now if IE6 would only pull the dirt in over itself.
    Amen!
    Birnam wood is come to Dunsinane

  7. #7
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A form control usually needs a name attributes, because only such controls are sent in the submit request.

    Text fields, password fields, checkboxes, radio buttons, file selectors, select lists and textareas normally need an id attribute as well, so that the corresponding label element can be associated with it (via its for attribute).

    Hidden fields and push buttons don't have labels and don't need an id attribute unless you want to access them with JavaScript.
    Birnam wood is come to Dunsinane


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •