Skip to main content

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:


Popular posts from this blog

Google NCR

Google NCRMost of you would be knowing about this trick in navigating to Google generic website. But I just came to know only a few days before and hence thought I would share the information with others too.
Whenever you type, Google automatically tries to redirect you to your country-specific website. For me, it always redirects to (Google India). But when we specifically want to navigate to Google Generic website for some reason, there are two ways to accomplish the same.Click the 'Go to' link at the bottom of the webpage that is displayed from prevent this redundant click, you can opt to type which would prevent the redirect from happening. The NCR stands for No Country Redirect. There is a brief discussion about this NCR over this forum.You may also like to check out Google help documentation regarding the country redirections from here.

Elegant 'MailTo' Replacement

Elegant 'MailTo' Replacement

MailTo tags have become a bane to all websites since spammers run spam robots which crawl the web to capture the email addresses, add to their catalogs and send spams to them. I just thought of sharing with others a simple JavaScript function which would trigger open the default email client instead of having mailto: embedded in the HTML Page.

Just have the following function included in your webpage

<script language='Javascript'>
function WriteMailTo(user,domain)
location.replace ('mailto:'+user+'@'+domain);

And whereever you want to invoke the mailto, just called WriteMailTo('user','') and the user's default email client should be launching (if configured) without any hassles.

Contacts import utility from Web2Project to Addressbook

I have been using Web2Project for planning my personal and professional tasks for a few years now. Now I have bifurcated the tools into the following:

Project PierAddress Book The only issue I had was to import my addressbook from Web2Project to AB. PP is a different animal. It does not serve as a comprehensive candidate for addressbook and hence I needed this bifurcation. 
I wrote up a following simple script to import the contacts to AB. The pre-requisite for this script is to hop on to PhpMyAdmin, export the contacts as a PHP array and then  modify the path in our import script to whatever you downloaded from PhpMyAdmin.
Our import script would explode the entries as SQL scripts into the browser window. Copy them and execute into PhpMyAdmin AB database to have the contacts imported.

Script URL: