readonly attribute

# Jonathan Zuckerman (7 days ago)

I have a question about this section in the spec:

Only text controls can be made read-only, since for other controls (such as checkboxes and buttons) there is no useful distinction between being read-only and being disabled, so the readonly html.spec.whatwg.org/#attr-input-readonly attribute does not apply html.spec.whatwg.org/#do-not-apply.

html.spec.whatwg.org/#the-readonly-attribute

This doesn't quite jive with my understanding of the distinction between readonly and disabled - to me, "readonly" and "disabled" controls can both not be edited by the user, but "readonly" means that the value will be included in the payload when the form is submitted, whereas "disabled" means that the value will not be included. It seems like this distinction does apply to button, checkbox, and select as well as for input.

I discovered this while working on set of forms to POST and PATCH entities, The designs call for me to pre-set certain attributes in the POST form and not allow the user to edit them, but they should still be sent in the request (readonly), and to display them in the PATCH form (helps provide context) but not to send them in the request (disabled). I could solve this other ways (using hidden inputs, creating elements that look like inputs but are not actually, or displaying the context in some other way without including those fields in the form), but I'm just wondering - is the documentation unclear/incorrect, or am I misunderstanding something?

One other related question - it seems like select inputs are always matched by the :read-only selector in CSS, but the readOnly property in Javascript is always undefined - the inconsistency there makes me think that something is not right... jsfiddle.net/jrz/yt1c3ee7

Contact us to advertise here
# Domenic Denicola (2 days ago)

sorry for the delay in responding here.

This doesn't quite jive with my understanding of the distinction between readonly and disabled - to me, "readonly" and "disabled" controls can both not be edited by the user, but "readonly" means that the value will be included in the payload when the form is submitted, whereas "disabled" means that the value will not be included. It seems like this distinction does apply to button, checkbox, and select as well as for input.

It's true that there is also an impact on form submission. This was discussed somewhat recently in whatwg/html#2311. Perhaps the section you quoted should be updated to also point this out, and discuss the tradeoffs we go through in that thread.

One other related question - it seems like select inputs are always matched by the :read-only selector in CSS, but the readOnly property in Javascript is always undefined - the inconsistency there makes me think that something is not right... jsfiddle.net/jrz/yt1c3ee7

Yeah, unfortunately :read-only in CSS is only vaguely connected to the readonly="" attribute. It's more about "is it not possible to edit this?" You can find its full definition at html.spec.whatwg.org/multipage/semantics-other.html#selector-read-only. As you can see the reason <select> is :read-only is because it isn't considered an "editable" form control for these purposes---just like <div>. Note that divEl.readOnly is also undefined, so this is basically consistent.

Want more features?

Request early access to our private beta of readable email premium.