Austin Gil

Camp Counselor

Building Super-Powered Forms For the Web

Event Logo

Sunday, January 15, 2023 - 8:00 PM UTC, for 4 hours.

Workshop (pre-conference)

Room: Campsite 4

html
css
javascript
forms

Almost every website on the internet uses forms in one way or another. Most are dependent on them. Think of where we would be today without forms. No search engines, no social media, no ecommerce. Forms are the foundation for companies like Google, Twitter, and Amazon. So shouldn’t we invest in building the best forms we can? I've spent years understanding everything about forms that I could. Now, I want to show you how to use HTML, CSS, and JavaScript to build forms with super powers. Things you'll learn: - The perfect markup for semantic, accessible inputs - CSS-only UX improvements that used to require JS - Custom input validation without a library - Using JavaScript to improve accessibility - Submitting forms without a full page reload - Adding retry logic on failed submissions - Preventing data-loss from reloads or navigation - Avoiding race-conditions on multiple requests - Building forms that work even when JavaScript fails - Ways we can improve server-side APIs We'll be doing everything from scratch and cover several examples and look at both the frontend and backend considerations, all while focusing on: - Semantics - Accessibility - Design - User experience - Progressive Enhancement Please show up on the day of the workshop with these tools already installed: Git, Node.js, code editor. Please also Git clone this repository and npm install the dependencies: https://github.com/AustinGil/formwork.git

Agenda

Progressive Enhancement Info Click Example Search Example JS failures Stats Core concepts HTML foundations Input flow chart Input matching Input UX The perfect input CSS-only solutions Awesome CSS tools Cards Revealing UI Validation hints JavaScript enhancements Enhance form pt. 1 Enhance validation Enhance form pt. 2 Enhance fetch Enhance form pt. 3 Enhance server Request body Multipart/form-data Validation Validation errors as cookie JSON vs HTML response Handling other HTTP methods Nested data structures If we have time Convert to Vue.js Dig into forms CSS

Prerequisites

Attendees should have some beginner HTML, CSS, and JavaScript knowledge. Please show up on the day of the workshop with these tools already installed: Git, Node.js, code editor. Also Git clone this repository and npm install the dependencies: https://github.com/AustinGil/formwork.git

Take Aways

  • Learn how to build accessible, semantic, custom styled, and secure forms for the web
favorited by:
Michael Richardson Cori Drew Clark Sell Colin Lord Brian Morrison II Brad Garropy