Creating a Form - HTML5 - page 160

usinG Hidden ForM conTroLs
As you might suspect from the name, a hidden form control is not visible to the user. If forms are
used to gain feedback from the user, what's the point of a hidden field? Quite often website owners
work best when they know the context of the information supplied by the users. Say a site has two
different forms on different pages, each of which asks for comments on the site's services. One form
is for the general public, and the other is for current customers who are logged in. Both forms store
their information in the same database. How can the data from the two groups be distinguished? By
using a hidden form control, of course.
The hidden form control is another <input> tag type, which is coded like this:
<input type=”hidden” name=”Customer_Type” value=”General Public” />
Because this form control is not displayed, there is no need for a label and thus, no need for an id
attribute. You can have as many hidden form controls in your form as needed. Moreover, as long as
the <input> tag is within the <form> tag, it can be placed anywhere.
From a coder's perspective, I prefer to group all of my hidden form controls
after the rest of the form elements, just before the closing </form> tag.
inserTinG ForM buTTons
As mentioned in the beginning of this lesson, one of the key elements of every form is some sort of
trigger to submit the form and all the collected information. Most frequently, this trigger takes the
form of a button form control.
You have two ways to create HTML form buttons. You can use the faithful standby the <input>
tag, or you can use the <button> tag. With <input> , you choose the appropriate type attribute,
either submit , reset , or button :
<input type=”submit” name=”submitButton” value=”Submit your form” />
With the <input> style button, the value attribute defines the label for the button, which appears
in the button itself, as shown in Figure 19-9. As you probably have guessed, the submit type trig-
gers the form and initiates the process to deliver the data. The reset type clears all the entries in the
form, setting it to its default state. Finally, the button value for the type attribute allows the button
to act as a general trigger, usually to activate some JavaScript.
Unlike the <input> tag, the <button> tag is not an empty tag — in other words, you need opening
and closing tags with content in between to use the <button> tag. A type attribute is also needed
in a <button> tag: the same three available for the button-related <input> tag: submit , reset , and
button . The label for the button is entered as its content, like this:
<button type=”submit” name=”submitButton”>Submit your form</button>