7 things you didn't know about <input>

The element is one of the most versatile, but it does so much you might not know some of the more esoteric attributes available to you. This talk shows off 7 attributes of the element and their uses that you might not have known about.

--
Links:

HTML attributes to improve your users' two factor authentication experience: https://twil.io/2fa-attrs

Transcript

1. 7 THINGS YOU 7 THINGS YOU 7 THINGS YOU DIDN'T KNOW DIDN'T KNOW DIDN'T KNOW ABOUT <INPUT> ABOUT <INPUT> ABOUT <INPUT> @philnash
2. Phil Nash @philnash http://philna.sh philnash@twilio.com
3. I I I ❤ HTML HTML HTML @philnash
4. THE POWER OF AN THE POWER OF AN THE POWER OF AN ELEMENT ELEMENT ELEMENT @philnash
5. THE POWER OF AN THE POWER OF AN THE POWER OF AN ATTRIBUTE ATTRIBUTE ATTRIBUTE @philnash
6. THE MANY TYPES OF THE MANY TYPES OF THE MANY TYPES OF THE <INPUT> THE <INPUT> THE <INPUT> ELEMENT ELEMENT ELEMENT @philnash
7. The <input> types text •••••••• 01/05/2020 No file chosen Choose file Reset Submit @philnash
8. 7 THINGS YOU 7 THINGS YOU 7 THINGS YOU DIDN'T KNOW DIDN'T KNOW DIDN'T KNOW ABOUT <INPUT> ABOUT <INPUT> ABOUT <INPUT> @philnash
9. 1. 1. 1. INPUTMODE INPUTMODE INPUTMODE @philnash
10. IT'S ABOUT IT'S ABOUT IT'S ABOUT KEYBOARDS KEYBOARDS KEYBOARDS @philnash
11. DEMO DEMO DEMO @philnash
12. KEYBOARDS !== DATA KEYBOARDS !== DATA KEYBOARDS !== DATA @philnash
13. 2. 2. 2. PATTERN PATTERN PATTERN @philnash
14. IT'S ABOUT IT'S ABOUT IT'S ABOUT VALIDATION VALIDATION VALIDATION BUT ALSO BUT ALSO BUT ALSO KEYBOARDS KEYBOARDS KEYBOARDS @philnash
15. pattern <input pattern="[0-9]*"> @philnash
16. 3. 3. 3. READONLY READONLY READONLY @philnash
17. IT'S ABOUT NO IT'S ABOUT NO IT'S ABOUT NO KEYBOARDS KEYBOARDS KEYBOARDS @philnash
18. readonly Can't touch this @philnash
19. readonly Consider instead of disabled Two pseudoclasses: :read-only and :read-write @philnash
20. 4. 4. 4. CAPTURE CAPTURE CAPTURE @philnash
21. IT'S ABOUT THE IT'S ABOUT THE IT'S ABOUT THE CAMERA CAMERA CAMERA @philnash
22. DEMO DEMO DEMO @philnash
23. 5. 5. 5. SPELLCHECK SPELLCHECK SPELLCHECK @philnash
24. IT'S ABOUT TURNING IT'S ABOUT TURNING IT'S ABOUT TURNING IT OFF IT OFF IT OFF @philnash
25. DEMO DEMO DEMO @philnash
26. 6. 6. 6. AUTOCAPITALIZE AUTOCAPITALIZE AUTOCAPITALIZE @philnash
27. IT'S ABOUT NOT IT'S ABOUT NOT IT'S ABOUT NOT PRESSING PRESSING PRESSING SHIFT SHIFT SHIFT @philnash
28. DEMO DEMO DEMO @philnash
29. @philnash
30. 7. 7. 7. AUTOCOMPLETE AUTOCOMPLETE AUTOCOMPLETE @philnash
31. IT'S MY FAVOURITE IT'S MY FAVOURITE IT'S MY FAVOURITE @philnash
32. autocomplete name, honorific-prefix, given-name, additional-name, family-name, honorific-suffix, nickname, email, username, new-password, current-password, one-time-code, organization-title, organization, street-address, address-line1, address-line2, address-line3, address-level4, address-level3, address-level2, address-level1, country, country-name, postal-code, cc-name, cc-given-name, cc- additional-name, cc-family-name, cc-number, cc-exp, cc-exp- month, cc-exp-year, cc-csc, cc-type, transaction-currency, transaction-amount, language, bday, bday-day, bday-month, bday- year, sex, tel, tel-country-code, tel-national, tel-area-code, tel-local, tel-extension, impp, url, photo @philnash
33. autocomplete name, honorific-prefix, given-name, additional-name, family-name, honorific-suffix, nickname, email, username, new-password, current-password, one-time-code, organization-title, organization, street-address, address-line1, address-line2, address-line3, address-level4, address-level3, address-level2, address-level1, country, country-name, postal-code, cc-name, cc-given-name, cc- additional-name, cc-family-name, cc-number, cc-exp, cc-exp- month, cc-exp-year, cc-csc, cc-type, transaction-currency, transaction-amount, language, bday, bday-day, bday-month, bday- year, sex, tel, tel-country-code, tel-national, tel-area-code, tel-local, tel-extension, impp, url, photo @philnash
34. autocomplete <input type="text" autocomplete="shipping street-address"> <input type="text" autocomplete="billing street-address"> @philnash
35. autocomplete name, honorific-prefix, given-name, additional-name, family-name, honorific-suffix, nickname, email, username, new-password, current-password, one-time-code, organization-title, organization, street-address, address-line1, address-line2, address-line3, address-level4, address-level3, address-level2, address-level1, country, country-name, postal-code, cc-name, cc-given-name, cc- additional-name, cc-family-name, cc-number, cc-exp, cc-exp- month, cc-exp-year, cc-csc, cc-type, transaction-currency, transaction-amount, language, bday, bday-day, bday-month, bday- year, sex, tel, tel-country-code, tel-national, tel-area-code, tel-local, tel-extension, impp, url, photo @philnash
36. autocomplete <input type="password" autocomplete="new-password"> @philnash
37. DEMO DEMO DEMO @philnash
38. Autocomplete and 2FA https://twil.io/2fa-attrs @philnash
39. 7 THINGS YOU 7 THINGS YOU 7 THINGS YOU DIDN'T KNOW DIDN'T KNOW DIDN'T KNOW ABOUT <INPUT> ABOUT <INPUT> ABOUT <INPUT> @philnash
40. Thanks! @philnash http://philna.sh philnash@twilio.com