📝 CSS-Tricks 250: Form Frustrations, CSS Performance, and color-contrast()

View this newsletter on the web.

[Robin]: This week I’ve been thinking about this post from the team at gov.uk where they write about how they made a button to show and hide the password of an input. They do that by toggling between the input type of password and text with some JavaScript. There’s a host of lessons they jotted down in this post about the craft (and frustrations) of making forms.

It’s fascinating reading about how the team tackled this problem but it also makes me a tiny bit frustrated because a show/hide password button feels like something that should be built into forms by default. Here’s some of the lessons they learnt along the way that suggests this should be a problem that browsers solve for us:

  • show or hide the password by toggling input type between ‘password’ and ‘text’
  • use a button with type ‘button’ to avoid accidental form submission
  • autocomplete=”off” doesn’t work in all browsers
  • don’t allow users to submit text inputs containing passwords

I know there’s that consortium to make browsers more consistent, but now that we have all sorts of fabulous layout tools on the web, I think it’s time for us as a community to return to the basics: let’s make forms on the web real good.

I know this is an extremely punk rock statement to make, but I’m scared to make a form on the web. Just look at what it took for this team to add a simple button to show the password! All this work and effort is required for something that results in extremely low pay-off in the end. I think browsers really need to meet us halfway here because making a form should be as enjoyable and as easy as creating a grid with CSS. Forms shouldn’t be scary.

I guess this is the lesson I came away from this post: whenever you feel like you’re fighting the browser to get it to do what you want, then those are the problems that should be the priority of browser manufacturers.

Okay, enough moaning about forms…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s