7 things you didn't know about <input>

8ec1383b240b5ba15ffb9743fceb3c0e?s=47 Phil Nash
February 05, 2020

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

8ec1383b240b5ba15ffb9743fceb3c0e?s=128

Phil Nash

February 05, 2020
Tweet

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