Making Html Forms Come Lively

Making Html Forms Come LivelyHere we make a little attempt to make our HTML forms come lively with pictures instead of the traditional forms. It is said that a picture is worth thousand words. Here we make a little attempt to add some fine taste to the otherwise plain vanilla HTML forms.

The Situation As of now

We have all been used to design HTML forms which carry information like Name, Email Address, Age, Postal Address, Zip code, Your Message etc. Besides these, we have little JavaScript and serverside validations that alert the user in time should the input be wrong. But not only you, there are millions of websites adopting the same practice and the user would be bit bored to see the same interface again and again. How about striking something novel?

Read On ...

We strike new

We can make use of three interesting stylesheet attributes which comes in handy to design cool HTML forms with iconified backgrounds. They are:

1. background: transparent url (This loads a thin image as a background for the element.
   
2. background-repeat: no-repeat (This makes the image to display only once)
   
3. background-position: center (Centering the image makes it convey the meaning immediately without even needing an associated text caption.

Bringing Login Screens Lively

We can extend the trick outlined in 'We strike new' by also bringing in small icons to username and password textboxes in login screens. Iconifying controls brings in a rich look and feel to the application.

Example Code Snippet: