loading...
Cover image for Disable a HTML form while in-flight using fieldset
Google Web Dev

Disable a HTML form while in-flight using fieldset

samthor profile image Sam Thorogood Updated on ใƒป2 min read

Blog-A-Day in June (19 Part Series)

1) Rebuild only when necessary in Node 2) Civilization is a game you never lose 3 ... 17 3) Arrow functions break JavaScript parsers 4) Detecting Select All on the Web 5) Declaring JS Variables in 2019 6) Sam's dotfiles highlights 7) Automate Reading Form Results with ๐Ÿค– Chrome 8) Beyond appendChild: Better convenience methods for HTML 9) AMA, Sam 10-yr Googler in Web DevRel 10) Disable a HTML form while in-flight using fieldset 11) PWAs that download like apps ๐Ÿ—œ๏ธ 12) Matching elements with selectors in JS 13) Install This PWA To Continue 14) Google Assistant now supports "Open/Close" devices 15) Modern Web Components 16) What To Expect When You're Expecting To Drop IE11 ๐Ÿ—‘๏ธ 17) Divert Vertical Scroll To The Side โ†”๏ธ 18) Graceful Shutdown Is A Lie 19) Progress Indicator With Fetch

I'm a big fan of great UIs that properly control your user's ability to interact with your page: such as changing some value during a form submit. We've all seen the "do not change this form until it's done!" messages. ๐Ÿ™„

There's a standard HTML feature which can help you with this, in <fieldset disabled>. First, here's a demo:

Try submitting the form, clicking on one of the blue links (they don't go anywhere, it's just for the demo) and pressing the Tab key. The inputs cannot be focused! ๐Ÿคฏ

The Feature

When your browser sees a <fieldset> with its disabled attribute set: e.g., <fieldset disabled>, it will completely disable every <input>, <textarea> and <button> element found within. ๐Ÿšซ๐Ÿ“

This is pretty powerful. Your code might look like:

yourForm.addEventListener('submit', (event) => {
  event.preventDefault();  // disable normal submit

  const body = new FormData(yourForm);
  const p = fetch('/foo', {method: 'POST', body}).then((response) => {
    // ...
  });

  // important bit here
  yourFieldset.disabled = true;
  p.finally(() => {
    // .finally runs even if the fetch fails
    yourFieldset.disabled = false;
  });
});

Other uses for fieldset

The fieldset element also lets you group HTML form elements, including adding a legend(-ary). It's useful for accessibility and as a way to visually style groups. For a simple demo, check out this page on MDN.

Alternatives

Classic alternatives to really simple, powerful features like <fieldset disabled> tend to include:

  • adding a giant element that covers the form so users can't click on it
  • iterating through every <input> and marking it disabled
  • just hiding the form.

And all of these are pretty painful versus <fieldset disabled>. ๐Ÿคฎ

Thanks!

If you're curious about controlling user interaction, be sure to read up on the "inert" attribute, which takes <fieldset disabled> one step further, but doesn't have full browser support yet.

11 ๐Ÿ‘‹

Blog-A-Day in June (19 Part Series)

1) Rebuild only when necessary in Node 2) Civilization is a game you never lose 3 ... 17 3) Arrow functions break JavaScript parsers 4) Detecting Select All on the Web 5) Declaring JS Variables in 2019 6) Sam's dotfiles highlights 7) Automate Reading Form Results with ๐Ÿค– Chrome 8) Beyond appendChild: Better convenience methods for HTML 9) AMA, Sam 10-yr Googler in Web DevRel 10) Disable a HTML form while in-flight using fieldset 11) PWAs that download like apps ๐Ÿ—œ๏ธ 12) Matching elements with selectors in JS 13) Install This PWA To Continue 14) Google Assistant now supports "Open/Close" devices 15) Modern Web Components 16) What To Expect When You're Expecting To Drop IE11 ๐Ÿ—‘๏ธ 17) Divert Vertical Scroll To The Side โ†”๏ธ 18) Graceful Shutdown Is A Lie 19) Progress Indicator With Fetch

Posted on by:

samthor profile

Sam Thorogood

@samthor

Developer Relations for Web at Google.

Google Web Dev

Collected thoughts and posts on web development from the @ChromiumDev team.

Discussion

markdown guide
 

I usually just do pointer-events: none in CSS, that does the trick.

 

The tab key or alternative methods of access can trivially get "under" your block.

 

Sure, makes sense. But to me itโ€™s mostly a style-thing, yโ€™know? I check for repeated request with a nonce and stuff anyway, so if someone is uncles to really try to to that, I donโ€™t care.

Unless, it might be bad for accessibility, now that I think of it :-/

Oh good. I mean you're dealing with a repeat submission issue your way, and that's greatโ€”that's the actual problem I want to help readers solveโ€”but maybe do consider accessibility.

e.g. What happens if I use 'enter' to submit the form (which I find really awkward anyway) or 'space' if I'm focused on the button. I probably still have focus and could submit again.

 
 

Very cool! Thanks ๐Ÿ‘๐Ÿฝ