Native HTML components don’t guarantee good UX


Last week I read a post by designer and frontend dev, Theodore Soti:

Stop clearing forms with JavaScript.
The browser already knows how.
I still see a lot of apps using custom code to track inputs and reset state.
But for many forms, you can just use the native reset button.


<input type="submit" value="Submit">
<input type="reset" value="Reset">

That reset button restores every field to its initial value.
Text inputs. Checkboxes. Radios. Selects. Textareas.
No event listeners.
No state management.
No missed fields and strange edge cases.
It’s native.
It’s instant.
And it works everywhere.

I love the spirit of this.

Theodore is calling out something real - many solutions are over-engineered. Custom code where native would do. More complexity, more cost.

But as much as I’m a fan of using what browsers give you for free, I want to point out that many native HTML elements are terrible UX.

For example:

  • Date inputs (type=date) are native but hard to use and inaccessible.
  • The maxlength attribute makes textareas feel broken and truncates values longer than the limit when the user pastes
  • The title attribute shows a tooltip on hover, but doesn’t work for keyboard users.

The list is long.

Theodore’s type=reset advice is another good example because:

  1. Most users never need to reset a form. If they make mistakes, they fix them and move on. I’ve watched 100s of users fill out all sorts of different forms over the years and not once has a user needed a reset button.
  2. If you include a reset button, some users will click it by mistake. It happens more than you’d think. And when it does, everything they just filled out is gone - no edit-undo, no Command Z.
  3. The more buttons in a form, the more users have to think about which to press.

Making users think = bad UX.

“But what about something like clearing filters?”

This is a good use case.

But type=reset won’t help you here:

When a user selects filters and hits submit, the form resets to it’s default state as it was when the page loaded. That means it will reset to the same filters the user already chose - not an empty form.

So yes, users want to clear their filters. But type=reset won’t do that.

In short:

  • If it’s a regular form, a reset button is unnecessary and harmful.
  • If it’s a filter form (or similar), a reset button won’t work.

I used to work as a frontend engineer. I hated when designers ignored perfectly good native elements to make me build something custom - to make things look good.

So I understand Theodore’s instinct completely.

And it’s one I still share.

But:

Just because it’s native doesn’t mean it guarantees good UX.

The lucky thing about the reset button is that the solution is simple:

Don’t use one - doesn’t matter if it’s native or not.

But unlike type=reset, many native elements can’t be scrapped - they need to be replaced with something better.

If you want to know which elements you can’t just scrap and how to replace them with something better, you might like my course, Form Design Mastery:

https://formdesignmastery.com

Cheers,
Adam

Design tips to help you create products that are ridiculously simple and accessible to use

Join 10,000+ designers, content designers and engineers who get my free weekly newsletter with evidence-based design tips (in 3 minutes or less). Mostly forms UX, but not always.

Read more from Design tips to help you create products that are ridiculously simple and accessible to use
Me holding a sign saying, "Go from good UX to great UX."

Last week I listened to episode 10 of the Complimentary podcast, “Taking Interaction Design from Good to Great”. Anthony Hobday, one of the hosts, gave an example of applying for a driving license on GOV.UK. He said that instead of asking you to upload a photo, the form said: “We notice that you’ve already got a passport with us. Do you want us to use your passport photo for your driver’s license?” You just click ‘Yes’ and move on. Anthony said this design is “next level”. I agree. The best...

Me holding a sign that says "Design like Blink-182"

I’ve just listened to Rick Beato break down “What’s My Age Again?” — Blink-182’s second biggest hit. Funnily enough, he kicked off his "What Makes This Song Great?" series with their biggest hit — "All The Small Things". One person commented: I can’t believe you started the series with All The Small Things when it’s all the small things that makes the song so great. In the chorus of “What’s My age Again?”, Rick points out how most bass guitarists would play continuously, but Blink-182 left a...

Me holding a sign that says "Design like Blink-182"

I’ve just listened to Rick Beato break down “What’s My Age Again?” — Blink-182’s second biggest hit. Funnily enough, he kicked off his "What Makes This Song Great?" series with their biggest hit — "All The Small Things". One person commented: I can’t believe you started the series with All The Small Things when it’s all the small things that makes the song so great. In the chorus of “What’s My age Again?”, Rick points out how most bass guitarists would play continuously, but Blink-182 left a...