Creating Interactive Web Pages Using HTML Forms

http://polyglot.lss.wisc.edu/workshop/forms

Karen Tusack, Learning Support Services, Nov. 2000
karen@lss.wisc.edu

Let's build a form....

The entire form must be between the <FORM> and </FORM>codes, so start by typing in

<FORM>

For a simple form whose data is emailed to you in a somewhat readable format, use the following code directly after the <FORM> code. It tells the browser what kind of information will be in the form, what to do with the information in the form elements and whom to send it to. (This is "hidden" code: nothing will appear on your web page.)

<FORM METHOD="POST" ACTION="mailto:nobody@lss.wisc.edu?SUBJECT=Form from my home page" ENCTYPE="text/plain">

Form elements - "Inputs"

Text Box (or Text Line)

Name: <INPUT TYPE="TEXT" NAME="name" SIZE=40>

Name:

Text Area

Comments:
<TEXTAREA NAME="comments" ROWS=7 COLS=40> </TEXTAREA>

Comments:

Select List (or "Drop-down Box")

Which cartoon character to you like best? <SELECT NAME="favorite character"SIZE="1"> <OPTION SELECTED>Stimpy <OPTION>Mickey Mouse <OPTION>Bugs Bunny <OPTION>Betty Boop</SELECT>

(note: the SIZE= parameter determines the number of "choices" that will be displayed at any one time.)
Which cartoon character do you like best?

Radio Button

Do you think HTML Forms are cool? Yes<INPUT TYPE="radio" NAME="Are forms cool?" VALUE="yes"CHECKED>
No<INPUT TYPE="radio" NAME="Are forms cool?" VALUE="no">
Maybe<INPUT TYPE="radio" NAME="Are forms cool?" VALUE="maybe">

Do you think HTML Forms are cool?
Yes No Maybe

(Note: If the codes for each button are on separate lines (separated by a Line Break) the buttons will appear on separate lines as well. String them together to make the buttons appear across in one line. (I have them on separate lines in the code example for display purposes only.) NAME is important for email purposes: it lets you know what the yes/no/maybe that shows up in your email message is referring to. You set a default choose by using the CHECKED code. Only one radio button in the group can be chosen at any time.)

Checkbox

Which Web courses have you already taken from us? (Check all that apply)Intro to the Internet<INPUT TYPE="checkbox" NAME="prereqs" VALUE="Intro">
WWW Searches<INPUT TYPE="checkbox" NAME="prereqs" VALUE="Searches">
Web Page in a Day<INPUT TYPE="checkbox" NAME="prereqs" VALUE="pageday">
HTML<INPUT TYPE="checkbox" NAME="prereqs" VALUE="HTML">
HTML Forms<INPUT TYPE="checkbox" NAME="prereqs" VALUE="Forms">

Which Web courses have you already taken from us? (Check all that apply)
Intro to the Internet WWW Searches Web Page in a Day HTML HTML Forms

(Note: Again, stringing the box codes all together with no page breaks puts the boxes all on one line in your page, while separating them on separate lines (with a Line Break between them) will make the boxes appear one-to-a-line. NAME is still important for the same reason as above.)

Submit and Reset Buttons

<INPUT TYPE="submit"> <INPUT TYPE="reset">

Finish Your Form

Use the </FORM> code to end your form.

</FORM>

Back to Main Page