Html: Form disabled attribute to disable the form submission

[caub]

<form id="form">
  <input name="foo">
  <input name="sb" type="submit">
</form>

Currently, it's already possible to disable the whole form submission by disabling the submit button
in HTML:

<input name="sb" disabled type="submit">

in JS:

form.sb.disabled = true

I'd like to propose that <form disabled> / form.disabled = true behaves similarly

Currently it does nothing to prevent submission. It'd be intuitive in my view to do so

It also provides a simple way to disable a form without any submit button (which are still submittable by pressing ENTER in an input)

[domenic]

Since this is already accomplishable using a few extra characters, it will need to meet a pretty high bar for being accepted into the standard, and thus incurring the costs in spec updates/updates to all browser engines/tests written/waiting for the feature to roll out to all engines before being usable.

Traditionally the way we've seen that done is by someone providing a library that accomplishes similar functionality and getting that library to very high usage (e.g. jQuery levels). Do you think you'll be able to do that?

[caub]

I can do a shim and polyfill (fiddle using MutationObserver):

const shimFormDisabledSubmitHandler = form => {
  form.addEventListener('submit', e => {
    if (
      e.currentTarget.disabled || 
      e.currentTarget.hasAttribute('disabled') && e.currentTarget.getAttribute('disabled') !== 'false'
    ) {
      e.preventDefault();
    }
  })
}

On the CSS perspective, :disabled would also have to be supported on forms

[travisleithead]

<fieldset> does this already (adding disabled auto-disables all contained form controls except legend). So, given that precedent, seems like having this work on <form> as well makes sense to me.

[rniwa]

Yeah, I think supporting disabled on form makes sense for the same reason it made sense for fieldset. I don't think the implementation / spec complexity is all that high anyway.

[domenic]

Cool, OK, that's multi-implementer interest! I'm surprised that without evidence of this being an important/popular pattern in the wild that folks are willing to implement this, but I'm always happy to make HTML better when we can.

Tagging @tkent-google and @smaug---- to check for any opposition, but at this point the next steps would be a spec pull request and web platform tests. @caub, are you interested in helping with those tasks?

[caub]

Sure, I'll start a PR here, and on WPT repo later

[smaug----]

Implementation should be easy, and this looks small and handy addition.

[caub]

If a submit button form.sb is disabled, calling form.sb.click() won't do anything, but calling form.submit() will still submit the form.
What should happen if form.disabled is set to true and I call form.submit()? I'd say nothing (but my polyfill above didn't take this into account)

[tkent-google]

I also think this is a reasonable feature, and implementation cost isn't high.

[zcorpan]

Pages in httparchive using <form disabled> (72 pages out of 1,269,826)

https://gist.github.com/zcorpan/84b890380ae945ca5b8d4088e42f24b2

It would be good to check some of these to make sure they don't regress if this is implemented.

query

#standardSQL
SELECT
  Alexa_rank AS rank,
  r.url AS url
FROM
  `httparchive.response_bodies.2018_09_15_desktop` AS r
JOIN
  `httparchive.urls.20170315`
ON
  NET.REG_DOMAIN(r.url) = Alexa_domain
WHERE
  REGEXP_CONTAINS(r.body, r"(?i)<form\s([^>]*\s+)?disabled(\s|>|=)")
ORDER BY
  rank

[zcorpan]

https://2nyu.counseling.steinhardt.nyu.edu/login looks like it would stop working.

[foolip]

@tkent-google do you think we should have a use counter for use of the disabled attribute on form, to see how prevalent this is? We couldn't tell how many of them will break, but if the numbers are high it'd be cause for concern.

[tkent-google]

do you think we should have a use counter for use of the disabled attribute on form, to see how prevalent this is?

http://crrev.com/597023
Chrome 71 will have the counters.

[foolip]

Great, thank you @tkent-google!

[tkent-google]

https://chromestatus.com/metrics/feature/timeline/popularity/2557
Chrome finds <form disabled> in 0.012% - 0.013% of page views.
If browsers supported <form disabled>, users would be unable to interact with the form.

https://chromestatus.com/metrics/feature/timeline/popularity/2558
Chrome submits <form disabled> in 0.001% of page views.

IMO, these numbers mean "low risk". However, I might want to add a warning message against <form disabled> before shipping it.