Archive for the ‘Forms’ Category

Interesting Takes on Log in / Sign Up Forms

Posted on: No Comments
A roundup of simple forms that have interesting UI interactions and animations. I can't guarantee the final demo for each of them is perfectly accessible or measurably improves UX or anything, but that doesn't mean that you can't take inspiration from ...

Improve Your Billing Form’s UX In One Day

Posted on: No Comments
    The checkout page is the last page a user visits before finally decide to complete a purchase on your website. It’s where window shoppers turn into pay...

React Quickly: How to Work with Forms in React

This article covers how to capture text input and input via other form elements like input, textarea, and option. Working with them is paramount to web development because they allow our applications to receive data (e.g. text) and actions (e.g. clicks...

Build (Custom Styled) Online Forms with Wufoo

Posted on: No Comments
Need to put a form on a website? I've been using Wufoo to do that for a decade. It's so simple. Just drag and drop the fields you need and select the options you want. Even things that could be complex aren't, like adding logic (e.g. if they select thi...

The Art of Labeling

Posted on: No Comments
There's a lot of neat tricks in this video by Rob Dodson where he focuses on accessibility tricks in Chrome's DevTools. A few notes: Chrome DevTools has an experimental feature to help with accessibility testing that you can unlock if you head to chro...

Alternatives to Placeholder Text

Posted on: No Comments
Andrew Coyle on when to use <input placeholder>: Don't use them as a label Don't use them as a secondary label Don't use them as example input Don't use them as helper text Which amounts to pretty much: "Don't use them". Notice there are no exa...

[WebKit now has] HTML Interactive Form Validation

Posted on: No Comments
Chris Dumez: WebKit did not support HTML interactive form validation, which occurs on form submission (unless the novalidate attribute is set on the <form> element) or using the reportValidity() API. We are pleased to announce that this is now im...

Radios and Checkboxes on GOV.UK

Posted on: No Comments
An interesting journey of form UX, documented by Tim Paul. It started with browser defaults. It's unclear why that wasn't working. But interestingly, an alteration that included giant label-based click areas in color-offset boxes didn't help. What actu...

An Intro to Monkey Testing with Gremlins.js

Posted on: No Comments
A common idiom in our industry is, "You never can predict how the user will use your product once they get it in their hands." If you've ever watched a stakeholder use a website or web application for the first time, you may know this firsthand. I can'...

FormLinter

Posted on: No Comments
I absolutely love this idea from Thoughtbot. Just like automated tools that check your HTML for syntax, formatting, validity, or whatever else, FormLinter checks your <form> HTML for best practices. Things like every input having a label, using c...