valid order for attributes of input type tag

by

Already been answered, but my full and expanded answer is:

  • There is no predefined order for the attributes in terms of passing w3c validation… it’s completely up to you.

However, you should introduce your own standard and stick to it.

If there are multiple coders working on the application they should all stick to the same standard.

If you are a team leader, web-dev business owner, manager, etc, it is your responsibility to encourage (and enforce) a culture that uses this standard.

When doing code reviews the attribute order should be checked, and anything that fails you should make the coder responsible fix it up… they’ll only muck it up once or twice if they know they’ll have to rewrite their code!!!

And why all this fuss and bother over attribute order?

  • This will increase code development and debugging speed.
  • It makes code more readable
  • It encourages the coders (or you) to pay attention to the little details
  • It helps to fosters an environment of “accountability for your own code”

My personal preference is:

  1. type (so you can instantly see what it is)
  2. id
  3. class (I like to keep 2 and 3 together as they are the most common js/jQuery selectors)
  4. name
  5. value (I like to keep 4 and 5 next to each other so you can quickly reference what input it is and it’s value).
  6. All others (like checked, max-size, etc)
  7. style
  8. tabindex (I like 7 and 8 to be at the end as it’s “non-relevant”, in terms of the actual functionality, they are more styling/usability stuff, keep ’em out of the way!

More Related Contents:

  1. Can't get footer image to display in IE8?
  2. How to change the color of text?
  3. How do I create a text box in HTML? [closed]
  4. Absolute vs relative URLs
  5. How to display Base64 images in HTML
  6. Mobile Redirect using htaccess
  7. What is the difference between HTML div and span elements?
  8. How to force child div to be 100% of parent div’s height without specifying parent’s height?
  9. How to customize ?
  10. Why does HTML require that multiple spaces show up as a single space in the browser?
  11. Unwanted margin in inline-block list items [duplicate]
  12. Background image not showing in Safari
  13. How to vertically align into the center of the content of a div with defined width/height?
  14. Is well formed without a ?
  15. How to make an element’s background-color a little darker using CSS
  16. Allow specific tag to override overflow:hidden
  17. Play sound file in a web-page in the background
  18. HTML combo box with option to type an entry
  19. mailto link multiple body lines
  20. Restrict future dates in HTML5 date input
  21. Can I nest button inside another button?
  22. Markup for postal addresses
  23. How to add border to a container with transparent gaps in between
  24. HTML float right element order
  25. Add text above HTML5 Video
  26. Text-align class for inside a table
  27. Why can’t a element contain a ?
  28. Force iframe YouTube video to center fit and full cover the screen in the background using HTML5 CSS3
  29. Should I use s and s inside my s?
  30. How to float a div over Google Maps?

Leave a Comment