phonydev.com

3 special attributes for inputs in the iPhone

• posted on: March 12, 2009
• filed under: UI, forms

• 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.

  name="search" or type="search"

  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.

  placeholder attribute

  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:

  

  No corrections, please

  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 autocorrect="off" attribute.

  Same for capitalization. If you think your users don’t need auto-capitalization in this particular input (username input for example), set the attribute autocapitalize="off"

  The End

  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.

No comments yet

Leave a comment