Select Page

Category: forms

Finger-friendly numerical inputs with `inputmode`

Forms are often a nightmare on mobile. We can make the process as pain-free as possible by reacting to context. Input fields that expect numerical values should have a numerical UI. Bringing up a number keyboard on small screens is easy on most platforms — just use a . This big button numeric keyboard is finger-friendly and will help prevent users bouncing from your form in frustration. However, type="number" isn’t appropriate for all numbers. On (most) larger screens, number inputs come with an incrementer/decrementer button. It’s a useful piece of UI we get for free by default. It does,...

Read More

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
  • 1
  • 2
000webhost logo