Forms

Forms are a vital tool for webmasters in order to receive information from there web surfers, such as: their name, email address, credit card details, etc. A form will take input from the viewer and depending on your needs, you may store that data into a file, place an order, gather user statistics, register the person to your web forum, or maybe subscribe them to your weekly newsletter.

Now before we show you how to make a complete form, let's start with the basics of forms. Now input fields will be the main meat inside your form's sandwich. 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, password and more.
• 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:youremail@email.com">
Name: 
<input type="text" size="10" maxlength="40" name="name"> <br />
Password: 
<input type="password" size="10" maxlength="10" name="password">
</form>

Name: Password:

You should not use the password feature for security purposes. The data that is in the password field is not encrypted and is not secure in any way.

EMAIL FORM

Now we are going to add the sumbit functionality to the form. Generally, the submission button should be the last item of your form and have it's value attribute changed to "Send" or "Submit". The value defines what the label of the button will be. Here is a list of important attributes of the submit:

In addition to adding the submit button, we must also add a destination for this information and specify how we want it to travel to that place. Adding the following attributes to your <form> will do just this.

• METHOD - We are only going to use the post functionality of method, which sends the data without displaying any of the information to the visitor.
• ACTION - Specifies the URL you wish to send the data to. We will be sending our information to a fake email address.

<form method="post" action="mailto:youremail@email.com">
Name: 
<input type="text" size="10" maxlength="40" name="name"><br />
Password: 
<input type="password" size="10" maxlength="10" name="password">
<br />
<input type="submit" value="Send"> 
</form>

Name: Password:

Now simply put in your own email address and you will have set up your first functional form!

RADIO BUTTONS

Radio buttons are a common way of interaction with forms. You may have seen them on quizzes, questionnaires, and other web sites that give the user a multiple choice question. Below are a couple attributes you should know that relate to the radio button.

• VALUE - specifies what will be sent if the user chooses this radio button. Only one value will be sent for a given group of radio buttons (see name for more information).
• NAME - defines which set of radio buttons that it is a part of. Below we have 2 groups: shade and size.

CODE

<form method="post" action="mailto:youremail@email.com">
What kind of shirt are you wearing? <br />
Shade: 
<input type="radio" name="shade" value="dark">Dark
<input type="radio" name="shade" value="light">Light <br />
Size:
<input type="radio" name="size" value="small">Small
<input type="radio" name="size" value="medium">Medium
<input type="radio" name="size" value="large">Large <br />
<input type="submit" value="Email Myself">
</form>

What kind of shirt are you wearing? Shade: Dark Light Size: Small Medium Large

Now if you change the email address to your own and "Email Myself" then you should get an email with "shade="(choice)" size="(choice)".

CHECK BOXES

Check boxes allow for a selection of multiple items for a certain group of choices. The check box's name and value attributes behave the same as a radio button.

CODE

<form method="post" action="mailto:youremail@email.com">
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 cartoon characters. Goofy Donald Bugs Bunny Scooby Doo

DROP DOWN LISTS

Drop down menues are created with the <select> and <option> tags. <select> is the list itself and each <option> is an available choice for the user.

CODE

<form method="post" action="mailto:youremail@email.com">
College Degree?
<select name="degree">
<option>Choose One</option>
<option>Some High School</option>
<option>High School Degree</option>
<option>Some College</option>
<option>Bachelor's Degree</option>
<option>Doctorate</option>
<input type="submit" value="Email Yourself">
</select>
</form>

College Degree? Choose One Some High School High School Degree Some College Bachelor's Degree Doctorate

SELECTION FORM

Yet another type of form, a highlighted selection list. This form will post what the user highlights. Basically just another type of way to get input from the user.

The size attribute selects how many options will be shown at once before needing to scroll, and the selected option tells the browser which choice to select by default.

<form method="post" action="mailto:youremail@email.com">
Musical Taste<br />
<select multiple="multiple" name="music" size="4">
<option value="emo" selected="selected">Emo</option>
<option value="metal/rock" >Metal/Rock</option>
<option value="hiphop" >Hip Hop</option>
<option value="ska" >Ska</option>
<option value="jazz" >Jazz</option>
<option value="country" >Country</option>
<option value="classical" >Classical</option>
<option value="alternative" >Alternative</option>
<option value="oldies" >Oldies</option>
<option value="techno" >Techno</option>
</select>
<input type="submit" value="Email Yourself">
</form> 

Musical Taste Emo Metal/Rock Hip Hop Ska Jazz Country Classical Alternative Oldies Techno

TEXT AREAS

Text areas serve as an input field for viewers to place their own comments into. Forums like to use text areas to post what you type onto their site using scripts. For this form, 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. i.e. The example below shows a text area 5 rows tall and 20 characters wide. 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.

CODE

<form method="post" action="mailto:youremail@email.com" 
      name="comments">
<textarea rows="5" cols="20" wrap="physical">
Enter Comments Here
</textarea>
<input type="submit" value="Email Yourself">
</form> 

Enter Comments Here

Also note that any text placed between the opening and closing textarea tags will show up inside the text area when the browser views it.

• Remember to name and value your forms so the document created will be neatly organized.
• Remember to place submit buttons with the form tags to submit the document correctly.

INDEPENDANT PRACTICE
Try making your own forms with a mixture of the above inputs for practice on your site and try using the different attributes as well.

Top of page | Previous Lesson| Lessons Index | Next Lesson