This blog has moved here: woorkup.com | FOLLOW ME ON TWITTER @woork
Thursday, July 17, 2008

Useful tips to enrich your HTML Forms

In the past months I already dedicated several posts about forms design and usability. In this post I want to share some simple tips useful to enrich your forms with various elements such as suggest messages, autosuggest feature instead of <select> tag, simple check during data input and how to show hidden fields selecting a radio element option.

1. Suggest messages
This tips it's useful to display additional info when you select a field with the cursor: then a message appears on the right of the field with a short description about the field "properties":


I used this HTML code:

<label for="email" >Email</label>
<input type="text" id="email" onFocus="javascript:toggleMsg('msg-1')" onBlur="javascript:toggleMsg('msg-1')" maxlength="20"/>
<span id="msg-1" class="msg" style="visibility:hidden;">Required to log-in</span>

<label for="psw">Password</label>
<input type="text" id="psw" onFocus="javascript:toggleMsg('msg-2')" onBlur="javascript:toggleMsg('msg-2')" maxlength="20"/>
<span id="msg-2" class="msg" style="visibility:hidden;">Use a min 6 chars long password!</span>


...and this simple JavaScript function which set the CSS visibility property for the span tag which contains the message (msg-1 and msg-2) to visible or hidden:

<script type="text/javascript">
function toggleMsg(idElement){
element = document.getElementById(idElement);
if(element.style.visibility!='hidden'){
element.style.visibility='hidden';
} else {
element.style.visibility='visible';
}
}
</script>

For the source code take a look at the wollowing link:

Download source code


If you want add some nice effect you can use a JavaScript framework such as mootools or Scriptaculous to add fade-in and fade-out effects to show/hide the form messages. Take a look at this link for a post about this topic: Improve form usability with auto messages. If you need some inspiration about how to design these kinds of messages using CSS, I suggest you to take a look at this other post I published about Css message box collection to find some ideas.


2. Autosuggest instead of list (<select> tag)
I am a big fan of autosuggest effect. It’s really simple to implement using different ways (JavaScript frameworks or, simply, some lines of hand-written code). You can think to use it instead of a <list> tag in your Form, for example in a field which users can use to insert their country:


When an user starts typing the name of his country, below the input field, it will appears a layer with some suggestions related to the inserted string. In the past month I added some post about how to implement a simple autosuggest feature using PHP and Coldfusion. I also prepared a simple PHP autosuggest component which you can reuse in your project simply changing some properties to implement this tutorial:

PHP components: Autosuggest
Search with autosuggest feature (PHP)
Search with autosuggest feature (Coldfusion)


3. Simple check during data input
A simple example could be a Twitter-like chars counter which decreases, from max chars number available in the field to zero, while you type something into the input field. In this example I set the max chars available to 20:

... in the picture aboe 20-5 is equal to max chars (20) - current string lenght (woork = 5).
I wrote this simple HTML code:

<label for="text">Write something here</label>
<input type="input" id="text" onKeyUp="javascript:countChars('counter_number')"/> <spam id="counter_number">20</spam>

...and I implemented the counter function using few lines of JavaScript code:

<script type="text/javascript">
function countChars(idElement){
max_chars = 20;
counter = document.getElementById(idElement);
field = document.getElementById('text').value;
field_length = field.length;

// Calculate remaining chars
remaining_chars = max_chars-field_length;
// Update the counter on the page
counter.innerHTML = remaining_chars;
}
</script>


You can also change the counter font color to red when the counter is near to zero (for example when remain less than five chars) simply add this line of code after the remaining_chars var of the previous code:

if(remaining_chars<=5){
counter.style.color="#CC0000";
}

... and the result is:


Download source code


4. Showing hidden fields selecting a radio element option
This is anoter tips very simple to implement. You can use it to display hidden fields when an user click on a radio/check button option which requires additional information. In this example I used a radio group with two option with a request to subscribe to a mailing list:



...so when an user select "yes" it appears the following input field to add the e-mail:

HTML code is:

<!-- Radio elements -->
<input type=
"radio" name="newsletter" value="1" id="newsletter-1" onclick="javascript:toggle(1)" /><label for="newsletter-1">Yes</label>
<input type="radio" name="newsletter" value="1" id="newsletter-0" onclick="javascript:toggle(0)" /><label for="newsletter-2">No</label>

<!-- Hidden layer -->
<div id="email-field" style="display:none;">
<input type="text" id="email" />
Add your Email
</div>


