Archive for the ‘Forms’ Category

Text Input with Expanding Bottom Border

Posted on: No Comments
Petr Gazarov published a pretty rad little design pattern in his article Text input highlight, TripAdvisor style. It's a trick! You can't really make an <input> stretch like that, so Petr makes a <span> to sync the value too, which acts as...

Quickly Create Simple yet Powerful Angular Forms

Posted on: No Comments
Forms are an essential part of many web applications, being the most common way to enter and edit text-based data. Front-end JavaScript frameworks such as Angular, often have their own idiomatic ways of creating and validating forms that you need to ge...

The Output Element

Posted on: No Comments
Last night I was rooting around in the cellars of a particularly large codebase and stumbled upon our normalize.css which makes sure that all of our markup renders in a similar way across different browsers. I gave it a quick skim and found styles for ...

Boilerform

Posted on: No Comments
This is just a random idea, but I can't stop it from swirling around in my head. Whenever I need to style a form on a fresh project where the CSS and style guide stuff is just settling in, the temptation to reach for a mini form framework is strong. Fo...

Form Validation with Web Audio

I've been thinking about sound on websites for a while now. When we talk about using sound on websites, most of us grimace and think of the old days, when blaring background music played when the website loaded. Today this isn't and needn't be a thing....

Why Use a Third-Party Form Validation Library?

We've just wrapped up a great series of posts from Chris Ferdinandi on modern form validation. It starts here. These days, browsers have quite a few built-in tools for handling form validation including HTML attributes that can do quite a bit on their ...

Form Validation Part 3: A Validity State API Polyfill

Posted on: No Comments
In the last article in this series, we built a lightweight script (6kb, 2.7kb minified) using the Validity State API to enhance the native form validation experience. It works in all modern browsers and provides support IE support back to IE10. But, th...