leereamsnyder + forms   256

Why the GOV.UK Design System team changed the input type for numbers - Technology in government
Out: <input type=”number”>
In: <input type=”text” inputmode=”numeric” pattern="[0-9]*">
accessibility  forms  webdesign  html  usability 
4 weeks ago by leereamsnyder
Autofill on Browsers: A Deep Dive
Covers both credit cards and addresses (which seem to work pretty well)
webdesign  forms  usability  browsers  html 
5 weeks ago by leereamsnyder
Listen To Me And Not Google: HeydonWorks
“We have to stop confusing the excesses of capitalism with the hallmarks of quality.”
forms  google  usability  css  webdesign 
11 weeks ago by leereamsnyder
You probably don’t need input type=“number”
Did not know about that scroll behavior. I'm more and more against this
forms  usability  webdesign  validation 
march 2019 by leereamsnyder
Bad Practices on Birthdate Form Fields
Use 3 text fields (not dropdown): Month, Day, Year
design  forms  usability  webdesign  ux 
november 2018 by leereamsnyder
Finger-friendly numerical inputs with `inputmode` | CSS-Tricks
The auto-validation for type="number" inputs has tripped me up before
css  accessibility  usability  forms  webdesign  browsers 
april 2018 by leereamsnyder
JAMstack Comments | CSS-Tricks
Netlify keeps looking nicer and nicer
cms  hosting  forms 
april 2018 by leereamsnyder
Web Form Conundrum: disabled or readonly? | Aaron Gustafson
“TL;DR: If you really need it, which you probably don’t, readonly is what you want.”
forms  webdesign  javascript  usability  security 
november 2017 by leereamsnyder
Let them paste passwords - NCSC Site
No one knows where the advice to not allow pasting came from!
javascript  security  password  forms  usability 
january 2017 by leereamsnyder
The 'Credit Card Number' Field Must Allow and Auto-Format Spaces (80% Don't) - Articles - Baymard Institute
“Our test sessions also revealed that allowing users to type spaces and auto-formatting their card number with spaces can greatly improve users’ accuracy when typing their credit card number, and help them to more easily check that their typing is valid.”
ux  forms  usability  webdesign 
january 2017 by leereamsnyder
Alternatives to Placeholder Text
“In general, forms are usually more usable when placeholder text is omitted.”
forms  usability  webdesign 
december 2016 by leereamsnyder
Usability Testing of Inline Form Validation: 40% Don't Have It, 20% Get It Wrong - Articles - Baymard Institute
“During our end-user testing we consistently observe two pitfalls that can end up making live inline validation more frustrating than helpful to the user:

Premature Inline Validation – the user’s input is marked as invalid before they have finished typing, essentially reprimanding the user for mistakes they haven’t made and prompting them to look for errors that aren’t there.
Outdated Error Messages – error messages aren’t updated and removed “live”, as the user edits their input, resulting in outdated error messages being displayed even though the user has actually fixed the problem.”
webdesign  forms  ux  usability 
november 2016 by leereamsnyder
I Wanted To Type a Number | Filament Group, Inc., Boston, MA
If you do NOT need negative numbers or decimals, this library smoothes over various differences, spec gaps, and usability gaffes in numeric keyboard implementations. This lets you use numeric keyboards where the spec doesn't strictly endorse it, like zip codes and credit card numbers
forms  ios  webdesign  android  javascript  usability 
september 2016 by leereamsnyder
Perfect for static sites: you make a form, submit to them, and they email you the results
cms  forms  tools 
august 2016 by leereamsnyder
ignore the code: Input Masks: Violating User Expectations
“When designing forms, there’s a pretty deep chasm between the needs of the developer, and the needs of the user. Developers want structured, normalized data. Users want to enter data in whatever format suits them best.”

“Because there are no standardized, widely accepted behaviors for input masks, it’s best to avoid «magical» behaviour (e.g. automatically entering characters that the user did not type), or, if you do need magical behavior, also account for user behavior that does not expect magical behavior.”
usability  webdesign  forms 
june 2016 by leereamsnyder
Algolia Places
Slick address or mapping text input
maps  forms  javascript  usability 
june 2016 by leereamsnyder
CSS Pseudo // Speaker Deck
Didn't know about some of the form ones like ":in-range"
css  forms  layout 
april 2016 by leereamsnyder
A safe way to toggle passwords by Shell Bryson on CodePen
If you toggle between type="password|text", make sure it's "password" when you submit the form
security  forms  ux  usability  browsers  javascript  html 
march 2016 by leereamsnyder
Which Input When? — Morgan Carter — Product Designer
Each input type has a very specific use-case, and using the wrong input can be confusing for your users.
usability  forms  webdesign  ux 
november 2015 by leereamsnyder
Algorithmic password strength instead of requesting "3 symbols" or whatever
security  javascript  password  forms  ux 
october 2015 by leereamsnyder
Styling & Customizing File Inputs the Smart Way | Codrops
solid point: for file inputs, use a LABEL and style that instead of jumping through all the hoops required to format the input
css  webdesign  forms  javascript 
september 2015 by leereamsnyder
Dropdown/combo box for jQuery and zepto
javascript  forms  jquery  ui  webdesign  zepto 
july 2015 by leereamsnyder
LukeW | Dropdowns Should be the UI of Last Resort
What the title says. Consider steppers, radio groups, expandables, or other options before dropdowns
ux  forms  usability  design  webdesign 
july 2015 by leereamsnyder
Adactio: Journal—100 words 033
use the :checked trick, but flexbox lets you move elements around regardless of source order
css  webdesign  layout  forms 
april 2015 by leereamsnyder
» Two pretty-good techniques for styling tricky form elements Cloud Four Blog
Some reasonable solutions to freshen up elements and that don't require much scripting
css  forms  browsers  webdesign 
september 2014 by leereamsnyder
« earlier      
per page:    204080120160

related tags

a11y  accessibility  addons  ajax  android  animation  apple  applications  blogs  bootstrap  browsers  business  buttons  calendar  cheatsheet  cms  color  contracts  copywriting  css  css-tricks  css3  data  design  development  documentation  ee  eecms  email  expressionengine  eyetracking  firefox  formatting  forms  framework  free  freelance  funny  gallery  generator  gmail  google  graphics  grid  hacks  hosting  howto  html  html5  ia  icons  ie6  ie7  images  infoporn  inspiration  interesting  internet  ios  ipad  iphone  javascript  jquery  keyboards  layout  list  logic  maps  marketing  menu  microsoft  mobile  modules  navigation  password  patterns  performance  phone  php  plugins  polyfills  portfolio  privacy  productivity  programming  react  reference  regex  research  resources  rwd  safari  search  security  signup  software  statamic  svg  tables  tags  templates  themes  tips  tools  tooltip  toread  tostudy  totry  trends  troubleshooting  tutorials  twitter  typography  ui  usability  ux  validation  via:popular  WAI-ARIA  web  webdesign  webkit  webtools  widgets  wordpress  xhtml  zepto 

Copy this bookmark: