What’s the difference between disabled=”disabled” and readonly=”readonly” for HTML form input fields?

by

A readonly element is just not editable, but gets sent when the according form submits. A disabled element isn’t editable and isn’t sent on submit. Another difference is that readonly elements can be focused (and getting focused when “tabbing” through a form) while disabled elements can’t.

Read more about this in this great article or the definition by w3c. To quote the important part:

Key Differences

The Disabled attribute

  • Values for disabled form elements are not passed to the processor method. The W3C calls this a successful element.(This works similar to
    form check boxes that are not checked.)
  • Some browsers may override or provide default styling for disabled form elements. (Gray out or emboss text) Internet Explorer
    5.5 is particularly nasty about this.
  • Disabled form elements do not receive focus.
  • Disabled form elements are skipped in tabbing navigation.

The Read Only Attribute

  • Not all form elements have a readonly attribute. Most notable, the <SELECT> , <OPTION> , and <BUTTON> elements do not have readonly
    attributes (although they both have disabled attributes)
  • Browsers provide no default overridden visual feedback that the form element is read only. (This can be a problem… see below.)
  • Form elements with the readonly attribute set will get passed to the form processor.
  • Read only form elements can receive the focus
  • Read only form elements are included in tabbed navigation.

More Related Contents:

  1. Why does my design elements look different in all browsers? UPDATE [closed]
  2. Menu does not align correctly in Safari
  3. CSS technique for a horizontal line with words in the middle
  4. File input ‘accept’ attribute – is it useful?
  5. css ‘pointer-events’ property alternative for IE
  6. Browsers’ default CSS for HTML elements
  7. How to align checkboxes and their labels consistently cross-browsers
  8. What are all the valid self-closing elements in XHTML (as implemented by the major browsers)?
  9. Style input type file? [duplicate]
  10. How can I draw vertical text with CSS cross-browser?
  11. Remove white space above and below large text in an inline-block element
  12. Cross-browser custom styling for file upload button [duplicate]
  13. Flexbox and Internet Explorer 11 (display:flex in ?)
  14. Button inside of anchor link works in Firefox but not in Internet Explorer?
  15. Should PUT and DELETE be used in forms?
  16. Flexbox alternative for IE9
  17. local (file://) website favicon works in Firefox, not in Chrome or Safari- why?
  18. Is cross-origin postMessage broken in IE10?
  19. Setting a width and height on an A tag
  20. Image scaling causes poor quality in firefox/internet explorer but not chrome
  21. Fallback for CSS attributes without unit
  22. Should the HTML Anchor Tag Honor the Disabled Attribute?
  23. Anchor tags not working in chrome when using #
  24. Extra space under textarea, differs along browsers
  25. Cross-browser link to file on local system
  26. Which versions of IE support PNG favicons?
  27. Zoom changes the design layout
  28. How to make input autofocus in internet explorer?
  29. Cross browser method to fit a child div to its parent’s width
  30. IE Compatibility Mode: ‘X-UA-Compatible’ tag ‘Edge’

Leave a Comment