Build a Better Mobile Input

This is such a handy tool for building forms! Choose different combinations of type, inputmode, and autocomplete attributes on input elements and see how that will be conveyed to users on iOS and Android devices.

Tagged with

Responses

1 Like

# Liked by Damian Wajer on Thursday, January 19th, 2023 at 4:18pm

Related links

Alistair Davidson / validation-enhancer · GitLab

Here’s another nice progressive web component for your forms, this time for showing error messages.

Tagged with

Never Lose Form Progress Again :: Aaron Gustafson

Here’s an excellent progressive web component from Aaron—wrap a custom element around your exising form and your good to go:

At its core, form-saver is a small web component that wraps a form, keeps an eye on it, stores values in localStorage, and restores them when the page loads again. Better yet, it clears out saved data after a successful submission so you’re not accidentally resurrecting stale information the next time someone stops by.

Tagged with

CSS Form Control Styling Level 1

This looks like a really interesting proposal for allowing developers more control over styling inputs. Based on the work being done the customisable select element, it starts with a declaration of appearance: base.

Tagged with

UI Pace Layers - Jim Nielsen’s Blog

Every UI control you roll yourself is a liability. You have to design it, test it, ship it, document it, debug it, maintain it — the list goes on.

It makes you wonder why we insist on rolling (or styling) our own common UI controls so often. Perhaps we’d be better off asking: What are the fewest amount of components we have to build to deliver value to our users?

Tagged with

How would you build Wordle with just HTML and CSS? | Scott Jehl, Web Designer/Developer

This is a great thought exercise in progressive enhancement …that Scott then turns into a real exercise!

Tagged with

Related posts

Preventing automated sign-ups

Here’s a bit of PHP I’m using on The Session.

Pickin’ dates

HTML web components for augmenting date inputs.

Progressive disclosure defaults

If you’re going to toggle the display of content with CSS, make sure the more complex selector does the hiding, not the showing.

Multi-page web apps

A question via email…

Accent all areas

A small but important addition to CSS.