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

If you are reading article, you might also be interested in the PHP and Scriptaculous Book I have authored.

The book gives you insights about effects, drag-n-drop, slideshows, applications, auto-completion, in-place editing and more. Complete code snippets and explanations.

CHECK out and BUY the PHP and Script.aculo.us book at Packt official site

PHP and Script.aculo.us Book

http://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book