Editor's Corner

Creating Form Elements in HTML: Step By Step

1st Step:

Point your form to the CGI Script & Insert an Email Address

2nd Step:

Insert your form elements:
Text Boxes | Text Areas | Check Boxes | Radio Buttons | Pop-up Menus | Submit Button | Reset Button

3rd Step:

Get fancier by requiring fields be filled out, providing links back to a web page and adding a subject line.

F.Y.I.

View a completed sample form. Click on View --> Page Source to look at the complete HTML code.

1st Step:

Begin to compose a web page with the standard tags, e.g. <HTML>, <HEAD>, <BODY> etc.

Your form begins with the tag:
<FORM ACTION="/cgi-bin/mailto.cgi" method=POST>

The /cgi-bin/mailto.cgi part is the location of the CGI script necessary to process your form.

Type this tag next:
<INPUT TYPE=hidden NAME=to VALUE="yourusername@uwosh.edu"> [replace yourusername with your VaxA username.]

Place other form elements now. Your form ends with the </FORM> tag.

return to top

2nd Step: Form Elements

Text Boxes

Text Areas

Radio Buttons

Check Boxes

Pop-up Menus

Submit Button

Reset Button

Text Boxes:
What's Your Name?
Basic tag:
<INPUT TYPE=text NAME="Your_Name" VALUE="" SIZE=30>

The VALUE portion is optional. If you fill something in here, it will actually appear in the box. This could help if you want to suggest how people should enter information, e.g. Put Your Name Here

SIZE is the number of characters wide the box appears. You can alter this number according to the box size you want. Note: the user can enter more characters than is shown, the text will keep scrolling.

NAME is what will appear as the "field name" when you get your email message from the form submitter. You don't want to leave this blank.

No closing tag necessary.

IMPORTANT: Don't leave any spaces in your NAME portion. You may want to use the underscore (shown above) to string your words together.

return to top
Text Areas:
Why do you love coffee?
Basic Tag:
<TEXTAREA NAME="Tell_us_why_you_love_coffee" ROWS=5 COLS=35 WRAP=on></TEXTAREA>

IMPORTANT: Don't leave any space in your NAME portion. You may want to use the underscore (shown above) to string your words together.

WRAPdictates that when people get to the end of the line in your box, the cursor will "wrap" down to the next line. If you don't want text to wrap, change the word on to off.

You can alter the size of the box by varying the number of ROWS, and COLS (columns).

IMPORTANT: Don't leave any spaces in your NAME portion. You may want to use the underscore (shown above) to string your words together.

return to top
Radio Buttons:
Have you purchased a cup of coffee in the last 24 hours? Yes No
Basic Tags:
<INPUT TYPE=radio NAME="have_you_purchased_a_cup?" VALUE=Yes CHECKED>Yes
<INPUT TYPE=radio NAME="have_you_purchased_a_cup?" VALUE=No>No

People may check ONE OR THE OTHER, BUT NOT BOTH.

The NAME portion must be the same for each radio button for the same question. IMPORTANT: Don't leave any space in your NAME portion. You may want to use the underscore (shown above) to string your words together.

VALUE is what you will see when you receive your email message from the form submitter. If people answered Yes, you will see the word Yes in their reply.

CHECKED dictates which button will appear checked when a user visits your forms page. You may dicatate that neither is checked by leaving out the word CHECKED.

IMPORTANT: Don't leave any spaces in your NAME portion. You may want to use the underscore (shown above) to string your words together.

return to top
Check Boxes:
What types of coffee do you enjoy the most?
Espresso Cappucino Caffe Latte
Basic Tags:
<INPUT TYPE=checkbox NAME="Type_of_coffee_I_enjoy" VALUE=Espresso>Espresso
<INPUT TYPE=checkbox NAME="Type_of_coffee_I_enjoy" VALUE=Cappucino>Cappucino
<INPUT TYPE=checkbox NAME="Type_of_coffee_I_enjoy" VALUE=Caffe_Latte>Caffe Latte

Users may check one, none or all of these boxes, as opposed to radio buttons, where one OR the other can be checked.

