djstevenson
commented
3 years ago Recommendations in that video:
Tick means "already doing this". Cross means "not doing this but should" N/A means "not doing this and don't feel it's right to do so"
- Don't use placeholders as labels. ✅
- Labels above inputs. ✅
- Don't have "password confirmation" fields. ✅
- Use
- Disable button once clicked. ❌ Issue #353 raised
- Style form elements larger than default. ✅
- Make outlines of input fields obvious. ✅
- Test site against Lighthouse (web.dev), e.g. for text size. ❌ Issue #351 raised
- Use browser built-in validation. N/A because currently I don't like the way browsers do these. I'm open to persuasion, though.
- Add autofocus to first input. ✅
- type="password", type="email", etc. ✅
- inputmode="numeric" for numeric keypad - ❌ Issue #352 raised
- Don't let keyboard obscure button on mobile. N/A, can't really do this in landscape view
- Use sensible "name" attributes to enable autofill. ✅
- Use different "name" attributes for passwords on sign-up vs sign-in, and for change password. Use new-password or current-password. ❌ Issue #354 raised
- Support the browser's own way of generating secure passwords. ✅
- Set "required" where needed. ✅
- Implement a 'show-password' feature. See screenshot for example code. ❌ Issue #355 raised
Closing this ticket now individual issues are raised.
There's good info at https://youtu.be/alGcULGtiv8 about sign-up/in form best practices, many of which I already follow. But not all.
Review what needs (and/or is worth) changing.