Exclude form elements within disabled fieldsets

[flixcor]

Description

The default behavior for browsers is to exclude form inputs from submissions when they're inside a fieldset that is disabled (tested on Chrome, Firefox and IE11).

However, when using the hx-boost attribute, these inputs are included in submissions.

<!-- submits to ? -->
<form>
  <fieldset disabled>
    <input name="my-input" value="oops">
  </fieldset>
  <button>Submit</button>
</form>

<!-- submits to ?my-input=oops -->
<form hx-boost="true">
  <fieldset disabled>
    <input name="my-input" value="oops">
  </fieldset>
  <button>Submit</button>
</form>

Corresponding issue:

Testing

I added a test for an input within a disabled fieldset

Checklist

• I have read the contribution guidelines
• I have targeted this PR against the correct branch (master for website changes, dev for
  source changes)
• This is either a bugfix, a documentation update, or a new feature that has been explicitly
  approved via an issue
• I ran the test suite locally (npm run test) and verified that it succeeded

[alexpetros]

I like it but this might have to go behind a config; I could imagine a situation where people are using disabled inputs to pre-populate forms and show them to the user, disable.

[alexpetros]

Does hx-put on a form respect disable attributes? If it does, then this is something I think we could just fix without a config. If it doesn't, then the behavior is kind of baked and I think we do need one.

[flixcor]

It respects disable attributes directly on inputs as far as I can tell (as in, it excludes them from the form post).

[alexpetros]

Okay let's send it, I like it

[1cg]

great change, thank you!

[marcus-at-localhost]

I like it but this might have to go behind a config; I could imagine a situation where people are using disabled inputs to pre-populate forms and show them to the user, disable.

I totally tripped over that change.

I disable a fieldset while htmx is in the process of sending the form.
Also, I use bootstrap, and they style [disabled] fieldsets so it was my first choice without thinking about the side effect of fields not being sent, especially since it just worked with HTMX, until it didn't after the update.

[readonly] is not available on fieldsets, so I'm left with adding a css class that's removing the pointer-event and maybe add some other visual styles to dim the fields.

fieldset.disabled {
	pointer-events: none;
	opacity: .75;
}

At the end of the day, this is the correct implementation and I guess it's debatable if disabling form elements while in the process of sending, is great UX.

Just leaving this here as context if someone searches for it.