Re: [whatwg] readonly attribute

[Domenic Denicola]

Hi Jonathan, 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 https://github.com/whatwg/html/issues/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...  https://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 
https://html.spec.whatwg.org/multipage/semantics-other.html#selector-read-only. 
As you can see the reason  is :read-only is because it isn't considered 
an "editable" form control for these purposes---just like . Note that 
divEl.readOnly is also undefined, so this is basically consistent.

[whatwg] readonly attribute

[Jonathan Zuckerman]

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
 attribute does not apply
.

https://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...  https://jsfiddle.net/jrz/yt1c3ee7/