9: Forms
Fill-out forms are a good way to make your web page or site interactive, allowing a user to submit information and allowing you to customise what they get back based on that information. The basic form only uses a few tags; the different types of controls displayed are specified as elements within the tags.
<FORM action="mailto:janra@paradox.homeip.net" enctype="text/plain" method="post">
<LABEL for="name">Your name:</LABEL><INPUT type="text" name="name" id="name"><BR>
<LABEL for="password">Password:</LABEL><INPUT type="password" name="password" id="password"><BR>
<LABEL for="read">I've read your tutorial</LABEL><INPUT type="checkbox" name="read" id="read" checked="checked"><BR>
<LABEL for="enjoy">I've found your tutorial useful</LABEL><BR>
<INPUT type="radio" id="enjoy" name="enjoy" value="yes" checked="true">Yes!<BR>
<INPUT type="radio" name="enjoy" value="no">No.<BR>
<LABEL for="comments">Any other comments</LABEL><BR><TEXTAREA name="comments" id="comments" rows=10 cols=40></TEXTAREA><BR>
<INPUT type="submit" name="submit-button">
<INPUT type="reset" name="reset-button"><BR>
</FORM>That example pretty much covers everything I wanted to cover on this page. Now let's look at each part in detail.
The FORM tag must surround the entire form. Well, you can put INPUT tags outside of a FORM, but when the form is submitted, the ones outside won't be submitted, so they're not very useful. Within the FORM tag there are several optional elements: action, enctype, and method. Action is required - it points at a URI that will handle the user input from the form when they click the submit button. In this example, it's a "mailto:" URI, which means that the input that you fill out in the form will be sent via normal email to my address. Normally, you would specify the URI of a cgi script that would handle the input and possibly make a new page that thanks the user for filling out the form. Enctype determines what encoding type is used to send the form data that the user entered. Because I'm getting this mailed to me, I put enctype="text/plain", which will send the data to me in the form:
password=whatever you enter for your password
read=true
enjoy=yes
Notice that although the password field displays all stars when you type in it, it sends the contents in cleartext. Don't use it for anything sensitive! Also notice that 'read' is boolean - it can only have a value of 'checked' or nothing at all, depending on if it was checked or not. 'Enjoy' returns a value depending on which of the two radio buttons was selected.
Normally, if you have a cgi script handling the form submission, you would use enctype="application/x-www-form-urlencoded" (which is the default, so if you're using this encoding type just don't type it). This encodes the data with the control names with certain characters used to tell the cgi program how to separate the data into name=value pairs. Method tells the browser if it should use 'get' or 'post' to submit the information. Because I'm using email to send the data, I use 'post', which sends the data as the contents of a document (in this case, email). Using 'get' would cause the web browser to append all the name=value pairs to the URI provided in 'action' after a question mark.
http://www.somewhere.com/cgi-bin/script.cgi?name=value&name2=value2&name3=value3
Depending on what you want to do with the information, you can do it either way.
Next is the LABEL tag. It surrounds the text you want to use as a label for a certain control, and you associate it with that control by using for="controlname" in it. This allows you to, for example, select a checkbox by either clicking in the box or by clicking the text associated with it. The for= element points at the id= element of the associated control, so this is one spot where you have to give tags a unique name.
The INPUT tag does most of the work - except for the submission - because pretty much all controls in a form are made using the INPUT tag. As you could see in the example, the type of control is defined by the 'type' element.
In the order used, the types are:
- text
- A plain text box, of one line.
- password
- A text box, of one line, that displays anything entered in it as stars. The data is still sent via cleartext to the server, so the only thing this actually provides security for is someone reading over your shoulder.
- checkbox
- Provides a checkbox that you can turn on or off, and sends a value of true or false to the cgi program that handles the form data when it's sent.
- radio
- Several radio buttons with the same name must be used. If there's only one it's really pointless, because for a given radio button name, one and only one must be checked. You make several buttons with the same name and different values, and the value returned when the form is submitted is the value of the checked radio button.
- submit
- The button that sends the name=value pairs off according to the action defined in the FORM tag.
- reset
- The button that sets the value of all controls back to their defaults.
And then there's the TEXTAREA tag. This creates an area, size defined by the values for cols and rows, for entering multiline text. If you type more than will fit in the visible box, the browser is supposed to add scroll bars. Between the starting and ending tags for TEXTAREA, you can type some text that will be placed in the textarea as the default text.
