SlideShare a Scribd company logo

Creating Beautiful, Accessible, and User-Friendly Forms

Forms are often a key part of websites: they allow users to buy things, sign up, participate, communicate, and get things done. But why are so many online forms confusing, cluttered, and difficult to use? In this session, you'll learn which HTML elements and attributes to use to make sure your form is accessible, understandable, and shows up correctly on the screen. You'll find out the best way to style a form with CSS to make sure it looks good on any browser, device or screen size. You'll learn how to validate form data and provide useful error messages — but also how you can help users fill in the correct information before submitting. And you'll find out what you need to do so that your forms are easier to complete on touch screens. Presented at CascadiaFest, Web Unleashed, and CSS Dev Conference in 2016. Presented at Mobile+Web DevCon, UX Camp Edmonton, and ConFoo Vancouver in 2017.

1 of 172
Download to read offline
@clarissa
Creating Beautiful,Accessible,
and User-Friendly
Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms

Recommended

The Secret Life of Forms
The Secret Life of FormsThe Secret Life of Forms
The Secret Life of FormsIvan Wilson
 
KOLEJ KOMUNITI - Sijil Aplikasi Perisian Komputer
KOLEJ KOMUNITI - Sijil Aplikasi Perisian KomputerKOLEJ KOMUNITI - Sijil Aplikasi Perisian Komputer
KOLEJ KOMUNITI - Sijil Aplikasi Perisian KomputerAiman Hud
 
Extending Operators in Perl with Operator::Util
Extending Operators in Perl with Operator::UtilExtending Operators in Perl with Operator::Util
Extending Operators in Perl with Operator::UtilNova Patch
 
PromptWorks Talk Tuesdays: Ray Zane 1/17/17 "Elixir Is Cool"
PromptWorks Talk Tuesdays: Ray Zane 1/17/17 "Elixir Is Cool"PromptWorks Talk Tuesdays: Ray Zane 1/17/17 "Elixir Is Cool"
PromptWorks Talk Tuesdays: Ray Zane 1/17/17 "Elixir Is Cool"PromptWorks
 
Benchmarking Perl (Chicago UniForum 2006)
Benchmarking Perl (Chicago UniForum 2006)Benchmarking Perl (Chicago UniForum 2006)
Benchmarking Perl (Chicago UniForum 2006)brian d foy
 
Simplifying code monster to elegant in n 5 steps
Simplifying code  monster to elegant in n 5 stepsSimplifying code  monster to elegant in n 5 steps
Simplifying code monster to elegant in n 5 stepstutec
 

More Related Content

What's hot

Open course(programming languages) 20150304
Open course(programming languages) 20150304Open course(programming languages) 20150304
Open course(programming languages) 20150304JangChulho
 
Dart : one language to rule them all - MixIT 2013
Dart : one language to rule them all - MixIT 2013Dart : one language to rule them all - MixIT 2013
Dart : one language to rule them all - MixIT 2013Sébastien Deleuze
 
Not Really PHP by the book
Not Really PHP by the bookNot Really PHP by the book
Not Really PHP by the bookRyan Kilfedder
 
Document
DocumentDocument
Documentviwviw
 
名古屋Ruby会議01 - Rubyでライフハッキング10連発♪
名古屋Ruby会議01 - Rubyでライフハッキング10連発♪名古屋Ruby会議01 - Rubyでライフハッキング10連発♪
名古屋Ruby会議01 - Rubyでライフハッキング10連発♪Shoya Tsukada
 
QNlocal: Docker, Continuous Integration, WordPress e milioni di visite. Si è ...
QNlocal: Docker, Continuous Integration, WordPress e milioni di visite. Si è ...QNlocal: Docker, Continuous Integration, WordPress e milioni di visite. Si è ...
QNlocal: Docker, Continuous Integration, WordPress e milioni di visite. Si è ...alessandro mazzoli
 

What's hot (7)

Open course(programming languages) 20150304
Open course(programming languages) 20150304Open course(programming languages) 20150304
Open course(programming languages) 20150304
 
Dart : one language to rule them all - MixIT 2013
Dart : one language to rule them all - MixIT 2013Dart : one language to rule them all - MixIT 2013
Dart : one language to rule them all - MixIT 2013
 
Not Really PHP by the book
Not Really PHP by the bookNot Really PHP by the book
Not Really PHP by the book
 
Growing jQuery
Growing jQueryGrowing jQuery
Growing jQuery
 
Document
DocumentDocument
Document
 
