UI Designing with CSS: Example login form

After the dot com bubble, start-ups are growing like mushrooms everywhere. And, 80% of these being either in Consumer Internet or Mobile.

So what do these web-based start-ups focus on mostly?

User Experience. Users have become powerful and above all decision makers. If users like the service, UI, application they will support it else they will kill them.

Talking about user experience, Its very important to understand what would a user appreciate? I will explain this taking a simple example of login form.

A simple login form would consits of normal buttons and a table.

Enter Name: <input type=”text”>

Enter Email: <input type=”text”>

<input type=”button” value=”Submit”>

No big deal. A simple two text boxes and a submit button. Simple?

Okay, so why not make small yet sweet changes to this code?

Through adding CSS{Cascading Style Sheets}!!!

Lets add some style on mouseover and mouseout operations.

<input type=”button” class=”Button” onmouseover=”this.className=’ButtonHover’” onmouseout=’Button’”>

In the style section just add the following piece of information.

Button {
 background:green;
}

ButtonHover{
Background:lightgreen;
}

This would add the following functionality to our code.

Whenever the mouse is moved over the button the background is set to lightgreen and whenever removed again back to green.

Though there is no big deal here, the thing that needs to be taken care is that small useful things matter and count.

Cheerz
Sridhar

---

Possibly related posts: (automatically generated)

• Making a POST with HTTP::Lite