Some of that (changing the colors of the text and whatnot) you can do with CSS styles. The rest (changing the actual text) requires that you use a scripting language like Javascript.
For the styling (changing text color, background color, etc) you can apply a style to input buttons. With pseudo classes, you can have that style change based on whether it's being targeted (in focus) or not.
For example, put this in the <head> section of your page, and test it out with an <input type="text"> element...
<style type="text/css">
input { color: #ccc; background-color: #eee; }
input:focus { color: #000; background-color: #fff; }
</style>
The style applied to input:focus will only be applied when the input class is selected. The rest of the time, it will display what is declared for all inputs, and so it looks like it's inactive.
To alter the text inside the input, you'll need to use javascript. Posting in the javascript forum might get you some more specific help, but here's a nudge in the right direction.
Get a javascript framework, like jquery, to make it easier to select elements from the DOM.
jQuery has two methods to help you. The focus() method will trigger when an item is selected, and at that point you could clear the input and alter its style. The blur() method will trigger when the focus leaves the input, and at that point you could replace the text with "E-mail" and alter the style again.
Good luck,
- Walkere
Unsolved 
