HomeSitemapForumsLessons  

HTML Lesson 4

Forms

A form used in HTML is used to send information to a destination. HTML is used to create the forms but to perform the action that will be taken requires other program languages like java, C or perl. You can place several forms within one HTML page but you cannot nest your forms. Below you will find each of the tags and attributes that can be placed within a form.

<FORM> </FORM> You form but begin with the <FORM> tag and end with the </FORM> tag. There are 3 attributes that are used with the <FORM> tag, they are ACTION, METHOD and ENCTYPE.

ACTION Attribute instructs the browser where it should send the data collected on the form. You can tell the browser to just send the data to your email or you can us a program to send your data. You would need some knowledge in programming in the other language to use them for your data.

METHOD Attribute explains how the information will be sent, either POST or GET.

ENCTYPE Attribute will determine the format the information will be sent. You get three choices applications/x-www-form-urlencoded (default), multipart/formdata and text/plain.

applications/x-www-form-urlencoded - this will send the data converting the spaces to the "&" sign and non-alphanumeric characters to the "%" sign. It will also be mailed as an attachment.

multipart/formdata - this value should be used when the form is set up to accept files. I don't suggest using this as we all know files can contain viruses.

text/plain - this will send the form data in plain text displaying each field of the form on a separate line.

Form Fields

<INPUT> This tag is used to specify the kind of field that will be placed on the form. The fields used are buttons, check boxes, images, one-line text fields, passwords and radio buttons. Then there are attributes that can be used for with the <INPUT> tag.

Attributes

ALIGN - alignment can be set to left, right, center and justify
CHECKED - Default check this field
COLS - set the width of a text area
MAXLENGTH - set the maximum number of characters allowed in a text field
NAME - sets the name of the field
ROWS - sets the amount of rows allowed in the text area
SIZE - sets the size of the field in characters
VALUE - sets the default value to be displayed on the form when viewed
SRC - used with the IMAGE input to specify the url to use for the image
TYPE - specifies the type of field being used

BUTTON FIELD is used with scripts like JavaScript. Although the button will look similar to the Reset and Submit buttons it does not work the same way.

<INPUT TYPE="button" NAME="ADD" VALUE="ADD">

CHECK BOX provides the user with selectable boxes. The tag used is <INPUT TYPE="CHECKBOX"> By using the CHECKED attribute it sets the default box to be chosen. When using the CHECK BOX Field you are enabling the user to check off more than one choice.

<FORM>

<INPUT TYPE="CHECKBOX" NAME="1" CHECKED> ONE
<INPUT TYPE="CHECKBOX" NAME="2" CHECKED> TWO
<INPUT TYPE="CHECKBOX" NAME="3"> THREE

</FORM>

 

ONE TWO THREE


SELECTION FIELDS The Selection field allows for a number of options to choose from. This field will require the use of the <SELECT> tag and the <OPTION> tag.

 

The Selection field using just one default selection. If the user was to select a different number the defaulted selection would not be submitted.

 

<SELECT NAME="Amount">

<OPTION> One

<OPTION> Two

<OPTION SELECTED> Three

<OPTION> Four

</SELECT

 

The Selection field using more than one selection using the MULTIPLE attribute. The multiple attribute allows the user filling out the form to choose from 0-all of the options in the list.

<SELECT NAME"Amount" MULTIPLE>
<OPTION SELECTED> One
<OPTION> Two
<OPTION SELECTED> Three
<OPTION> Four
</SELECT>

 

HIDDEN These fields are much like the text fields only they are not seen by the user filling out the form. It is used to submit information that has not been entered by the person filling in the form. The Hidden tag will look like <INPUT TYPE="Hidden"> and use the Name attribute and the Value attribute. What the line below will do is add a subject line to the data being sent. The person filling out the form will never see this but the recipient of the form will have this field added to their information received along with the senders own data that was entered.

 

<INPUT TYPE="hidden" NAME="Subject" VALUE="Form Submit">

 

IMAGE BUTTON You can use an image for a button instead of using the plain buttons created with the SUBMIT or RESET or BUTTON types.

<FORM>

<INPUT TYPE="image" NAME="submit" SRC="images/write2me.gif" ALT="Submit">

</FORM>

 

 

PASSWORD FIELD will work like a text field only you cannot see the text that you type. The tag used is <INPUT TYPE="PASSWORD">

<FORM>

<INPUT TYPE="PASSWORD" NAME="Password" SIZE=20>

</FORM>

 

 

RADIO BUTTON is similar to the CHECK BOX as it provides one a selection to choose from. The tag used is <INPUT TYPE="RADIO"> It will use the CHECKED attribute to specify the default choice. The RADIO BUTTON does not allow more than one choice.  If the Radio Buttons are not all named the same they will not work properly, therefore setting a value for them will allow you to distinguish which button has been chosen.

 

<FORM>

<INPUT TYPE="RADIO" NAME="choose" VALUE="One"> One

<INPUT TYPE="RADIO" NAME="choose" VALUE="Two" CHECKED> Two

<INPUT TYPE="RADIO" NAME="choose" VALUE="Three"> Three

</FORM>

 

One Two Three

 

RESET & SUBMIT BUTTONS are used to either reset the form, deleting any data that has been entered or to submit the form, sending the data to the url specified in the ACTION attribute. Although the  TYPE will either be "RESET" or "SUBMIT" the VALUE attribute can be set to any desired text.

 

<FORM>

<INPUT TYPE="RESET" VALUE="Reset">

<INPUT TYPE="SUBMIT" VALUE="Submit">

<INPUT TYPE="RESET" VALUE="Clear Form">

<INPUT TYPE="RESET" VALUE="Send">

</FORM>

 

 

TEXT FIELD allows the field to have a single-line entry The tag used is <INPUT TYPE="TEXT"> The attributes that can be used to control the field are VALUE, SIZE and MAXLENGTH.

<FORM>

<INPUT TYPE="text" NAME="Text" SIZE=20 MAXLENGTH="20" VALUE="Type here">

</FORM>

 

 

TEXT AREA allows you to create a field in which a large amount of text can be entered. This field uses the <TEXTAREA> tag with the ROWS and COLS attributes to determine the width and length of the text field.

<TEXTAREA ROWS="5" COLS="50" NAME="OPINION">
Enter your opinion in this area
</TEXTAREA>

Organizing Forms

By using the <FIELDSET> and the <LEGEND> tags you can organize parts of your form. The <FIELDSET> tag groups data fields that you select into one group, it creates a box around the fields you have specified to be included in the group. The <FIELDSET> must begin with the <LEGEND> tag to provide a title for the group.

<FORM>
<FIELDSET>
<LEGEND>Personal Information</LEGEND>
Name: <INPUT TYPE="text" NAME="Name" Size="20"><BR>
Address: <INPUT TYPE="text" NAME="Address" Size="30"><BR>
City: <INPUT TYPE="text" NAME="City" Size="20"><BR>
Province: <INPUT TYPE="text" NAME="Province" Size="20"><BR>
Postal Code: <INPUT TYPE="text" NAME="PostalCode" Size="7"><BR>
</FIELDSET>
<TEXTAREA ROWS=4 COLS=40 NAME="Comments">Enter your comments here</TEXTAREA>
</FORM>

Personal Information Name:
Address:
City:
Province:
Postal Code:

Click here to see a simple form created to email me.

 

   Site Map

    Copyright 2001-2005 Margaret Walker