Webmaster Resources Center

Welcome to the Bravenet Resource Center. Use these resources to help make your web pages more advanced and fun to use.

Forms Tutorials

Hidden Input Fields

The Hidden Input field is not displayed on the page, so it does not allow visitors to add anything into it. The Hidden Input allows you, the webmaster, to add specific information to a form, to be passed through the form processor along with the data entered by the visitor.

For example, if you have several forms on different pages on your website, you could use a Hidden tag, in each form, that identifies which page the visitor was on when they filled out the form.

You can add a Hidden Input field to your form using a <input> tag. This <input> tag requires a few attributes to work properly:

  1. TYPE - specify the field is a pre-filled hidden field
  2. NAME - assigns a unique name to the field for processing purposes
  3. VALUE - defines what data should be passed through the form

Let's write a hidden input tag, step by step, to show how it is correctly coded.

The type="hidden" value tells the input tag to pass the information in the tag through the form processor without displaying an input box on the webpage. Define the hidden input like this:

<input type="hidden"

The name should always be something unique that identifies what the field is for. Since this field is hidden you should name it something relevant to the information it passes. For this example, we will use "page". Add the name like this:

<input type="hidden" name="page"

The value field allows you to add the information to be passed with the visitors data. In our example, we want to tell the form that the visitor is using the form on page 3 of our website, so we enter "page 3 form" as our value.

<input type="hidden" name="page" value="page 3 form"

This tag does not display anything on the page, and you are passing pre-written information, so the usual size and maxlength attributes are not required for this tag, so let's look at our completed code:

<input type="hidden" name="page" value="page 3 form">

Since the Hidden Input tag is...well... hidden, we can't really show you how it looks, but it works!