You will want the NAME of the boxes to be the same for the same question being asked. IMPORTANT: Don't leave any space in your NAME portion. You may want to use the underscore (shown above) to string your words together.

VALUE should reflect the different boxes.

CHECKED You may place the word CHECKED in any INPUT TYPE tag, then that checkbox will appear checked.

IMPORTANT: Don't leave any spaces in your NAME portion. You may want to use the underscore (shown above) to string your words together.

return to top
Pop-up Menus:
How do you take your coffee?
This is called a SELECTION LIST or a Pop-up Menu.
<SELECT NAME=How_Do_You_Like_Your_Coffee?>
<OPTION>Black
<OPTION>With Cream
<OPTION>With Sugar
<OPTION>With Cream and Sugar
</SELECT>

When entering a SELECT NAME, you should not include SPACES in the values. If you want to put two or more words in the name, either run them together or connect them with an underscore, dash, e.g. How_do_you_like_your_coffee

If you want people to be able to select multiple options, include the word MULTIPLE in your <SELECT> tag, e.g. <SELECT NAME=How_Do_You_Like_Your_Coffee? MULTIPLE>

If you want one option to appear "selected", alter the OPTION tag to look like:
<OPTION SELECTED>

IMPORTANT: Don't leave any spaces in your NAME portion. You may want to use the underscore (shown above) to string your words together.

return to top
Submit Button:

Basic Tag:
<INPUT TYPE=submit NAME=Submit VALUE="Submit">

This is called the SUBMIT button. You have to have one in order to submit the form.

VALUE is what will appear as the text on this button. You can make this text anything you want.

return to top
Reset Button:

Basic Tag:
<INPUT TYPE=reset VALUE="Reset">

This is called a RESET button. Pressing this button will clear all the form information and allow users to "start over" filling in the boxes.

VALUE is what will appear as the text on this button. You can make this text anything you want.

return to top

3rd Step:

Requiring people to fill out parts of your form.

Providing a link back to your web page after people have filled out the form.

Inserting a subject heading that wills how up in the email message.

How to require that people fill out parts of your form
Insert a Hidden Entry. This is code that you insert that doesn't show up to people visiting your page. Somewhere within your form, between the <FORM> and </FORM> tags, insert a line that looks like this one:
<INPUT TYPE=hidden NAME="required_fields" VALUE="Your_Name,why_u_like_coffee">

In the NAME portion, you must type "required_fields" exactly as it appears here, with no space between the words required and fields. In the VALUE portion, place the field NAMEs that you designated in your form.

