Here are 3 quick tips on how to make your inputs (I mean
<input type="text" />) better and more usable when your page is viewed in the iPhone. These are trivial to implement as they only require using some special attributes.
When you tap an input box, the keyboard comes up. Right next to the [space] key there is a button that submits the form you’re currently filling out. This button by default says “Go”.
But when you set the
name attribute of the input to have the value “search”, then the button says “Search”. Pretty neat.
Sometimes you may not be able to rename your input, because there are already too many dependencies on the backend. In this case you may use “search” as value of the
type attribute. I don’t think this is a valid standards-compliant value for the
type attribute, but… oh, well.
This attribute helps you present something like labels for the inputs but without taking page real estate, because they are displayed inside the input.
So if you add this to your input:
placeholder="type here", the input will look like:
You’ve noticed already the spell-checker when you fill-out forms (and probably have been at least once pissed off by the corrections). To turn it off simply set the
Same for capitalization. If you think your users don’t need auto-capitalization in this particular input (username input for example), set the attribute
At the end, this is what your code will look like if you implement all the tips.
<form><input type="text" name="search" autocorrect="off" autocapitalize="off" placeholder="type here" /></form>
And here’s a demo page.