Adding tabs to a web form can greatly enhance the user experience of visitors to your website and ultimately increase usage on your lengthy or confusing web forms. Read on to see how it can be done.
As you will see from this tutorial, it is really not that difficult to add tabs to a web form. It does not matter how many tabs there are or what the kind of content lies within the tabs. Tabs can be styled to look like the one in the image on the left or any other styles you may choose.
Our tab content enabled web form in this case is going to be a simple web form with minimal styling. I am simply going to focus on the important components that make up the tabbed web form and do more explaining rather than focusing on witing too much code seeing I have provided the full tabs web form source code at the end of this tutorial for you to download and use. This method here contrasts with the technique used to create multi-page web forms.
The HTML Code
Below this you need to add a div container <DIV> to hold all the form content. Within that div container, you will insert the form tags <FORM> that wraps the form elements. Remember that you only need one form tag regardless of the number of web form pages.
Within the form tags, you will create other child div containers. Each of these div containers will represent a single page within a single tab. The unique id used in the showMe function above is attached to a single div container here as this is the container that will be activated when the corresponding tab is clicked. You can group all the form elements in the div containers as you see fit.
The CSS Code
The CSS code for the tab web form is rather simple. There is a shared class attribute for all the content child div containers called "content". This is set to hide all the div containers when the page loads. The reason being that we want only one div container showing at a time depending on which tab is active.
There is a CSS id element labeled #tabwrapper. This is used to set the bounds of the web form to the size of your choosing. The last remaining CSS elements are used to do some basic styling to the unordered list and its list items. This styling makes the unordered list items to be laid out inline and to have a border drawn around each list item therefore giving the look and feel of actual tabs.
The function operates by checking if there was a previous active tab. If there was one it hides it then shows the form element under the current tab.
Source: Author's own experience
Screenshots provided by Author