名古屋Ruby会議01 - Rubyでライフハッキング10連発♪
名古屋Ruby会議01 - Rubyでライフハッキング10連発♪名古屋Ruby会議01 - Rubyでライフハッキング10連発♪
名古屋Ruby会議01 - Rubyでライフハッキング10連発♪
 
QNlocal: Docker, Continuous Integration, WordPress e milioni di visite. Si è ...
QNlocal: Docker, Continuous Integration, WordPress e milioni di visite. Si è ...QNlocal: Docker, Continuous Integration, WordPress e milioni di visite. Si è ...
QNlocal: Docker, Continuous Integration, WordPress e milioni di visite. Si è ...
 

Similar to Creating Beautiful, Accessible, and User-Friendly Forms

Web Design Course - Lecture 6 - HTML form and form validation
Web Design Course - Lecture 6 - HTML form and form validationWeb Design Course - Lecture 6 - HTML form and form validation
Web Design Course - Lecture 6 - HTML form and form validationAl-Mamun Sarkar
 
Java script form validation
Java script  form validationJava script  form validation
Java script form validationAbhishekMondal42
 
Zen Coding Cheat Sheet
Zen Coding Cheat SheetZen Coding Cheat Sheet
Zen Coding Cheat SheetFaysal Shahi
 
Bad Form @ JSConf Asia 2014
Bad Form @ JSConf Asia 2014Bad Form @ JSConf Asia 2014
Bad Form @ JSConf Asia 2014cliener
 
Php code for online quiz
Php code for online quizPhp code for online quiz
Php code for online quizhnyb1002
 
How to code radio buttons in HTML5 and CSS Styling
How to code radio buttons in HTML5 and CSS StylingHow to code radio buttons in HTML5 and CSS Styling
How to code radio buttons in HTML5 and CSS StylingAimeeKyra
 

Similar to Creating Beautiful, Accessible, and User-Friendly Forms (12)

Web Design Course - Lecture 6 - HTML form and form validation
Web Design Course - Lecture 6 - HTML form and form validationWeb Design Course - Lecture 6 - HTML form and form validation
Web Design Course - Lecture 6 - HTML form and form validation
 
XML Schemas
XML SchemasXML Schemas
XML Schemas
 
Forms
FormsForms
Forms
 
Java script form validation
Java script  form validationJava script  form validation
Java script form validation
 
Zen Coding Cheat Sheet
Zen Coding Cheat SheetZen Coding Cheat Sheet
Zen Coding Cheat Sheet
 
Zencoding cheatsheet, ayuda Memoria
Zencoding cheatsheet, ayuda MemoriaZencoding cheatsheet, ayuda Memoria
Zencoding cheatsheet, ayuda Memoria
 
Bad Form @ JSConf Asia 2014
Bad Form @ JSConf Asia 2014Bad Form @ JSConf Asia 2014
Bad Form @ JSConf Asia 2014
 
Form
FormForm
Form
 
Php code for online quiz
Php code for online quizPhp code for online quiz
Php code for online quiz
 
php Mailer
php Mailerphp Mailer
php Mailer
 
How to code radio buttons in HTML5 and CSS Styling
How to code radio buttons in HTML5 and CSS StylingHow to code radio buttons in HTML5 and CSS Styling
How to code radio buttons in HTML5 and CSS Styling
 
Three tier application
Three tier applicationThree tier application
Three tier application
 

More from Clarissa Peterson

Designing for Users: How to Create a Better User Experience
Designing for Users: How to Create a Better User ExperienceDesigning for Users: How to Create a Better User Experience
Designing for Users: How to Create a Better User ExperienceClarissa Peterson
 
Designing Responsive Websites
Designing Responsive WebsitesDesigning Responsive Websites
Designing Responsive WebsitesClarissa Peterson
 
Responsive Design in the Real World
Responsive Design in the Real WorldResponsive Design in the Real World
Responsive Design in the Real WorldClarissa Peterson
 
Responsive Design Essentials
Responsive Design EssentialsResponsive Design Essentials
Responsive Design EssentialsClarissa Peterson
 
Responsive Design Tools & Resources
Responsive Design Tools & ResourcesResponsive Design Tools & Resources
Responsive Design Tools & ResourcesClarissa Peterson
 
Content Strategy for Responsive Websites
Content Strategy for Responsive WebsitesContent Strategy for Responsive Websites
Content Strategy for Responsive WebsitesClarissa Peterson
 
