The theories and practical skills nowadays in web designing is quite different from what I started with 10 years ago. Today I am going to talk about sometime that’s surprisingly not being changed much. Let’s look at a picture below:
Familiar, right? Yes, we can still see a lot of this style login form around this infinite triple-w world. I won’t say it’s a bad thing, but since the space on your page is very limited and valuable (unless you don’t have contents to put on. 
). How about we want to save some space? However we can’t just delete the “username” and “password” label in front or else you will lose your users the other day when you wake up.
So what’s the alternate option? Well, let’s play some CSS and basic mouse action.
We can see an example before we get started. Let’s look at Apple’s MobileMe website.
It’s a good idea that show the users what those text fields are using the text fields themselves. The following code here are showing that if there is nothing input by the user in the text field, it will have a gray initial value, that’s, “Gray Text” in my example. Once the user click in the text field and ready to type in their own value, the “Gray Text” will disappear and replaced by what the user type in. However, if the user suddenly decide to move out before the type in anything and click somewhere else on the website, the text field will be given back the value “Gray Text”.
<html>
<head>
<style type=”text/css”>
.gray_font {color:#666;}
.black_font {color:#000;}
</style>
</head>
<body>
<input type=”text” class=”gray_font” value=”Gray Text” onclick=”if(this.value==’Gray Text’){this.value=”;this.className=’black_font’}” onblur=”if(this.value==”){this.value=’Gray Text’;this.className=’gray_font’}” />
</body>
</html>
What do you think? This is just an simple example. Use your creativity, you can probably use an image as your background.