[an error occurred while processing this directive]
Go to Bottom Nav - January 24, 2018 - No exercises at this time - ERRORblah Happy Holidays and Semester Break!

Forms are used to allow the user to send us information. The form communicates with the server through a CGI (Common Gateway Interface) script. Forms send along name/value pairs of information.

Forms start with the <form> tag and its attributes; method and action.

  • method can have two values; GET or post. This example uses the post method.
  • action indicates the URL of the CGI script you are working with.

The code used for this form is:
<form method="post" action="http://webhawks.org/~dm60wally/cgi-bin/namevalue.cgi">

Remember to close your form after all your form elements - </form>.

Form Elements

Below are some of the form elements. Go ahead and fill them out for fun.

This input is the "text field." It is a one line text input often used for name and address fields in a form. The default size is 20 characters. You can vary that by using the size attribute.

How about putting your name in this field.
The "password field" replaces the user's input with bullets or asterisks. This prevents someone from looking over the user's shoulder to obtain the password. It does not necessarily encrypt the password, it can be stolen online.
Enter your password here.
Sometimes we need a larger text box, one that could contain user comments and that is larger than the single line text field. For that we use the textarea tag. Use the rows and cols attribute to size the height and width of the box.
Radio buttons allow the user to pick one item from a group of items. You may choose to have one of the buttons checked by default.
Select one of the following:
Female
Male
Unsure or Don't Care
Checkboxes allow the user to pick multiple items. You may choose to have one or more boxes checked by default.
Select as many as you like:
Spam me mercilessly.
Give me money.
Deluxe Vacation
An "A" in this class.
The "pulldown" or "pop up" menu allow the user many choices while the menu itself takes up very little space. Notice that the menu's width expands to your widest option's size.
Pick you favorite flavor of ice cream:
The multiple selection menu allows the user to pick more than one selection.
Pick more than one flavor (hold down the shift key or use the command/control key for multiple separated selections):

Hidden elements, at first glance, may seem to be a less than useful part of form. As you become more experienced, you may find yourself writing a series of forms that the user will be asked to fill out. hidden elements allow you to pass along data from previous forms, or perhaps identify a particular ad campaign or "partner."
Of course you can't see anything,
they are hidden elements. View the source!
Give your users a chance to start all over on a form by supplying a reset button. It can have any message you choose written on it. I usually make a point of separating the reset button from the submit button, especially on long forms. It is no fun for the user to fill everything out and then accidentally click on the reset button...
The submit button sends the user's data along. Like the reset button, it can have any message you choose.

Lets move on to exercise ten.

Heading One
Ut pharetra, ante eget imperdiet ullamcorper, tortor nunc sollicitudin orci, non cursus neque nisl eget ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum, nibh in suscipit interdum, velit magna volutpat turpis, at ornare sem magna et tellus. Sed pulvinar facilisis ligula, id vehicula eros sollicitudin a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Heading Two
Vivamus vestibulum, augue id iaculis sodales, odio odio feugiat arcu, scelerisque congue nisi ipsum vitae orci. Nunc sed ligula quam. Cras sed iaculis neque. Proin ultricies consectetur tortor, eu pulvinar sapien commodo ac. Cras diam arcu, lacinia id mattis ut, convallis sed massa. Nullam ut arcu lacus. Suspendisse ultricies elementum arcu ut dictum.
Heading Three
Sed aliquet augue ut ligula porta gravida pellentesque sapien semper. Duis mauris massa, semper pulvinar eleifend id, tincidunt fermentum nulla. Proin ipsum neque, imperdiet in vestibulum non, hendrerit ac nisi. Maecenas eleifend libero quis urna lacinia elementum. Etiam mi massa, sollicitudin nec accumsan in, aliquet in dui. Pellentesque consequat diam quis felis luctus a vehicula lectus mollis.
Pull Down Menu Close Menu