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.