Forms are how websites interact with users and can help your organization grow. Think about the forms on your own website or that you use to interact with your favorite companies. For example, login, payment, or event registration forms just to name a few.

Obviously, forms are important to get right. We don’t want a user’s experience to be frustrating or lead to them not being able to complete the form. That can mean the loss of a sale, customer, attendee, or confidence in the organization.

In this article, we’ll briefly go over form functionality that websites often don’t consider. These strategies can make your forms more usable for all users and accessible for users with disabilities.

Autofill and paste functionality Usable and accessible error message pattern Usable and accessible date field Auto formatting fields

KilianValkhof.com Mastodocon @kilian@mastodon.social

It's one of the core principles of web development and it means that you should Choose the least powerful language suitable for a given purpose.

Custom Switches (genial)

• Checkbox wird per CSS zu einem Schieberegler
• appearance: none = geil
• input checkbox wird grauer Hintergrund
• ::before wird little white dot
• :checked { background: green }
• :checked::before { transform: translateX(1rem); }

Datalist, a native autosuggest

A color picker that does more <label> <input type="color" /> Color </label>

Accordions Dialog modals

There are dozens more examples I could've added into this article, here are just some you can look into:

• Native smooth scrolling with scroll-behavior: smooth (but only when prefers-reduced-motion: no preference matches!),
• Native carousels with scroll-snap,
• "In-view" elements with position: sticky

…Not to name the whole concept of container queries.

And if we look into the future, we're getting even more cool things:

• Scroll driven animations
• Masonry layouts with grid-template-rows: masonry
• A fully stylable select with the new selectlist element (where you can style each part of a select without destroying all the native functionality it comes with)
• The :has() selector that's going to eliminate a whole class of JS selection