HTML Class - Fall 2002
HTML Forms and Input
HTML Forms are used to select different kinds of user input.
Forms
A form is an area that can contain form elements and is used to have the web visitor "request something" of the server. A form's purpose can be everything from entering credit card information for an online purchasing site to sending an email.
Form elements are elements that allow the user to enter information (like
text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.)
in a form.
A form is defined with the <form> tag.
Input
The most used form tag is the <input> tag. The type of input is
specified with the type attribute. The most commonly used input types are
explained below.
Text Fields
Text fields are used when you want the user to type letters, numbers, etc. in
a form.
How it looks in a browser:
Note that the form itself is not visible. Also note that in most browsers,
the width of the text field is 20 characters by default.
Radio Buttons
Radio Buttons are used when you want the user to select one of a limited
number of choices.
How it looks in a browser:
Note that only one option can be chosen.
Checkboxes
Checkboxes are used when you want the user to select one or more options of a
limited number of choices.
How it looks in a browser:
The Form's Action Attribute and the Submit Button
When the user clicks on the "Submit" button, the content of the form is sent
to another file. The form's action attribute defines the name of the file to
send the content to. The file defined in the action attribute usually does
something with the received input.
How it looks in a browser:
If you type some characters in the text field above, and click the "Submit"
button, you will send your input to a page called "html_form_test.asp". That
page will show you the received input.
Form Tags
Tag |
Description |
<form> |
Defines a form for user input |
<input> |
Defines an input field |
<textarea> |
Defines a text-area (a multi-line text input control) |
<select> |
Defines a selectable list (a drop-down box) |
<option> |
Defines an option in the drop-down box |
|