Responsive Design Tools & Resources
Responsive Design Tools & ResourcesResponsive Design Tools & Resources
Responsive Design Tools & ResourcesClarissa Peterson
 
Optimizing User Experience with Responsive Web Design
Optimizing User Experience with Responsive Web DesignOptimizing User Experience with Responsive Web Design
Optimizing User Experience with Responsive Web DesignClarissa Peterson
 
Responsive Design Heaven & Hell
Responsive Design Heaven & HellResponsive Design Heaven & Hell
Responsive Design Heaven & HellClarissa Peterson
 
Introduction to Responsive Design v.2
Introduction to Responsive Design v.2Introduction to Responsive Design v.2
Introduction to Responsive Design v.2Clarissa Peterson
 
Introduction to Responsive Web Design
Introduction to Responsive Web DesignIntroduction to Responsive Web Design
Introduction to Responsive Web DesignClarissa Peterson
 

More from Clarissa Peterson (19)

Alt Text Is Your Superpower
Alt Text Is Your SuperpowerAlt Text Is Your Superpower
Alt Text Is Your Superpower
 
Designing for Users: How to Create a Better User Experience
Designing for Users: How to Create a Better User ExperienceDesigning for Users: How to Create a Better User Experience
Designing for Users: How to Create a Better User Experience
 
Making the Web Easy
Making the Web EasyMaking the Web Easy
Making the Web Easy
 
Responsive Color
Responsive ColorResponsive Color
Responsive Color
 
Responsive Design Workshop
Responsive Design WorkshopResponsive Design Workshop
Responsive Design Workshop
 
UX & Responsive Design
UX & Responsive DesignUX & Responsive Design
UX & Responsive Design
 
Designing Responsive Websites
Designing Responsive WebsitesDesigning Responsive Websites
Designing Responsive Websites
 
Responsive Typography II
Responsive Typography IIResponsive Typography II
Responsive Typography II
 
Responsive Design in the Real World
Responsive Design in the Real WorldResponsive Design in the Real World
Responsive Design in the Real World
 
Responsive Design Essentials
Responsive Design EssentialsResponsive Design Essentials
Responsive Design Essentials
 
Responsive Design Tools & Resources
Responsive Design Tools & ResourcesResponsive Design Tools & Resources
Responsive Design Tools & Resources
 
Content Strategy for Responsive Websites
Content Strategy for Responsive WebsitesContent Strategy for Responsive Websites
Content Strategy for Responsive Websites
 
UX & Responsive Design
UX & Responsive DesignUX & Responsive Design
UX & Responsive Design
 
Responsive Design
Responsive Design Responsive Design
Responsive Design
 
Responsive Design Tools & Resources
Responsive Design Tools & ResourcesResponsive Design Tools & Resources
Responsive Design Tools & Resources
 
Optimizing User Experience with Responsive Web Design
Optimizing User Experience with Responsive Web DesignOptimizing User Experience with Responsive Web Design
Optimizing User Experience with Responsive Web Design
 
Responsive Design Heaven & Hell
Responsive Design Heaven & HellResponsive Design Heaven & Hell
Responsive Design Heaven & Hell
 
Introduction to Responsive Design v.2
Introduction to Responsive Design v.2Introduction to Responsive Design v.2
Introduction to Responsive Design v.2
 
Introduction to Responsive Web Design
Introduction to Responsive Web DesignIntroduction to Responsive Web Design
Introduction to Responsive Web Design
 

Recently uploaded

HTM Example Layouts Freedman Theatre.pdf
HTM Example Layouts Freedman Theatre.pdfHTM Example Layouts Freedman Theatre.pdf
HTM Example Layouts Freedman Theatre.pdfLizShek
 
Apparel Portfolio draft: Cayden Ingman |
Apparel Portfolio draft: Cayden Ingman |Apparel Portfolio draft: Cayden Ingman |
Apparel Portfolio draft: Cayden Ingman |CaydenIngman
 
sustainable-interior-design-strategy-with-case-study_TANIA-BERA.ppt
sustainable-interior-design-strategy-with-case-study_TANIA-BERA.pptsustainable-interior-design-strategy-with-case-study_TANIA-BERA.ppt
sustainable-interior-design-strategy-with-case-study_TANIA-BERA.pptAr. TANIA BERA
 
Mother Courage and Her Children Layouts.pdf
Mother Courage and Her Children Layouts.pdfMother Courage and Her Children Layouts.pdf
Mother Courage and Her Children Layouts.pdfLizShek
 
