Forms Example


Visitors to your page can type text into text boxes:
<INPUT TYPE=text NAME=MyTextBox SIZE=20>

What is your name?

We can use the VALUE attribute to give the text box a default reply:
<INPUT TYPE=text NAME=TextBoxWithDefault VALUE="Hello!" SIZE=20>

What would you like to say?

TEXTAREAs can be used if you want some more space to put text. Any text between the <TEXTAREA> and the </TEXTAREA> will be displayed as the default text:
<TEXTAREA NAME=BigBox ROWS=5 COLS=30>Lots of room to type!</TEXTAREA>

What do you like about <TEXTAREA>'s?


Checkboxes allow visitors to select one or more options:

<INPUT TYPE=checkbox NAME=PossibleMajors VALUE="CS">
<INPUT TYPE=checkbox NAME=PossibleMajors VALUE="Egyptology">
<INPUT TYPE=checkbox NAME=PossibleMajors VALUE="Other">

Select any majors you're thinking about:
Computer Science Egyptology Some other, not-as-cool major


Radio buttons let users select one option:

<INPUT TYPE=radio NAME=Year VALUE="01">
<INPUT TYPE=radio NAME=Year VALUE="02">
<INPUT TYPE=radio NAME=Year VALUE="00">
<INPUT TYPE=radio NAME=Year VALUE="Other">

What year are you?
I'm part of the #1 class of '01!
I'm part of the pretty cool class of '02!
I'm class of '00. I'm a zero.
I'm something else.


<SELECT>...<SELECT> creates a pulldown menu of options. It takes up less screen space than radio buttons, so it's useful if you have lots of options for your visitor to choose form:

<SELECT NAME=FavoriteBuilding>
<OPTION VALUE="CIT">The CIT, of course!</OPTION>
<OPTION VALUE="UHall">University Hall</OPTION>
<OPTION VALUE="Rock">The Rock</OPTION>
<OPTION VALUE="InfantLab">The Infant Lab. What goes on in there anyway?</OPTION>
</SELECT>

What is your favorite building on campus?


Submit buttons submit the visitor's answers to the URL specified as the ACTION of the form, while reset buttons reset the entire form to the default answers:

<INPUT TYPE=submit NAME=SubmitButton VALUE="Submit my answers!">
<INPUT TYPE=reset NAME=ResetButton VALUE="Reset this form!">


Don't forget to end the form at the end with a </FORM> tag!


Return to the HTML tutorial