html input attributes (2 Part Series)
- 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.
Note: These attributes only apply to input tags with the type text, email or textarea tags.
This attribute when set to none stops browsers trying to help the user by auto-capitalizing words.
<input type="text" autocapitalize="none" />
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" />
This attribute when set to false stops browsers highlighting when a word has been misspelt with a underline.
<input type="text" spellcheck="false" />
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>