Forms on the web have become terrible. Lost state. No keyboard nav. Weird refreshes. Mobile hostile.
The reason is #frontend developers that think clientside state management is how to implement a form. It is not.
Good forms work without client #javascript (and then are progressive enhanced by js to work even better).
Good forms always submit. Good forms remember values and display problems inline.
How do we fix the misconceptions and, in the process, fix the forms on the web ?
Two other notes.
1. Luke W has THE book on design of forms here https://www.lukew.com/resources/web_form_design.asp
2. Most of this is downstream frontend frameworks ignoring POST so they don't need to teach/handle httponly session state for persisting values. Arguably these types of framework are a poor choice for UX.
I just published ~3K words + diagrams + code samples + demo videos on the frontend networking stack I’m choosing for Little CRM, and all my apps going forward. https://thomascannon.me/guides/fixing-the-rails-networking-stack I know that’s a ton to dig into, but I believe this is a very strong path forward for resilient and maintainable web apps.
Buy Forms that Work: Designing Web Forms for Usability (Interactive Technologies) 1 by Caroline Jarrett, Gerry Gaffney, Steve Krug (ISBN: 9781558607101) from Amazon's Book Store. Everyday low prices and free delivery on eligible orders.
Couple of notions…
Making Jeremy’s Building talk mandatory learning for new devs would be a start https://mastodon.social/@urlyman/111844078858504140
And it wouldn’t hurt to embed the philosophy of frugal computing as an inevitable direction of travel https://wimvanderbauwhede.github.io/articles/frugal-computing/
@brianleroux This is such a pervasive issue on the web.
I build form interfaces incrementally, with native HTML and a server endpoint. I make sure everything works fully before touching a line of JavaScript.
Colleagues will ask why I'm not "doing it in React." It's not until a few iterations in, once I've added client-side progressive enhancement with native JavaScript that the full picture starts to take shape. Then, "Wow, this is fast and snappy, and it works even when scripts fail to load."
As it should be. No?
@brianleroux I once found myself implementing a GraphQL mutation and several React components to submit what was in essence a simple form.
I remember wishing, sarcastically, for a protocol that literally had this built in.
@soviut it happens to me daily. Banks. Hotels. Airlines. Medical clinic. Grocery order.
Critical stuff. Being let down because devs don't know how forms work truly.
@brianleroux Banks are usually the ones I see being poorly developed by said "enterprise" developers. They lack any knowledge of browsers or frontend. I once spoke with a dev who worked for the bank I use and I complained about the 8 character limit on passwords at the time; he argued it was entropically fine.
All the frontend devs I know are intimately familiar with forms. If they're not, they aren't really frontend devs; they're just devs who happen to be writing frontend code at the moment.
@brianleroux Forms should do all the necessary formatting for the user.
It took 4 tries for me to contact a company today because the contact form wouldn’t accept a copy-pasted phone number regardless of the punctuation or lack thereof. They almost lost a sale over that.
@brianleroux every peace of curriculum needs a section of forms.
99% of development is handling forms. Instead of the next big wenn development framework we need decent standards and libs for forms, which are widely understood and adapted.
It's not exactly rocket science. But probably forms are just not sexy enough for most devs to care much about them
@brianleroux first, I would get rid of your assumption that it is "front end devs" responsible for this
Many (most) forms are created by "full stack" devs who - speaking for myself - never had a day of training on best practices & work things out to the best they can, following instructions from a manager with no formal UX experience
Looking at the problem from that POV changes the answer quite a bit
@brianleroux you become one by being a database programmer and having your manager say,
"Great! Can you fix the responsiveness on this web page?"
And joking aside, that's what I mean in saying many of us are doing a job we were not trained for, and don't even realize when we aren't following best practices
@brianleroux agree. Was trying to buy tickets for a local football match for my son recently on mobile and the form was a difficult to use mess of JS.
I think web forms education has to start with HTML, not frameworks that process the data.
Also, what do code camps/colleges/universities use when teaching students this stuff?
Sam Stephenson
Brian LeRoux 💚
sayrer
westbrook
Thomas Cannon
skry
Klaas Pieter Annema
Joe Lanman
Mingo 🦩 Hagen
Jonathan Schofield
Paul Shryock
Zeolith 
Danny Blue
mhoye
ShadSterling
SlightlyCyberpunk
Sjors Rijsdam
Thomas Hunter II
Arnd Issler
Charles Choi 최 민수
Ian
Michal Bryxí 🌱
r-hold
Anthony Rabine
CodeByJeff
Simon Jones