Autocapitalize attribute on input element (used for iOS) breaks validation

Question

As can be seen here, Safari and Safari for the iPhone support all HTML elements, including deprecated elements and even some proprietary elements that were never part of any W3C specifications.

It's actually very useful including autocapitalize in the 'email' and 'website' fields in forms, as there's nothing so annoying as having to unselect the SHIFT key when filling in either of those two inputs. Doing this is trivial as all you need to do is add the autocapitalize=off attribute to the corresponding input, e.g.:

<label for="email">E-mail</label>
<input type="email" name="email" placeholder="[email protected]" autocapitalize="off" title="Enter your e-mail address" class="required email" id="email">

Both the iPhone and the iPad perfectly match keyboards to the attributes attached to the input element in forms. Unfortunately, this markup seems to break validation, with W3C responding with 'Attribute autocapitalize not allowed on element input at this point' when the above is set.

I suppose this isn't something to die for, but is there a way of including the attributes without breaking validation? Maybe I've got something wrong here.

Annelleannemarie

No. W3C doesn't recognize the attribute because it is proprietary. There is no way to keep it from failing validation. – Foamflower

Note: autocapitalize="off" is now depricated. They now recommend autocapitalize="none". – Frenchify

Nowadays, there also is the autocomplete HTML5 attribute. As far as I tested, it seems to solve this issue for iOS. See the w3c.org recommendation. – Shipwright

Answer 1

The comment by ughoavgfhw fully answers the question: as W3C specs stand at present, you can't include the autocapitalize attribute in your forms without breaking validation, so it's a case of weighing that inconvenience against that of users having to fumble through your forms clicking on the SHIFTkey on iOS.

I think this is one of those rare cases (inline styles being another) where it makes sense to put up with errors on one page, so long as they aren't symptomatic of anything gone wrong but just of W3C being a bit slow on the uptake.

Annelleannemarie

You could add the autocapitalize attribute in javascript. This is utterly pointless, as the resulting DOM is absolutely identical, but the W3C validator won't run javascript, so it'll show as valid there. More work for the same result: I don't recommend it. But if passing validation is absolutely essential for some reason, it's an option. – Frenchify

A bit slow... four years later. – Putput

Answer 2

couldnt you just add a class, to the input element. And reference that class with attribute, text-transform:lowercase ?

Unquestionable

No, you shouldn't do this here. CSS is presentational - it is changing the way the text looks, not the text itself. If you use uppercase, lowercase, etc to visually change text but then read that value with javascript it will still read it from the DOM as it was initially written - in this case that means the DOM element is still capitalized. See example here: codepen.io/chrisboon27/pen/pqFHr – Aminopyrine