Simple Technique for Adding Tabs to a Web Form

Quick Take

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.

On this page

Introduction

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 example used in this tutorial is created using CSS, JavaScript and HTML.

The HTML Code

In your text editor you will create a simple HTML document with a HEAD section and a BODY section. The HEAD section will contain all the CSS And JavaScript needed. The BODY section will contain all the HTML code that will be visible.

In the BODY you will need to create an unordered list

with a URL within it. The URL tag is attached to an onClick JavaScript event that calls a function called showMe with a single parameter that holds a unique id.

Below this you need to add a div container
to hold all the form content. Within that div container, you will insert the form tags
that wraps the form elements. Remember that you only need one form tag regardless of the number of web form pages.

Advertisement

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.

Advertisement

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 JavaScript Code

The JavaScript code consists of two functions. The first one is called loadForm, which simple calls the other function when the web page has fully laded. The other function is called showMe. This function is responsible for switching the tabs and is called when a tab is clicked.

Advertisement

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.

Finally within the JavaScript code there are some built-in event listeners that checks to see whether the web page has fully loaded, if so it calls the loadForm function to activate the web form. You can download the tab web form source code to get a better idea of adding tabs to a web form.

Advertisement

References

Source: Author’s own experience

Screenshots provided by Author

Advertisement

Simple Technique for Adding Tabs to a Web Form

Introduction

The HTML Code

The CSS Code

The JavaScript Code

References

More from Tech