Web Site Building · HTML Advanced Topics · Forms 2

What this is about:

The first thing that needs said about forms on the Web is they require server-side scripting to provide intended functionality. If you want a form to send email, or take a poll, or transact a sale, there must be programs on the web server to process the information. So if you aren't operating your web site yourself, check with your hosting service to see what kind of forms processing scripts they have available.

Checkboxes and Radio Buttons

Radio Buttons Checkboxes allow your visitors to select an item with the click of a mouse. Groups of checkboxes can be used to create checklists. The inital value of a checkbox can be defined to be checked or not. If you want to set up a checklist from which the user may only select one item, then you should use radio buttons instead. Radio buttons allow the user to choose only one of a number of options. When you choose one option, any previously selected option is unselected. Like checkboxes, you can define a radio button to be checked by default, but unlike checkboxes you should only have one button in a group initially checked. Radio buttons are grouped together by assigning them all the same NAME (but different VALUEs).

I've found the Internet Brothers site to be (choose any combination):


<FORM METHOD="GET" ACTION="http://webreference.com//cgi-bin/html/formdump.cgi">
<BR><INPUT TYPE=checkbox NAME="splendid" VALUE="Y" CHECKED>Splendid
<BR><INPUT TYPE=checkbox NAME="superb" VALUE="Y" CHECKED>Superb
<BR><INPUT TYPE=checkbox NAME="exceptional" VALUE="Y" CHECKED>Exceptional
<BR><INPUT TYPE=checkbox NAME="outstanding" VALUE="Y" CHECKED>Outstanding
<BR><INPUT TYPE=checkbox NAME="confusing" VALUE="Y">Confusing

Now for a radio button form:

Which Internet Brother do you like best?

      Jeff - North Carolina Bro
      Dave - Colorado Bro

<FORM METHOD="GET" ACTION="http://webreference.com//cgi-bin/html/formdump.cgi">
<BR><INPUT TYPE="radio" NAME="favorite" VALUE="jeff">Jeff
<BR><INPUT TYPE="radio" NAME="favorite" VALUE="dave">Dave

Note the similarity to that of a checkbox, but instead of being able to have a different variable associated with every checkbox, all the radio buttons in a group must have identical NAMEs.

Option Lists

Whether or not an option list is displayed as a drop-down listbox, a simple listbox, or a scrolling listbox is determined by the SIZE keyword in the SELECT tag.

Option lists allow the user to choose from a selection of values. You define the values of choice in the SELECT statement of the form. Option lists can be drop down list boxes, like this:

<SELECT NAME=platforms> <OPTION>Windows <OPTION>Macintosh <OPTION>UNIX </SELECT>

Simple listboxes, like this:


Or scrolling listboxes, like this:


Whether or not an option list is displayed as a drop-down listbox, a simple listbox, or a scrolling listbox is determined by the SIZE keyword in the SELECT tag. SIZE refers to the number of rows visible to the user at once. If the SIZE is one (the default), a drop-down listbox will appear. If the SIZE is greater than one, and the number of options is less than or equal to the SIZE, a simple list box is displayed. If the SIZE is greater than one, but the number of options available to the user is greater than the SIZE, a scroll bar will appear to the right of the listbox to allow for scrolling through the options.

Using the SELECTED keyword after OPTION (as for the UNIX option in the above example) causes that option to be highlighted. By default, only one of a list of options is selectable, however this can be overridden by including the MULTI keyword in the SELECT tag.

Images As Submit Buttons

This form uses an image in place of the "submit" tag, providing equivalent functionality. Note that all the common attributes modifying the way the image is displayed are supported, such as ALIGN, WIDTH, HEIGHT, and BORDER. The forms processor also returns the x and y coordinates of where on the button you clicked.

Enter your name:  

<INPUT TYPE=image WIDTH=100 HEIGHT=55 BORDER=0 SRC="submit_button.jpg">

We hope you have found these HTML forms tips helpful, and useful. If you have any questions or suggestions for us, please use the email link at the bottom of the page to let us know. Thanks for choosing the Internet Brothers as your source for HTML assistance, please come back soon.

Return to HTML Forms Tutorial Page 1.

go to the next page