7 THINGS YOU 7 THINGS YOU 7 THINGS YOU DIDN'T KNOW DIDN'T KNOW DIDN'T KNOW ABOUT ABOUT ABOUT @philnash

Phil Nash @philnash http://philna.sh [email protected]

I I I ❤ HTML HTML HTML @philnash

THE POWER OF AN THE POWER OF AN THE POWER OF AN ELEMENT ELEMENT ELEMENT @philnash

THE POWER OF AN THE POWER OF AN THE POWER OF AN ATTRIBUTE ATTRIBUTE ATTRIBUTE @philnash

THE MANY TYPES OF THE MANY TYPES OF THE MANY TYPES OF THE THE THE ELEMENT ELEMENT ELEMENT @philnash

The types text •••••••• 01/05/2020 No file chosen Choose file Reset Submit @philnash

7 THINGS YOU 7 THINGS YOU 7 THINGS YOU DIDN'T KNOW DIDN'T KNOW DIDN'T KNOW ABOUT ABOUT ABOUT @philnash

1. 1. 1. INPUTMODE INPUTMODE INPUTMODE @philnash

IT'S ABOUT IT'S ABOUT IT'S ABOUT KEYBOARDS KEYBOARDS KEYBOARDS @philnash

DEMO DEMO DEMO @philnash

KEYBOARDS !== DATA KEYBOARDS !== DATA KEYBOARDS !== DATA @philnash

2. 2. 2. PATTERN PATTERN PATTERN @philnash

IT'S ABOUT IT'S ABOUT IT'S ABOUT VALIDATION VALIDATION VALIDATION BUT ALSO BUT ALSO BUT ALSO KEYBOARDS KEYBOARDS KEYBOARDS @philnash

pattern @philnash

3. 3. 3. READONLY READONLY READONLY @philnash

IT'S ABOUT NO IT'S ABOUT NO IT'S ABOUT NO KEYBOARDS KEYBOARDS KEYBOARDS @philnash

readonly Can't touch this @philnash

readonly Consider instead of disabled Two pseudoclasses: :read-only and :read-write @philnash

4. 4. 4. CAPTURE CAPTURE CAPTURE @philnash

IT'S ABOUT THE IT'S ABOUT THE IT'S ABOUT THE CAMERA CAMERA CAMERA @philnash

DEMO DEMO DEMO @philnash

5. 5. 5. SPELLCHECK SPELLCHECK SPELLCHECK @philnash

IT'S ABOUT TURNING IT'S ABOUT TURNING IT'S ABOUT TURNING IT OFF IT OFF IT OFF @philnash

DEMO DEMO DEMO @philnash

6. 6. 6. AUTOCAPITALIZE AUTOCAPITALIZE AUTOCAPITALIZE @philnash

IT'S ABOUT NOT IT'S ABOUT NOT IT'S ABOUT NOT PRESSING PRESSING PRESSING SHIFT SHIFT SHIFT @philnash

DEMO DEMO DEMO @philnash

@philnash

7. 7. 7. AUTOCOMPLETE AUTOCOMPLETE AUTOCOMPLETE @philnash

IT'S MY FAVOURITE IT'S MY FAVOURITE IT'S MY FAVOURITE @philnash

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

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

autocomplete @philnash

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

autocomplete @philnash

DEMO DEMO DEMO @philnash

Autocomplete and 2FA https://twil.io/2fa-attrs @philnash

7 THINGS YOU 7 THINGS YOU 7 THINGS YOU DIDN'T KNOW DIDN'T KNOW DIDN'T KNOW ABOUT ABOUT ABOUT @philnash

Thanks! @philnash http://philna.sh [email protected]