Select Page

Category: forms

Boilerform: A Follow-Up

When Chris wrote his idea for a Boilerform, I had already been thinking about starting a new project. I’d just decided to put my front-end boilerplate to bed, and wanted something new to think about. Chris’ idea struck a chord with me immediately, so I got enthusiastically involved in the comments like an excitable puppy. That excitement led me to go ahead and build out the initial version of Boilerform, which you can check out here. The reason for my initial excitement was that I have a guilty pleasure for forms. In various jobs, I’ve worked with forms at...

Read More

How to Style a Form With Tailwind CSS

If you’ve been staying in the loop with the latest CSS frameworks, you’ve probably already heard of the newest kid on the block: Tailwind CSS. According to its documentation, “Tailwind is a utility-first CSS framework for rapidly building custom user interfaces.” In practice, this means using a variety of classes that closely map to underlying CSS properties. For example, applying a class like .text-center to an element means that we’re setting its text-align property to center. Simple enough, right? Using utility classes like this allows us to spend more time iterating through designs and avoiding premature abstraction of our...

Read More

Text Input with Expanding Bottom Border

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 stretch like that, so Petr makes a to sync the value too, which acts as the border itself. The whole thing is a React component. If you’re willing to use a instead, you could do the whole thing in CSS! See the Pen Outline bottom by Chris Coyier (@chriscoyier) on CodePen. Although that also means no placeholder. Direct Link to Article — Permalink Text Input with Expanding Bottom Border is a post from CSS-Tricks...

Read More

The Output Element

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 a rather peculiar element called that I’d never seen or even heard of before. According to MDN, it “represents the result of a calculation or user action” typically used in forms. And rather embarrassingly for me, it isn’t a new and fancy addition to the spec since Chris used it in a post all the way back in 2011. But regardless! What does output do and how do we use it? Well, let’s say we have an input with a type of range. Then we add an output element and correlate it to the input with its for attribute. See the Pen Input Output #2 by CSS-Tricks (@css-tricks) on CodePen. It… doesn’t really do anything. By default, output doesn’t have any styles and doesn’t render a box or anything in the browser. Also, nothing happens when we change the value of our input. We’ll have to tie everything together with JavaScript. No problem! First we need to find our input in the DOM with JavaScript, like so: const rangeInput = document.querySelector('input'); Now we can append an event listener onto it so that whenever we...

Read More


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. Form elements are finicky, have little cross-browser issues, and are sometimes downright hard to wrassle styling control from. This idea, which I’m just now managing to write about, but haven’t actually done any work toward, would be this mini form framework. Maybe something like “Boilerform”, as Dave jokingly suggested on an episode of ShopTalk. I imagine it something like this: It would have basic form styling to organize form elements, not unlike something like Foundation forms. It would account for cross browser issues, not unlike normalize.css. It would include strongarming styling control over form elements, not unlike WTF, forms? It would include native browser form validation stuff, including UX improvements via native JavaScript API’s, not unlike Validate.js. I think there is value in combining those things into one thing, but doing so… With a light touch, being as unopinionated about the final styling as possible With flexibility, perhaps showing off a gallery of different form types with different styling. I probably don’t have time to head up a project like this, but I wouldn’t mind helping connect humans who...

Read More
  • 1
  • 2