Creating a Form is a much used method of adding Interactivity to your web pages. Most Forms are set up to allow users to respond - ask for more information, request a brochure, or order items online. This lesson will take you through all of the main Form elements
First of all, all elements of forms will only appear when enclosed within a form tag. The form tag looks like this: <form> </form> You can put whatever you want between these tags, because all this really does is allow form elements to appear and create a new paragraph:
Now, in order for a form to actually do something (it doesn't have to) it needs a action and method attribute. Action is simply the URL of the CGI or program which processes the information. Method can be either post or get. Indicating post saves the information somewhere and may elicit a response, and get retrieves information, possibly based on a query.
This tag would send the information indicated in the form (which in this case is nothing) to a nonexistant perl (CGI) script. Now for any information to be sent to the CGI and make the form functional, there must be some way for the user to provide input. For this you use the tag. Input tags come in many different shapes and sizes, and represent information in different ways.
There are a few different kinds of buttons. Some you can customize yourself, others have pre-canned functionality. Let's start with your basic, run-off-the-mill button. Fairly simple, it has name and value attributes and nothing else. The value attribute holds whatever is to be put on the front of the button. Unfortunately, without the power of JavaScript functions added in, the button cannot actually do anything.
Another kind of button is a reset button, which will automatically remove whatever changes you make against the default settings in a form. Try out this example:
Neat, ehh? Note how the reset button has it's own attribute of the input tag looking like: and that no name or value was necessary for there to be the word "reset" on that button. Finally, the submit button does the real work. Whatever the action attribute is set to in the form tag, this button sets it in motion.
This particular form's action is to perform a seach on Yahoo, and the submit button is the one that gets it all going.
Technically speaking, a selection list isn't actually an attribute of the tag, but a form tag of it's own. Basically, a selection tag really looks like this:
Note how this selection has a name attribute, like all form tags. Neat as that is, you might want to be able to support having more than one choice at once. That's why there's
In case you're not up to speed on the whole "multiple" idea, use the SHIFT key to select more than one, and use the ALT key (OPTION for the mac) to deselect.
This is the form element that can return the most information of all of them, probably because it takes up the most memory. Technically speaking of course, the
Of course, we might want to make it so you can actually see the text I've written. You can do this by indicating the number of characters across with the cols attribute, and the number of lines down using the rows attribute. Here's that same example, only sized-up the way I like it:
One problem with
Pretty unreadable isn't it Now let's try another quote a few paragraph's down, but with the wrap attribute (HTML 2.0 addition) set to virtual:
Slightly better, huh? Let me explain the wrap attribute a little better.
wrap=off- This is the default, so it's kind of pointless to bother putting it in, but if you're that kind of person, don't let me stop you...
wrap=physical- This will make the text appear to automatically scroll downward, but when you submit the form to a CGI, it remains as one, long line.
wrap=virtual- This will wrap the text for both the user, and as input when the form is sent to a CGI. It doesn't really make a difference whether you use physical or virtual if the form isn't actually going anywhere.
Aah yes, the checkbox attribute. Checkboxes are neat because you can check and uncheck them at will, unlike radio buttons. The key phrase here is the "type=checkbox" part, which is what makes the checkbox what it is. Without this indication, God only knows what could happen. You can make checkboxes like this:
Now, if you're the kind of person who likes to make your users decisions for them, then you can pre-checkbox for them, by putting the word checked in the checkbox input tag. Here's how it's done:
Now you have mastered the art of checkboxes, giving your users the power to check and uncheck at will. Also remember to alsways name your checkboxes, because otherwise they will mean nothing to any kind of CGI, and makes addressing them more difficult in JavaScript.
There are a few different kinds of Text boxes. First of all, a text box is the default setting for any tag.
You can see how easy it is to make text fields. But if you really want, using type, name and value we can make this thing a little more fancy:
Now you may notice that that box is a little oversized for the number "32," the only other property you can set for text is the length of that box, which is set in numbers of characters.
Another kind of text field is the password element. It is just like a regular text box, but every letter becomes a little dot thingy, so if there's someone watching you over your shoulder, they can't read your password. They'd have to watch your fingers typing to do that. Notice, however, that you can still preset a value for that field when someone loads your page. They won't be able to see the password on the page, but all they have to do is look at the HTML to find it out.
There is one last kind of text field, and that is the hidden element. Aptly named, you cannot see the hidden element without looking at the HTML. The only pupose for the hidden field is to store values that need to be sent to the server along with the form submission, but shouldn't be displayed by the web browser. They can also be used by JavaScript to store values for calculations without using variables and cookies.
Radio buttons allow you to select only one choice in a series of other radio buttons. They are fairly simple to create:
You may notice that you cannot uncheck this particular example. That's because radio buttons are useless when not in series, and when this is the case, should really be checkboxes. I'll try again:
In order for these radio buttons to be properly grouped, notice that they all have the same name. Radio buttons with different names would not uncheck, just like the one far above. Also notice that in order for the button to mean anything when processed, you must indicate a value for it, as well as text for the user to see. One final example will show you how radio buttons, like checkboxes can be preset:
Even though the Merc comes pre-checked, through the wonders of forms, you can change that property of the radio button, and if you like, change it back again.
This is the tricky part. As I said in the basics, in order for a form to do anything it must go somewhere, traditionally to a CGI (CGI stands for Common Gateway Interface) script somewhere. In order to have an executable program you must have direct access to a server computer, and the disk space and CPU time to spare, to put one in. Most ISP's explicitly prohibit the use of CGI's on their computers, becuase it slows the response time on the server. Perl scripting (traditionally programming language for CGI files) is an entire language unto itself. Generally speaking, it is easier and common practice to copy script from archives which allow users to do so.
Another way to process forms is JavaScript, which relies on the client's machine to do all the processing. JavaScript is a far simpler language than perl, and it can be learned by example, since all the JavaScript code is kept right in with the HTML on web pages. By far the easiest way to process forms is to send all of the information automatically in a email message. You will notice that the POST ACTION in the Form in form.html is set to my e-mail address.