For example, if you are requiring people to fill in their name, create a text box with a NAME of "Your_Name" (you shouldn't leave spaces between words in your names):
<INPUT TYPE=text NAME="Your_Name" VALUE="your name here" SIZE=30>

Then take the NAME you have designated here and place it in the Required Fields hidden entry, as shown above.

You can place more than one field in the Required Fields tag. Just follow the above example and enclose the desired fields in Quote marks and separate them with a comma, with no spaces between the different field names.

return to top
How can I provide a hypertext link for people to go back to my web page after they've submitted my form?

Insert a Hidden Entry. This is code that you insert that doesn't show up to people visiting your page.

Anywhere between the <FORM> and <FORM> tags, insert the below two tags:

<INPUT TYPE=hidden NAME="continue_url" VALUE="http://www.url.com">

Replace http://www.url.com with the Web address to which you want to direct people.

<INPUT TYPE=hidden NAME="continue_text" VALUE="Thanks for filling out the form. Return to the main site.">

Replace the text after VALUE= with any text you want to appear when people are done with your form.

return to top
How do I insert a subject heading that will show up in the email message?

Insert a Hidden Entry. This is code that you insert that doesn't show up to people visiting your page.

Anywhere between the <FORM> and <FORM> tags, insert the below two tags:

<INPUT TYPE=hidden NAME=subject VALUE=Reservation Form>

Replace Reservation Form with any text you want. Keep it short. This text will appear in the subject portion of your email Inbox after the word Webmail.

If you have created more than one form, this can help you sort out your results.

return to top

Last updated December 1998
Return to the Editor's Corner
Return to UW Oshkosh
Contact neises@uwosh.edu


	Creating Form Elements in HTML: Step By Step
	1st Step:
		Point your form to the CGI Script & Insert an Email Address
	2nd Step:
		Insert your form elements: Text Boxes \| Text Areas \| Check Boxes \| Radio Buttons \| Pop-up Menus \| Submit Button \| Reset Button
	3rd Step:
		Get fancier by requiring fields be filled out, providing links back to a web page and adding a subject line.
	F.Y.I.
		View a completed sample form. Click on View --> Page Source to look at the complete HTML code.

	1st Step:
		Begin to compose a web page with the standard tags, e.g. <HTML>, <HEAD>, <BODY> etc. Your form begins with the tag: <FORM ACTION="/cgi-bin/mailto.cgi" method=POST> The /cgi-bin/mailto.cgi part is the location of the CGI script necessary to process your form. Type this tag next: <INPUT TYPE=hidden NAME=to VALUE="yourusername@uwosh.edu"> [replace yourusername with your VaxA username.] Place other form elements now. Your form ends with the </FORM> tag. return to top
	2nd Step: Form Elements
		Text Boxes Text Areas Radio Buttons Check Boxes Pop-up Menus Submit Button Reset Button Text Boxes: What's Your Name? Basic tag: <INPUT TYPE=text NAME="Your_Name" VALUE="" SIZE=30> The VALUE portion is optional. If you fill something in here, it will actually appear in the box. This could help if you want to suggest how people should enter information, e.g. Put Your Name Here SIZE is the number of characters wide the box appears. You can alter this number according to the box size you want. Note: the user can enter more characters than is shown, the text will keep scrolling. NAME is what will appear as the "field name" when you get your email message from the form submitter. You don't want to leave this blank. No closing tag necessary. IMPORTANT: Don't leave any spaces in your NAME portion. You may want to use the underscore (shown above) to string your words together. return to top Text Areas: Why do you love coffee? Basic Tag: <TEXTAREA NAME="Tell_us_why_you_love_coffee" ROWS=5 COLS=35 WRAP=on></TEXTAREA> IMPORTANT: Don't leave any space in your NAME portion. You may want to use the underscore (shown above) to string your words together. WRAPdictates that when people get to the end of the line in your box, the cursor will "wrap" down to the next line. If you don't want text to wrap, change the word on to off. You can alter the size of the box by varying the number of ROWS, and COLS (columns). IMPORTANT: Don't leave any spaces in your NAME portion. You may want to use the underscore (shown above) to string your words together. return to top Radio Buttons: Have you purchased a cup of coffee in the last 24 hours? Yes No Basic Tags: <INPUT TYPE=radio NAME="have_you_purchased_a_cup?" VALUE=Yes CHECKED>Yes <INPUT TYPE=radio NAME="have_you_purchased_a_cup?" VALUE=No>No People may check ONE OR THE OTHER, BUT NOT BOTH. The NAME portion must be the same for each radio button for the same question. IMPORTANT: Don't leave any space in your NAME portion. You may want to use the underscore (shown above) to string your words together. VALUE is what you will see when you receive your email message from the form submitter. If people answered Yes, you will see the word Yes in their reply. CHECKED dictates which button will appear checked when a user visits your forms page. You may dicatate that neither is checked by leaving out the word CHECKED. IMPORTANT: Don't leave any spaces in your NAME portion. You may want to use the underscore (shown above) to string your words together. return to top Check Boxes: What types of coffee do you enjoy the most? Espresso Cappucino Caffe Latte Basic Tags: <INPUT TYPE=checkbox NAME="Type_of_coffee_I_enjoy" VALUE=Espresso>Espresso <INPUT TYPE=checkbox NAME="Type_of_coffee_I_enjoy" VALUE=Cappucino>Cappucino <INPUT TYPE=checkbox NAME="Type_of_coffee_I_enjoy" VALUE=Caffe_Latte>Caffe Latte Users may check one, none or all of these boxes, as opposed to radio buttons, where one OR the other can be checked. You will want the NAME of the boxes to be the same for the same question being asked. IMPORTANT: Don't leave any space in your NAME portion. You may want to use the underscore (shown above) to string your words together. VALUE should reflect the different boxes. CHECKED You may place the word CHECKED in any INPUT TYPE tag, then that checkbox will appear checked. IMPORTANT: Don't leave any spaces in your NAME portion. You may want to use the underscore (shown above) to string your words together. return to top Pop-up Menus: How do you take your coffee? This is called a SELECTION LIST or a Pop-up Menu. <SELECT NAME=How_Do_You_Like_Your_Coffee?> <OPTION>Black <OPTION>With Cream <OPTION>With Sugar <OPTION>With Cream and Sugar </SELECT> When entering a SELECT NAME, you should not include SPACES in the values. If you want to put two or more words in the name, either run them together or connect them with an underscore, dash, e.g. How_do_you_like_your_coffee If you want people to be able to select multiple options, include the word MULTIPLE in your <SELECT> tag, e.g. <SELECT NAME=How_Do_You_Like_Your_Coffee? MULTIPLE> If you want one option to appear "selected", alter the OPTION tag to look like: <OPTION SELECTED> IMPORTANT: Don't leave any spaces in your NAME portion. You may want to use the underscore (shown above) to string your words together. return to top Submit Button: Basic Tag: <INPUT TYPE=submit NAME=Submit VALUE="Submit"> This is called the SUBMIT button. You have to have one in order to submit the form. VALUE is what will appear as the text on this button. You can make this text anything you want. return to top Reset Button: Basic Tag: <INPUT TYPE=reset VALUE="Reset"> This is called a RESET button. Pressing this button will clear all the form information and allow users to "start over" filling in the boxes. VALUE is what will appear as the text on this button. You can make this text anything you want. return to top
		3rd Step:
		Requiring people to fill out parts of your form. Providing a link back to your web page after people have filled out the form. Inserting a subject heading that wills how up in the email message.
		How to require that people fill out parts of your form Insert a Hidden Entry. This is code that you insert that doesn't show up to people visiting your page. Somewhere within your form, between the <FORM> and </FORM> tags, insert a line that looks like this one: <INPUT TYPE=hidden NAME="required_fields" VALUE="Your_Name,why_u_like_coffee"> In the NAME portion, you must type "required_fields" exactly as it appears here, with no space between the words required and fields. In the VALUE portion, place the field NAMEs that you designated in your form. For example, if you are requiring people to fill in their name, create a text box with a NAME of "Your_Name" (you shouldn't leave spaces between words in your names): <INPUT TYPE=text NAME="Your_Name" VALUE="your name here" SIZE=30> Then take the NAME you have designated here and place it in the Required Fields hidden entry, as shown above. You can place more than one field in the Required Fields tag. Just follow the above example and enclose the desired fields in Quote marks and separate them with a comma, with no spaces between the different field names. return to top How can I provide a hypertext link for people to go back to my web page after they've submitted my form? Insert a Hidden Entry. This is code that you insert that doesn't show up to people visiting your page. Anywhere between the <FORM> and <FORM> tags, insert the below two tags: <INPUT TYPE=hidden NAME="continue_url" VALUE="http://www.url.com"> Replace http://www.url.com with the Web address to which you want to direct people. <INPUT TYPE=hidden NAME="continue_text" VALUE="Thanks for filling out the form. Return to the main site."> Replace the text after VALUE= with any text you want to appear when people are done with your form. return to top How do I insert a subject heading that will show up in the email message? Insert a Hidden Entry. This is code that you insert that doesn't show up to people visiting your page. Anywhere between the <FORM> and <FORM> tags, insert the below two tags: <INPUT TYPE=hidden NAME=subject VALUE=Reservation Form> Replace Reservation Form with any text you want. Keep it short. This text will appear in the subject portion of your email Inbox after the word Webmail. If you have created more than one form, this can help you sort out your results. return to top


	Last updated December 1998 Return to the Editor's Corner Return to UW Oshkosh Contact neises@uwosh.edu