Each input is set up with an empty input tag. With a text box, you would use a tag that looks like this:
<input type = "text" name="Fname" size = 30>
The tag is the input tag, the first attribute is type (Text box in this case), the second attribute is name (whatever you want to call the field), and the last attribute in this example is size. If you want the form to show a default value, you can use a value attribute (value = "default")
A radio button and a check box are very alike except that you can only select one choice with a radio button and can select multiple choices with a checkbox. If you use a value attribute the value would be the default selection (a selection that is pre-checked.) For either the radio button or checkbox you can use a select box instead of listing each item.
Finally, you can set up a larger text area for comments. Take a look at the example below (lesson7.htm):
-------------------------------------------------------
<html>
<head>
<title> Lesson 7 </title>
</head>
<body>
<h1 align = "center"> FORMS </h1>
<h3 align = "center"> FEEDBACK </h3>
<form method ="post" action="mailto:youremailaddress@isp.com">
<pre>
<p>First Name: <input type="text" name="firstname" size=30> </p>
<p>Last Name: <input type="text" name="lastname" size=30> </p>
<p>Are you a U. S. Citizen?</p>
<input type = "radio" name = "UScitizen" value="yes" checked> Yes
<input type = "radio" name = "UScitizen" value="no"> No
<p>What do you like to do in your spare time? You may select more than one.</p>
<input type = "checkbox" name = "sparetime" value="Read" checked> Read
<input type = "checkbox" name = "sparetime" value="TV"> Watch TV
<input type = "checkbox" name = "sparetime" value="movies"> Go to movies
<input type = "checkbox" name = "sparetime" value="surf"> Surf
<p>What is your favorite search engine?</p>
<select name = "searchengine">
<option selected>Google
<option> Excite
<option>Hotbot
<option> Netscape
<option> Other
</select>
<p>What do you like to do online? Use control or shift to select multiple options.</p>
<select name = "activities" multiple>
<option selected>Research
<option> Chat
<option> Play Games
<option> Shop
<option> Email
<option> Read Jokes
</select>
<p>Comments: </p>
<p><textarea name="Comments" rows = "5" cols = "50">This is a great form!</textarea></p>
<p><input type="submit" value ="Submit Form"><input type="reset" value="reset form"></p>
<p><input type="image" value ="submit.gif" src="button.gif" alt="submit form" border = "0"></p>
</pre>
</form>
</body>
</html>
-------------------------------------------------------
This is a mailto form. I have selected this form for the example for 2 reasons: 1) it is the most likely type of form you will want to use and 2) it's the only method I actually know right now. Method is an attribute of the form. This form uses the post method and its action is to mail the form data. If you put your email address in the appropriate place you can test this form on your own computer.
First I have used 2 text boxes for firstname and lastname. The US Citizen question uses radio buttons for yes or no and only one can be selected. The spare time question is set up in a similar way using checkboxes. The user can check off more than one of these choices.
The search engine question is an example of a select box which allows only one choice. This setup is similar to the format of a list that we talked about earlier. In the online activities question, I make the select box allow multiple choices by including the word multiple inside the tag. Finally, I used a textarea for comments to allow more space. I used some default text but this is not require.
You may also notice that I put a <pre> </pre> tag around the entire form. This is the preformatted text tag which preserves my actual spacing.
At the end of a form you will need a submit button so that the user can submit the data. I have actually included 2, in reality you would delete one of these. For the first sample I used the built in submit button, in the second example I used the ubiquitous button.gif image. Hopefully by the time you are setting up a form on your web site you will have expanded your image collection to include more than one button.