HTML Form input boxes clear when clicked

Here's a quick tip on clearing the default text from text boxes in a form.

First of all you can add the default text to a input box by declaring a value:

<input type="text" value="Enter Name" />

Now we can add an 'onfocus' event that will delete this value when the box is clicked, essentially by replacing it with nothing.

<input type="text" value="Enter Name" onfocus="if ( this.value=='Enter Name' ) { this.value = ''; }"/>

note: where it states the second this.value they're two single quotes '  ' and the statement is wrapped in double quotes. The two single quotes with no space between is for the value zero.

So now the text box appears with the tag 'Enter Name' inside it but when the user clicks the box the text disappears. This also works really well for search boxes eg- 'Search my site'.

Div containing floating divs collapses

After about an hour of trying to work out why the spacing between my posts was working in Internet Explorer but not in Firefox, I stumbled upon a common issue.

If a Div contains floating divs it will not resize the height to contain the floating divs. So adding padding to the containg div has no effect. This is how floating divs are supposed to behave. IE ignores this and contains them anyway, but most other modern browsers follow the rules and let the inner divs float 'uncontained'.

The simple solution to this problem is to include and empty div after the floating divs and within the container. This empty div must not have a floating property and must be set to clear the floating divs. This gives the container div something to wrap around. The code will look something like this:

<div class="container">

<div class="float-left"> </div>

<div class="float-right"> </div>

<div style="clear:both;"> </div>

</div>

So the magic bit is "<div style="clear:both;"> </div>" just insert it just before you close the container div.