Hello, my name is Ren Provey.
I am a full stack web software developer with a deep interest
in iOS, user experience and
analytics.

HTML5 Form Fun

There is a lot of fun to be had here, but I am just going to cover the stuff that is relevant now.

Placeholder Attribute

One of the wonderful ways that HTML5 makes life easier is adding the placeholder attribute to input and textarea fields:

<input type="text" placeholder="sender@example.com" />
<textarea placeholder="Email body" ></textarea>

Required Attribute

While browsers don't actually respect this, this is a handy semantic way to hook in for your own javascript validation. Like many attributes if the required exists it is considered to be true, if not false.

<input type="text" placeholder="sender@example.com" required />
<textarea placeholder="Email body" required ></textarea>

Autofocus Attribute

You could use this, but honestly really? It either doesn't help or confuses regular users, and pisses off your power users. Trust me, your site search probably sucks.

Type Attribute

Finally the type attribute gets a little loving, and how exciting that is:

<input type="text" placeholder="text type">

<input type="search" placeholder="search type">

<input type="email" placeholder="email type">

<input type="url" placeholder="url type">

<input type="tel" placeholder="tel type">

These may not look different in a desktop browser, but by specifying the proper types, phones will change their keyboard styles to make input easy for the user.

Notes

960.gs Series

HTML5 Series

Jekyll Series

Git Series

Around the Web

Twitter: @renprovey
LinkedIn: Ren Provey
GitHub: ren
Work: CityBits, the guide to all the bits of your trip that you'll rave about to your friends.

Places worth visiting

David Eisinger
Memorly