• Forms without Labels

  Date: Aug 29, 2012  |  Categories: Html  |  Written By: Mike Ballan  

So as the web is becoming even more smaller (Mobiles) I’m finding i’m having to fit more and more form fields into a page and one thing that has always bugged me is labels so with the below code you no longer have to worry about have to have a label and form field..!

The example is for a form field titled “First Name” and what the extra code will do is add in the label to the field and once the user clicks on the field it will be removed so they can fill it in and if they don’t add anything it will revert back to the label.

<input id="first_name" type="text" onblur="if(this.value == '') { this.value = 'First Name'; }"
onfocus="if(this.value == 'First Name') { this.value=''; }" value="First Name" name="first_name">