A Mini-Menu:
Attributes of <Form>
<Input type>
Other Form Tags
Example of a Form

There are mainly only two different tags used in creating forms in HTML. A pair of <Form> and </Form> obviously indicate the beginning and end of a form, but more importantly, decide where and how the form is submitted. The Input element, generates the form itself. <Input> is not paired with a </input>, and in creating a form, the input tag or element should be nested inside <form> and </form>.

Attributes of <Form>

Action="URL" This attribute decides where the information is submitted, so, usually, the url is an e-mail link: "mailto:someone@somewhere.com"
Method="Get or Post" Method determines how the information will be submitted to the URL. The post method submits the gathered information to the url to be viewed. The get method is used when the information only needs to be processed at the URL and not viewed by a living being.


Types of <Input>

Type is actually an attribute of the input tag: <input type= "..">. However, like <img src= ".."> and <frame src= "...">, there has to be a type for every input. Aside from the type attribute, the name= "..." and value="..." attributes are almost always used with the input element. The name attribute is used to later identify the entries after it is submitted to the URL. The value attribute sets the starting values for certain types like Text. For radio buttons and checkboxes, the value attribute decides their meaning when they are checked. And for buttons, the value will be the label for the button.

Type Description Associated Attributes Example
Text An entry area of one line, where regular text is typed in and seen. size="#"
[visible size of textbox]
maxlength= "#"
[sets the max length of the entry]
Password Almost the same as text, except that the entered information is displayed as ***** size and maxlength
[see above]
Checkbox A checkbox. One, some, all, or none can be checked off. checked [placing this attribute will have the checkbox checked off at the beginning...ex.'s aren't checked] check 1
check 2
check 3
Radio A radio button, only accepts one value, generates choice. checked [see above]. If one of the buttons are checked, the others must be unchecked. yes no
Submit A button that submits the form The value= "..." attribute for this type labels the button.
Reset A button that erases the inserted information and returns the form to its starting values. [see above] The value for this button is Begin Again.


Other Tags Used to Create a Form

Aside from <form> and <input> tags the following are two other HTML tags used in creating a form. Like the input tag, these too have to be nested inside the form tag. And furthermore, these two main tags also have a name attribute.

Tag & Description Nested Tag or Attributes Description Example
<select> and </select> <option value= "what the option is"> Select creates a pull-down menu with a set of selections. The option element represents one of the selections in the set.
Pick a Color:
<Select name=color> <option value="1">Red <option value="2">Blue <option value="3">Yellow </select>
<textarea> and </textarea> cols="#" Width of entry area
rows="#" Height of entry area


An Example of a Form Using all the Tags & Attributes

The HTML code:

<Form action="mailto:someone@somewhere.com" method ="post">

Enter Full Name:
<INPUT type="text" name="Name" value ="Optional" maxlength="24" size="18">

<p>E-mail Address:
<INPUT type="text" name="email" maxlength="24" size="22">

<p>Enter Password:
<INPUT type= "password" name="Password" maxlength="18" size="15">

<p>Email-me Updates:
<INPUT type="checkbox" name="update "value = "yes" unchecked >

<p>Remember my password for next time:
<INPUT type="checkbox" name="keeppassword" value = "yes" checked >

<p>Please rate my site:
<br><INPUT type="radio" name="rating" checked >Outstanding
<INPUT type="radio" name="rating" unchecked >Good
<INPUT type= "radio" name="rating" unchecked> Satisfactory
<INPUT type="radio" name="rating" unchecked>Poor

<p>Select your gender:
<SELECT name="gender">
<option value= "girl">Female
<option value="boy"> Male
</select>

<p>Additional Comments:
<br><TEXTAREA cols=50 name=comments rows= 5> Feel Free to Comment</textarea>

<p><center><INPUT type="submit" value="Submit This Form" >
<INPUT type = "reset" value="Start Over" > </center>
</form>

What you see:
Enter Full Name:

E-mail Address:

Enter Password:

Email-me Updates:

Remember my password for next time:

Please rate my site:
Outstanding Good Satisfactory Poor

Select your gender:

Additional Comments: