USNJB

Forms

Forms are used to send information to the web server. Users fill out an interactive form by typing in text boxes, selecting from a list of options, and so on. When you submit a form, all that your browser does is send a long line of text to the host. The server can use it for whatever reason including send e-mail, run an executable, or generate some results for the client. Forms simply display an organized layout to be filled out and sent.

Two common attributes are:

ACTION: This is where you want the user to send their information to. Set this to a URL such as http://www.mysite.com/cgi-bin/cool_program.cgi. Here, the information is processed by cool_program.cgi. You can also use mailto:JonDoe@hisServer.com. This would bring up an e-mail client if your users have one setup. mailto is therefore very unpredictable. Also, it sends out text that's almost unreadable. If you need to send e-mail, use a server-side program.
METHOD: This is where you tell your client's browser how to send this information. You use either GET or POST. GET is no longer used. It still can be used. POST is really the only choice.

Here's the code for a simple blank form:

<form action="http://www.mysite.com/cgi-bin/shop.cgi" method="post">

...your code...

</form>

INPUT element.

This is used to display a text-box, password-text-box, checkbox, radio (options), submit [button], reset [button], image [button], custom button, hidden field, and file upload.

A button can be created using the following code:

<input type="button" name="button x" value="Click Here" onclick="runProgram()">

This would run a program called "runProgram".

The following will create a popup box with a message.
Here's the code:
Here are the results:

Here's the code for another form. It has a button, a submit button, and a reset button. It also has some text fields.

Here are the results:

Here's the code for another form. It has an image for a submit button. This serves the same function as a submit button.

Here are the results:

The checkbox. The first example is a checkbox alread marked. The second is not.

Here are the results:

The radio. You can only choose one of many. In group a, the first one is selected. In group b, none are selected. A group of options must have the same name. a different name would mean the radio is part of a different group.

Here are the results:

The hidden type. This one cannot be seen. The code is as follows:


<form>
 <input type="hidden" name="cannotBeSeen" value="ImInvisible" >
</form>

The text type. This is a one line text box. Pushing the enter key on your keyboard is the same as clicking on the submit button on your form. The size attribute sets the number of characters the text box can display across. The value attribute sets the default text display when the page is first loaded. The maxlength value sets how many characters can be entered. Once that maximum is reached, no more can be entered. You can set your text to be readonly, this way, the information cannot be altered.

Here are the results:

The password type. This resembles a password field you probably see everywhere. It displays an astrisk * for every character you type in.

Here are the results:

The Select and Option element.

This creates a drop-down box or list box with predefined options. Option 2 is selected by default. To choose which one is defualt, insert "selected". Option 4 has the value attribute to it. This is useful if you want to submit cryptic code to the server while showing plain words to your user.

Box 2 shows the same selection, but as a list box showing three items at a time. This is accomplished by adding the size attribute such as size="3"

Box 3 shows a list box that allows multiple selections. To do this put the attribute multiple in the select tag like this
<select name="testlist" size="3" multiple>

Here's the code:

Here are the results:
box 1

box 2

box 3

Textarea Element

The textarea element is similar to the text type in the input element. They are both text boxes that accept user input, you can type in them. This one allows multiple lines. You can have predefined text if you choose. You can set the size of textarea by using the cols and rows attribute. You can also choose the readonly attribute. If you do not want long lines to wrap around you can add the wrap attribute with the value off.

Here's the code:
Here are the results:

label element

The label element is new to HTML 4. This is an element like other elements. It contains readonly text that labels another control. You can associate labels with controls implicitly or explicitly. Implicitly, the element is contained in the label element.
<label>hello <input type="checkbox" name="clickme">implicit</label>

Explicitly, the label is tied in by using the control element's id attribute. The for attribute of the label element is assigned the value of the control element's id attribute. The good thing about explicit association is that label and control elements are separate, so their placement can be structured separately in a table.

Here's the code:
Here are the results:

fieldset and legend elements

The fieldset puts a box around a group of other objects. The legend places a title at the top. It has the align attribute. This can be left, center, right, and justify. Fieldset and legend does not seem to work on netscape 4, but it will work on Internet Explorer 5 and Netscape 6. This is a relativly new item.

Here's the code:
Here are the results: