Now we are going to do a form. Forms can be used alone or laid out using a table for control of placement. In this lesson we will use a table to help control the layout of the form and keep it in the center of the page for easy viewing.
An HTML form is a section of a document containing normal content, markup, special elements called controls (checkboxes, radio buttons, menus, etc.), and labels on those controls. Users generally "complete" a form by modifying its controls (entering text, selecting menu items, etc.), before submitting the form to an agent for processing (e.g., to a Web server, to a mail server, etc.)
OK, now you got all that, right. Below is the coding for a very simple form.
<form> Name: <input type="text" size="xx" maxlength="xx"> </form> <input type="reset" value="Clear Form> |
Go ahead type your name, address, City, State and Zip in the boxes. Your complete name. It its longer than 10 characters you will see that it moves off the screen. That is OK, for the maxlength is 25 characters. There is nothing you can do with this form, except click the Clear Form Button. That will remove your name from the box. Now click the "Clear Form" button. Works don't it. Normally you would be able to email it or send it to a server for data entry. We will keep adding to this form, but you still won't be able to email or send data as there is no Common Gateway Interface (CGI) script to activate this form. You will need to contact your server host for necessary CGI scripts to activate a form on your hosting site.
<form> Name: <input type="text" size="xx" maxlength="xx"> Address: <input type="text" size="xx" maxlength="xx"> City: <input type="text" size="xx" maxlength="xx"> State: <input type="text" size="xx" maxlength="xx"> Zip: <input type="text" size="xx" maxlength="xx"> </form> <input type="reset" value="Clear Form> |
Did you fill in all the information. Try to place more than two characters in the State Box. Won't let you will it. The length of that text block as been set by the creator. Click on the "Clear Form" button to remove all your information. Now we are going to add the radio and checkboxes to this form.
Below is a form using "Radio" buttons, "Checkbox" buttons and "text" blocks. Radio buttons are normally used when you ask if you like: 1. Apples, 2. Oranges, 3. Pears, pick only one. A check box is used if you ask: Do you like: 1. Apples, 2. Oranges, 3. Pears, pick all the apply. Text boxes are use to fill in information, IE., Name, Address, Phone Number, etc. Now that you have the basics of a form, lets build one.
<form> Name: <input type="text" size="xx" maxlength="xx"> Address: <input type="text" size="xx" maxlength="xx"> City: <input type="text" size="xx" maxlength="xx"> State: <input type="text" size="xx" maxlength="xx"> Zip: <input type="text" size="xx" maxlength="xx"> Do you like: (Pick Only One) <input type="radio" name="fruit" value="Apples"> <input type="radio" name="fruit" value="Oranges">Oranges <input type="radio" name="fruit" value="Pears">Pears </form> Do you like: (Pick All That Apply) <input type="checkbox" name="Games of Chance"> Games of Chance <input type="checkbox" name="Gambling"> Gambling <input type="checkbox" name="Horse Races"> Horse Races </form> <input type="reset" value="Clear Form> |
As you can see, radio buttons are round, and check boxes are square. Try again to pick more that one fruit. Still can not, can you! But if you pick more than one of the Gambling questions, as you see, you can pick all three. This form still has no value on your web site. All you can do is fill in the information then clear the form. You need to add one more button and that is the "Submit" button. The "Submit" button activates the form and either emails it to you or adds the information to a data base on your web site. There are several attributes that you need to add to the FORM tag to make the submit button work. Contact your server host for the necessary information and CGI scripts. The completed form with a submit button is coded below.
<form> Name: <input type="text" size="xx" maxlength="xx"> Address: <input type="text" size="xx" maxlength="xx"> City: <input type="text" size="xx" maxlength="xx"> State: <input type="text" size="xx" maxlength="xx"> Zip: <input type="text" size="xx" maxlength="xx"> Do you like: (Pick Only One) <input type="radio" name="fruit" value="Apples"> <input type="radio" name="fruit" value="Oranges">Oranges <input type="radio" name="fruit" value="Pears">Pears </form> Do you like: (Pick All That Apply) <input type="checkbox" name="Games of Chance"> Games of Chance <input type="checkbox" name="Gambling"> Gambling <input type="checkbox" name="Horse Races"> Horse Races </form> <input type="submit" value="Submit Information> <input type="reset" value="Clear Form> |
Go a head fill in the form then click on the submit button. Nothing happened or you were taken to the top of this page, because there are no CGI scripts to activate this form or email it for entry into a database. There are javascript scripts that will require you to fill in all or some of the information prior to submitting the form. For more on forms, do a search on the Internet or contact your host/server. Starvation Graphics has a complete course on creating and using forms.