The <form> tag

With the form tag you can add to your web pages a guestbook, order forms, surveys, get feedback or whatever.

The basic construction of a HTML form is this...

  <form>   - begin a form
  <input>  - ask for information in one of several different ways
  <input>  - there can be as many input areas as you wish
  </form>  - end a form

Text fields

let's start out with the basics. The <input> has a few attributes that you should be aware of.

  • type - Determines what kind of input field it will be. Possible choices are text, submit, and password.
  • name - Assigns a name to the given field so that you may reference it later.
  • size - Sets the horizontal width of the field. The unit of measurement is in blank spaces.
  • maxlength - Dictates the maximum number of characters that can be entered.

code:

<form method="post" action="mailto:[email protected]"> Name: <input size="10" maxlength="40" name="name"> <br /> Password: <input size="10" maxlength="10" name="password">
</form>

result:

Name:
Password:

check boxes

Check boxes allow for multiple items to be selected for a certain group of choices.

<form method="post" action="mailto:[email protected]">
Select your favorite cartoon characters.<br>
<input type="checkbox" name="toon" value="Goofy">Goofy<br>
<input type="checkbox" name="toon" value="Donald">Donald<br>
<input type="checkbox" name="toon" value="Bugs">Bugs Bunny<br>
<input type="checkbox" name="toon" value="Scoob">Scooby Doo<br>
<input type="submit" value="Email Myself">
</form>

Select your favorite number.
1
2
3
4

Text area

 the text area is used as a way to write comments to somebody.

Rows and columns need to be specified as attributes to the <textarea> tag. Rows are roughly 12pixels high, the same as in word programs and the value of the columns reflects how many characters wide the text area will be. Another attribute to be aware of is the wrap. Wrap has 3 values.

  • wrap=
    • "off"
    • "virtual"
    • "physical"
Virtual means that the viewer will see the words wrapping as they type their comments, but when the page is submitted to you, the web host, the document sent will not have wrapping words.

Physical means that the text will appear both to you, the web host, and the viewer including any page breaks and additional spaces that may be inputed. The words come as they are.

Off of course, turns off word wrapping within the text area. One ongoing line.

HTML Code: 

<form method="post" action="mailto:[email protected]"> <textarea rows="5" cols="20" wrap="physical" name="comments"> Enter Comments Here </textarea> <input value="Email Yourself"> </form>

result:



<feedback>