DEV Community

Cover image for 3 HTML5 Input Attributes To Help Mobile Users
Carl Saunders
Carl Saunders

Posted on • Updated on

3 HTML5 Input Attributes To Help Mobile Users

Do you feel the pain?πŸ˜«πŸ“±

  • When your phone changes the first letter to an uppercase straight after you've typed the first letter?
  • When your phone auto corrects the word as it thinks it spelt incorrectly?
  • When your username is marked as being misspelt with a red squiggly line?

If any of the above have frustrated you in the past, then you need to be a good citizen / developer and make sure you use these attributes within your projects.

  • autocapitalize
  • autocorrect
  • spellcheck

Note: These attributes only apply to input tags with the type text, email or textarea tags.

autocapitalize

This attribute when set to none stops browsers trying to help the user by auto-capitalizing words.

<input type="text" autocapitalize="none" />
Enter fullscreen mode Exit fullscreen mode

autocorrect

This attribute when set to off stops iOS from auto correcting words when typed into a text box. Commonly this attribute is switched off for a username field. i.e. A random string that isn't in the dictionary and shouldn't be auto corrected.

<input type="text" autocorrect="off" />
Enter fullscreen mode Exit fullscreen mode

spellcheck

This attribute when set to false stops browsers highlighting when a word has been misspelt with a underline.

<input type="text" spellcheck="false" />
Enter fullscreen mode Exit fullscreen mode

Putting It All Together

Below is an example of how a sign in form could use the attributes to make it easier for mobile users.

<form>
    <label for="username">Username</label>
    <input id="username" name="username" type="text" autocapitalize="none" autocorrect="false" spellcheck="false" />
    <label for="password">Password</label>
    <input id="password" name="password" type="password" />
    <button type="submit">Sign In</button>
</form>
Enter fullscreen mode Exit fullscreen mode

Top comments (7)

Collapse
 
abidemit profile image
Tiamiyu Sikiru Abidemi

Wonderful hints, I will definitely include them in my next project

Collapse
 
deadlybyte profile image
Carl Saunders • Edited

I've just implemented an ESLint plugin that caters for the above mentioned rules. Find out more by reading the following article dev.to/deadlybyte/eslint-plugin-fo....

The plugin can be downloaded from NPM - eslint-plugin-jsx-form.

Collapse
 
93alan profile image
Alan Montgomery

This could be a big help in future projects for me. Thank you! As you say, it's the simple things.

Collapse
 
deadlybyte profile image
Carl Saunders

Awesome, simple quick wins are the best!

Collapse
 
chiangs profile image
Stephen Chiang

I really wish the standard was to manually turn these things on rather than off...

Collapse
 
computersmiths profile image
ComputerSmiths

Thank you! This drives me nuts, and is especially evil on systems where username case is significant. (I agree that username should never be case-sensitive, but sometimes it is...)

Collapse
 
deadlybyte profile image
Carl Saunders

No worries, it's these simple changes that can make our lives that much easier.