How would you build Wordle with just HTML and CSS? | Scott Jehl, Web Designer/Developer
This is a great thought exercise in progressive enhancement …that Scott then turns into a real exercise!
Link tags: validation
25
Miniver Cheevy: Decision-based evidence-making
My presumption that one should examine evidence before reaching a conclusion, rather than using it to support a conclusion, was not even an idea they could understand well enough to reject.
I am not against trying to be persuasive. That is a necessary art. But I was shaken they could not conceive of any use of information other than persuasion.
Progressively Enhanced Form Validation, Part 1: HTML and CSS – Cloud Four
A great reminder of just how much you can do with modern markup and styles when it comes to form validation. The :user-invalid and :user-valid pseudo-classes are particularly handy!
Bring Focus to the First Form Field with an Error :: Aaron Gustafson
A handy little script from Aaron to improve the form validation experience.
Can I include a tag to a tag? Based on HTML Spec WHATWG
A neat little tool when you need a reminder about what elements can go in other elements.
Defining the WHAT and WHY of Design Principles — Anton Sten — UX-lead
Just like brand values, mission statements, or vision decks, design principles can be generic and provide little to no actual value.
But used correctly, design principles help you make decisions resulting in a superior experience.
What are “unusual characters” – Terence Eden’s Blog
Be liberal in what you accept:
Basically, if your form can’t register Beyoncé – it has failed.
Beyond automatic accessibility testing: 6 things I check on every website I build - Manuel Matuzović
Six steps that everyone can do to catch accessibility gotchas:
- Check image descriptions
- Disable all styles
- Validate HTML
- Check the document outline
- Grayscale mode
- Use the keyboard
HTML5 Constraint Validation
The slides from a presentation by Drew on all the functionality that browsers give us for free when it comes to validating form inputs.
Half the battle of the web platform is knowing what technology is out there, ready to use. We’re all familiar with the ability to declare validation constraints in our HTML5 forms, but were you aware there’s a JavaScript API that goes along with it?
Extended Validation is Broken
How a certificate with extended validation makes it easier to phish. But I think the title could be amended—here’s what’s really broken:
On Safari, the URL is completely hidden! This means the attacker does not even need to register a convincing phishing domain. They can register anything, and Safari will happily cover it with a nice green bar.
sonarwhal, a linting tool for the web
Like Lighthouse, but from Microsoft.
Happier HTML5 Form Validation - daverupert.com
Dave uses just a smidgen of JavaScript to whip HTML5’s native form validation into shape.
Instead of being prescriptive about error messaging, we use what the browser natively gives us.
Web Form Conundrum: disabled or readonly? | Aaron Gustafson
Good question! And a good answer:
If you really need it, which you probably don’t,
readonlyis what you want.
Form Validation with Web Audio | CSS-Tricks
An interesting idea from Ruth—using subtle sounds to augment inline form validation.
There aren’t any extremely established best practices for this stuff. The best we can do is make tasteful choices and do user research. Which is to say, the examples in this post are ideas, not gospel.
Pure CSS crossword - CSS Grid
Form validation taken to the extreme. If you want to know more about how it was done, there’s an article explaining the markup and CSS.
Improve Your Billing Form’s UX In One Day – Smashing Magazine
A few straightforward steps for improving the usability of credit card forms. The later steps involve JavaScript but the first step uses nothing more than straight-up HTML.
Usability Testing of Inline Form Validation: 40% Don’t Have It, 20% Get It Wrong - Articles - Baymard Institute
I saw Christian speak on this topic at Smashing Conference in Barcelona. Here, he takes a long hard look at some of the little things that sites get wrong when doing validating forms on the fly. It’s all good sensible stuff, although it sounds a bit medical when he takes about “Premature Inline Validation.”
Enhancing a comment form: From basic to custom error message to BackgroundSync | justmarkup
This is a truly fantastic example of progressive enhancement applied to a form.
What I love about this is that it shows how progressive enhancement isn’t a binary on/off choice: there are layers and layers of enhancements here, from simple inline validation all the way to service workers and background sync, with many options in between.
Superb!
Simple inline error message pattern
This is my go-to method for adding validation messages to forms—I think I first heard about it from Derek—so it’s nice to see it corroborated by Steve:
Add the error message as a child of the label element associated with an input.
Kicksend/mailcheck · GitHub
A handy little script that attempts to check email inputs for misspelled domain names. I’m pretty sure it doesn’t need to be written as a jQuery pug-in, though: anyone want to fork it and create a non-jQuery version too?