... and a simple JavaScript function to show/hide the hidden layer can be written in this way:

<script type="text/javascript">
function toggle(status){
idStatus = status;
element =document.getElementById('email-field');
if(idStatus==0){
element.style.display='none';
} else {
element.style.display='block';
}
}
</script>


Download source code

It's all! I hope you can find all these simple tips interesting and find new inspiration for your web projects.

blog comments powered by Disqus
Anonymous said...

Great post as usual!

Lincoln said...

Really great tips, i always look forward to your tips on a daily basis and have learned so much from reading them.

Thanks :)

Anonymous said...

Very nice small tips.

Umut said...

Great tips. Small but powerful. Thanks.

pryn said...

Very nice tip.
Thank for sharing,good article.

furtive said...

Great post, but PLEASE, don't use "javascript:" in your event attributes. They use of "javascript:" should be reserved for the address bar and that's it.

Carlos Fenollosa said...

A very useful post, I will definitely try some of these techniques. However, there is one thing that I don't like: showing and hiding elements of the interface. All elements should always be visible, so that the interface is predictable.

Thanks for the tips!

Anonymous said...

Gotta love the typo you have in the example source to "Simple check during data input". I wonder what else I could use a < spam > tag for :D .
Keep it up!

Levi said...

You've misspelled "Length" in some of your images.

Also, for cleaner HTML/CSS you shouldn't use the style attribute on the little note box, using a class and some CSS would make more sense, that way the message will still show up with the style disabled.

tejasluvs said...

Yes pal, you are right this post is wonderful, Thanks.

jbj said...

Very nice tutorial as usual, thanks for sharing :)
If your interested in using Mootools to enhance your html forms, you can read the post I wrote here.

Ram said...

Really Nice Post. Please post more....

Neon said...

Yeah someone mentioned MooTools, it seems strange not to use a Javascript framework to do some of these effects, especially with something like Scriptaculous you could make your tip boxes fade in.

Also you don't seem to use the Javascript function to limit the users amount of entry, just count them. It would seem strange to tell someone how many characters they have left, let them go over the limit and then validate it on post.

I do read the site quite a bit mind, and it's great, so keep up the good work :)

Chandoo said...

very neat tips, bite sized, easy to understand and implement...

Also...just wanted to tell you that your add to facebook link on the top of post looks broken...

alialtugkoca said...

every web developers needs ,thanks

Lam Duy Nguyen said...

great tut, great job, thank for sharing :D

Adam Whiles said...

Great tips, They will come in handy when I redesign my theme for wordpress.

Anonymous said...

Great post :)

MonkeyMajiks said...

@Neon

It would actually be bad usability to stop the user exceeding the required amount of characters.

When a user copies and pastes more than the allowed text in to a field it is helpful for them to see how much over the limit they are and make the adjustments themselves, this stops them loosing additional data they would otherwise have to type out again.

Hence the reason Twitter works the way it does.

cage said...

nice trip!! remind user remaining chars when counter less to 5. But it will not recover to original text color when i backspace chars to large to 5.

if(remaining_chars<=5) counter.style.color="#CC0000";
else
counter.style.color="#999999";

I think this only with your mind
^^"

Anonymous said...

Great!! :)

M said...

Good tip. I've bookmarked this for future reference.

Farid Abdulhadi said...

Great set of tips.
Making a form user-friendly is very important. I hope people implement these tips on their web sites.

Thanks for a nice post.

Anonymous said...

Nice Idea.

However, the implementation can be better - use DOM, which can reduce the number of HTML element, make the form 's HTML simpler and have better accessibility.

xanfran said...

Very good ideas :)

Max said...

Good stuff, makes you think how you can spice up your contact forms.

helpfulltips said...

nice stuff, helpful and Very useful and important for all bloggers.I managed to create health related site hope you like it

Anonymous said...

This is just what I was looking for. Now to implant it into my site www.pricelessweddings.com.au which is oscommerce. Does anyone know how to get this going in PHP as my knowledge is very limited in that field

los angeles web design said...

Very useful tips, thanks for sharing and looking forward for more tips from your blog. Thanks again and more power!

-richard

Juan Caio Avalos said...

Incredible, you are a genius!!!

Csaba said...

Exciting tutorial, very well written. Thank you.

  • Twitter Follow woork on Twitter
  • RSS Feed Subscribe to stay up to date
  • Podcast Coming soon...
  • 0 delicious lovers save
Share your links. Do you want to suggest any interesting link about web design or tech news? Submit your link.
Submit a News