ASIF KHAN-LANDSCAPE-DESIGN PORTFOLIO 2024 f.pdf
ASIF KHAN-LANDSCAPE-DESIGN PORTFOLIO 2024 f.pdfASIF KHAN-LANDSCAPE-DESIGN PORTFOLIO 2024 f.pdf
ASIF KHAN-LANDSCAPE-DESIGN PORTFOLIO 2024 f.pdfaekhan1019
 
Land Management and sourcing land for sustainable Urban Development.
Land Management and sourcing land for sustainable Urban Development.Land Management and sourcing land for sustainable Urban Development.
Land Management and sourcing land for sustainable Urban Development.JIT KUMAR GUPTA
 
Spoleto Festival23 Hang and Cable Layouts.pdf
Spoleto Festival23 Hang and Cable Layouts.pdfSpoleto Festival23 Hang and Cable Layouts.pdf
Spoleto Festival23 Hang and Cable Layouts.pdfLizShek
 
Heathers Symbols for Gerald Freedman Theatre.pdf
Heathers Symbols for Gerald Freedman Theatre.pdfHeathers Symbols for Gerald Freedman Theatre.pdf
Heathers Symbols for Gerald Freedman Theatre.pdfLizShek
 
Studio Surfaced - Textile Design Studio based out of Delhi NCR
Studio Surfaced - Textile Design Studio based out of Delhi NCRStudio Surfaced - Textile Design Studio based out of Delhi NCR
Studio Surfaced - Textile Design Studio based out of Delhi NCRSurfaced - Designs By Meera Narula
 
Ordering Principles in Architecture-MaHi.pptx
Ordering Principles in Architecture-MaHi.pptxOrdering Principles in Architecture-MaHi.pptx
Ordering Principles in Architecture-MaHi.pptxTafshirul Alam
 
homescreen revamp homescreen revamphomescreen revamp
homescreen revamp homescreen revamphomescreen revamphomescreen revamp homescreen revamphomescreen revamp
homescreen revamp homescreen revamphomescreen revampvidya934261
 
urban design case study of old city Jodhpur
urban design case study of  old city Jodhpururban design case study of  old city Jodhpur
urban design case study of old city JodhpurSreyaseeNath1
 
Communicative Grammar English .pnnnnkkptx
Communicative Grammar English .pnnnnkkptxCommunicative Grammar English .pnnnnkkptx
Communicative Grammar English .pnnnnkkptxRawalRafiqLeghari
 
acervus process book no cover--character
acervus process book no cover--characteracervus process book no cover--character
acervus process book no cover--characterschell
 
Portfolio of designs and Visualization Samuel Jayeola
Portfolio of designs and Visualization Samuel JayeolaPortfolio of designs and Visualization Samuel Jayeola
Portfolio of designs and Visualization Samuel JayeolaJayeola Samuel
 
Mother Courage and Her Children Shop Order.pdf
Mother Courage and Her Children Shop Order.pdfMother Courage and Her Children Shop Order.pdf
Mother Courage and Her Children Shop Order.pdfLizShek
 
impact of packaging on consumer buying behaviour project report pdf.pdf
impact of packaging on consumer buying behaviour project  report pdf.pdfimpact of packaging on consumer buying behaviour project  report pdf.pdf
impact of packaging on consumer buying behaviour project report pdf.pdfSanjivanisShirodkar
 
Mother Courage and Her Children Layouts.pdf
Mother Courage and Her Children Layouts.pdfMother Courage and Her Children Layouts.pdf
Mother Courage and Her Children Layouts.pdfLizShek
 
PAGE ONE PAGE TWO PAGE THREE PAGE FOUR.pdf
PAGE ONE PAGE TWO PAGE THREE PAGE FOUR.pdfPAGE ONE PAGE TWO PAGE THREE PAGE FOUR.pdf
PAGE ONE PAGE TWO PAGE THREE PAGE FOUR.pdfssuser799b33
 

Recently uploaded (20)

HTM Example Layouts Freedman Theatre.pdf
HTM Example Layouts Freedman Theatre.pdfHTM Example Layouts Freedman Theatre.pdf
HTM Example Layouts Freedman Theatre.pdf
 
Maximize Your Brand Impact with a Box Truck Wrap Design
Maximize Your Brand Impact with a Box Truck Wrap DesignMaximize Your Brand Impact with a Box Truck Wrap Design
Maximize Your Brand Impact with a Box Truck Wrap Design
 
Apparel Portfolio draft: Cayden Ingman |
Apparel Portfolio draft: Cayden Ingman |Apparel Portfolio draft: Cayden Ingman |
Apparel Portfolio draft: Cayden Ingman |
 
sustainable-interior-design-strategy-with-case-study_TANIA-BERA.ppt
sustainable-interior-design-strategy-with-case-study_TANIA-BERA.pptsustainable-interior-design-strategy-with-case-study_TANIA-BERA.ppt
sustainable-interior-design-strategy-with-case-study_TANIA-BERA.ppt
 
Mother Courage and Her Children Layouts.pdf
Mother Courage and Her Children Layouts.pdfMother Courage and Her Children Layouts.pdf
Mother Courage and Her Children Layouts.pdf
 
ASIF KHAN-LANDSCAPE-DESIGN PORTFOLIO 2024 f.pdf
ASIF KHAN-LANDSCAPE-DESIGN PORTFOLIO 2024 f.pdfASIF KHAN-LANDSCAPE-DESIGN PORTFOLIO 2024 f.pdf
ASIF KHAN-LANDSCAPE-DESIGN PORTFOLIO 2024 f.pdf
 
Land Management and sourcing land for sustainable Urban Development.
Land Management and sourcing land for sustainable Urban Development.Land Management and sourcing land for sustainable Urban Development.
Land Management and sourcing land for sustainable Urban Development.
 
Spoleto Festival23 Hang and Cable Layouts.pdf
Spoleto Festival23 Hang and Cable Layouts.pdfSpoleto Festival23 Hang and Cable Layouts.pdf
Spoleto Festival23 Hang and Cable Layouts.pdf
 
Heathers Symbols for Gerald Freedman Theatre.pdf
Heathers Symbols for Gerald Freedman Theatre.pdfHeathers Symbols for Gerald Freedman Theatre.pdf
Heathers Symbols for Gerald Freedman Theatre.pdf
 
Studio Surfaced - Textile Design Studio based out of Delhi NCR
Studio Surfaced - Textile Design Studio based out of Delhi NCRStudio Surfaced - Textile Design Studio based out of Delhi NCR
Studio Surfaced - Textile Design Studio based out of Delhi NCR
 
Ordering Principles in Architecture-MaHi.pptx
Ordering Principles in Architecture-MaHi.pptxOrdering Principles in Architecture-MaHi.pptx
Ordering Principles in Architecture-MaHi.pptx
 
homescreen revamp homescreen revamphomescreen revamp
homescreen revamp homescreen revamphomescreen revamphomescreen revamp homescreen revamphomescreen revamp
homescreen revamp homescreen revamphomescreen revamp
 
urban design case study of old city Jodhpur
urban design case study of  old city Jodhpururban design case study of  old city Jodhpur
urban design case study of old city Jodhpur
 
Communicative Grammar English .pnnnnkkptx
Communicative Grammar English .pnnnnkkptxCommunicative Grammar English .pnnnnkkptx
Communicative Grammar English .pnnnnkkptx
 
acervus process book no cover--character
acervus process book no cover--characteracervus process book no cover--character
acervus process book no cover--character
 
Portfolio of designs and Visualization Samuel Jayeola
Portfolio of designs and Visualization Samuel JayeolaPortfolio of designs and Visualization Samuel Jayeola
Portfolio of designs and Visualization Samuel Jayeola
 
Mother Courage and Her Children Shop Order.pdf
Mother Courage and Her Children Shop Order.pdfMother Courage and Her Children Shop Order.pdf
Mother Courage and Her Children Shop Order.pdf
 
impact of packaging on consumer buying behaviour project report pdf.pdf
impact of packaging on consumer buying behaviour project  report pdf.pdfimpact of packaging on consumer buying behaviour project  report pdf.pdf
impact of packaging on consumer buying behaviour project report pdf.pdf
 
Mother Courage and Her Children Layouts.pdf
Mother Courage and Her Children Layouts.pdfMother Courage and Her Children Layouts.pdf
Mother Courage and Her Children Layouts.pdf
 
PAGE ONE PAGE TWO PAGE THREE PAGE FOUR.pdf
PAGE ONE PAGE TWO PAGE THREE PAGE FOUR.pdfPAGE ONE PAGE TWO PAGE THREE PAGE FOUR.pdf
PAGE ONE PAGE TWO PAGE THREE PAGE FOUR.pdf
 

Creating Beautiful, Accessible, and User-Friendly Forms