Creating Forms: Hidden Fields and Checkboxes
Creating Forms
Hidden Fields and Checkboxes
There are other types of form elements and inputs. Now that you’ve learned the basics, let’s go through the rest of them.
Hidden Fields
Sometimes you want to pass information through a form without requiring the user to type it all in. Suppose you’re setting up a form to let a user e-mail a link from your site to a friend. You’ll want the user to type in his or her name and e-mail address, and the friend’s name and address. But why should the user also have to type in the full Web address of the page they want to send? This is where hidden fields come in handy.
Input tags with a type attribute of “hidden” are invisible to your users. Hidden tags don’t need a size attribute, but they will need a name – so that the script processing the form knows what to do with them – and of course a value:
<input type="hidden" name="LinkURL" value="http://www.j-learning.org/really_cool_page.html" />
This hidden tag in this example will pass along the Web address of the page your user wants to send to a friend without requiring the user to type the whole thing in.
Checkboxes
When you go to get a hamburger, you can choose the toppings you want from a list: lettuce, tomato, onions, pickles, cheese, mustard, ketchup and so forth. You can have all of these toppings if you like, or none, or just one or two.
In a form, checkboxes work the same way. They provide the user with a list of options; the user can choose all the options, none of them, or select individual options as he or she sees fit.
Suppose you want to offer your users the option to sign up to various e-mail newsletters your site offers: one for breaking news, one for high school sports, one for education news and one for local weather alerts. They don’t have to sign up for any of these newsletters, but if they wish, they can sign up for all of them. The code to create checkboxes for each of these options would look like this:
Breaking News: <input type="checkbox" name="newsletter1" value="breaking_news" /><br /> High School Sports: <input type="checkbox" name="newsletter2" value="school_sports" /><br /> Education News: <input type="checkbox" name="newsletter3" value="edu_news" /><br /> Weather Alerts: <input type="checkbox" name="newsletter4" value="weather" />
On a Web page, that code would look like this:
Note that the value attribute for each checkbox is invisible to the user. It’s intended to be seen only by the script that will process the form’s information. To let users know what they’re clicking, you’ll need to accompany each checkbox with text that describes it, as seen above.
Let’s say that you want to sign up as many people as possible for your Breaking News e-mail newsletter. When they first see your form, you want each user to be signed up for that newsletter by default. If they don’t want the newsletter, they can uncheck that particular box. This is where the checked attribute comes into play:
Breaking News: <input type="checkbox" name="newsletter1" value="breaking_news" checked="checked" />
On your Web page, your checkbox for Breaking News will now look like this:
Try it Yourself
Make your own tweaks or additions to the code in the left box below, then click “Show Changes” to see the results in the right box.
|
This is only a test
|