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:
- TYPE - specify the field is a pre-filled hidden field
- NAME - assigns a unique name to the field for processing purposes
- 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:
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:
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.
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:
Since the Hidden Input tag is...well... hidden, we can't really show you how it looks, but it works!
Return to 'Password Inputs' Proceed to 'Text Areas'
