Forms

FORMS
A form is a web page which allows the user to enter information, it also allows the
user to interact with the contents of the form. To insert a form we use the <FORM>
</FORM> tags. The rest of the form elements such as text boxes, check boxes pull down
menus and so on must be inserted in between the form tags.

Example:

<HTML>
<HEAD>
<TITLE>Sample Form</TITLE>
</HEAD>
<BODY BGCOLOR=FFFFFF>
<FORM ACTION=http://www.UnitedPublishers.com
/input.asp>
<P>Name: <INPUT TYPE=TEXT NAME=name
MAXLENGTH=50"><BR>
Book Name: <INPUT TYPE=TEXT NAME=bname
MAXLENGTH=50">
</P>
<P><INPUT TYPE=SUBMIT NAME=Submit1"
VALUE=Send Info></P>
</FORM>
</BODY>
</HTML>

The attributes of the <FORM> element are:

ACTION:
This attribute is the URL of the CGI (Common Gateway Interface) program that is
going to accept the data from the form, process it, and send a response back to the
browser.

METHOD:
This attribute has values such as GET (default) or POST which specifies which
HTTP method will be used to send the forms contents to the web server. The CGI
application should be written to accept the data from either method.

ENCTYPE:
This attribute determines the mechanism used to encode the form contents.
You can leave this attribute as default (unspecified) unless you are creating a file
upload field.

NAME:
This attribute is a form name used by VB or JAVA scripts.

TARGET:
This attribute represents the target frame where the response page will show up.

The rest of the form elements are used to create the form seen in the browser and
collect the data to be sent to the application. A good way to format a FORM and its sub
elements is to use a table. With a table you have more control over the layout of your page.
The table can be created inside the <FORM></FORM> tags.

FORM ELEMENTS

Form elements have properties such as Text boxes, Password boxes, Checkboxes,
Option (Radio) buttons, Submit, Reset, File, Hidden and Image. The properties are
specified in the TYPE Attribute of the HTML element <INPUT> </INPUT>.

<INPUT> Elements Properties

1. TYPE = This value indicates the type of INPUT entry field which
can include text, password, checkbox, radio, file,
hidden, image and so on.
2. NAME = It represents a variable name passed to CGI application.
3. VALUE = The data associated with the variable name to be passed
to the CGI application.
4. CHECKED = This value indicates that the Button/box is checked
by default.
5. SIZE = This value indicates the number of characters in the
text field.
6. MAXLENGTH = This value indicates the maximum number of
characters that can be accepted
INPUT TYPES

1. TEXT BOXES
These boxes are used to provide input fields for text, phone numbers, dates and so
on.

Example:
<INPUT TYPE=TEXT>

Browser will display

Textboxes use the following attributes:

1. TYPE indicates the type of data which is text.
2. SIZE determines the size of the textbox in characters. Default = 20
characters
3. MAXSIZE determines the maximum number of characters that the field
will accept.
4. NAME is the name of the variable to be sent to the CGI application.
5. VALUE will display its contents as the default value.

2. Password
These boxes are used to allow the entry of passwords.

Example:
<INPUT TYPE=PASSWORD>

Text typed in a password box is starred out in the browser display.

Password boxes use the following attributes:

1. TYPE indicates the type of data which is password
2. SIZE determines the size of the textbox in characters.
3. MAXSIZE determines the maximum size of the password in characters.
5. VALUE is usually blank.

3. Hidden

These boxes are used to send data to the CGI application that you dont want the
web surfer to see, change or have to enter but is necessary for the application to process
the form correctly.

Example:
<INPUT TYPE=HIDDEN>

Nothing is displayed in the browser.

Hidden inputs have the following attributes:

1. TYPE indicates the type of data which is hidden
3. VALUE is usually set to a value expected by the CGI application.

4. Check Box

These boxes are used to allow the users to select more than one option.

Example:
<INPUT TYPE=CHECKBOX>


Checkboxes have the following attributes:

1. TYPE indicates the type is a checkbox.
2. CHECKED indicates whether the box is blank or CHECKED as the initial
status
4. VALUE is usually set to a value.

5. Radio Button
The Radio buttons allow users to select only one option among a list of options.

Example:
<INPUT TYPE=RADIO>


Radio buttons have the following attributes:

1. TYPE indicates the type is a radio button.
2. CHECKED is blank or CHECKED as the initial status. Only one radio
button can be checked.
4. VALUE usually has a set value.

6. File Upload
You can use a file upload to allow surfers to upload files to your web server.
xample:
<INPUT TYPE=FILE>

File Upload has the following attributes:

2. SIZE is the size of the text box in characters.
3. MAXSIZE is the maximum size of the input in the textbox in characters.
4. ENCTYPE is a list of (MIME) types that the field can be used to upload.

7. Push Button
This element would be used with either JavaScript or VBScript to cause an action
to take place.

Example:
<INPUT TYPE=BUTTON>


Push Button has the following attributes:

1. TYPE indicates the type is a Button
2. NAME is the name of the button to be used in scripting.
3. VALUE determines the text label on the button.

8. Submit
Every set of Form tags requires a Submit button. This is the element that causes
the browser to send the names and values of the other elements to the CGI Application
specified by the ACTION attribute of the FORM element.

Example:
<INPUT TYPE=SUBMIT>


Submit has the following attributes:

1. TYPE indicates the type is submit
2. NAME value used by the CGI script for processing
3. VALUE determines the text label on the button, usually it is Submit Query.

9. Image Submit Button
Allows you to substitute an image for the standard submit button.

Example:
<INPUT TYPE=IMAGE SRC=URL>

Image submit button has the following attributes:

1. TYPE indicates that the type is a Image
2. NAME is the name of the button to be used in scripting.
3. SRC URL of the Image file.

10. Reset
It is a good idea to include one of these for each form where users are entering data.
It allows the surfer to clear all the input in the form.

Example:
<INPUT TYPE=RESET>


Reset buttons have the following attributes:

1. TYPE indicates that the type is reset
2. VALUE determines the text label on the button, usually Reset.

OTHER ELEMENTS USED IN FORMS

1. Text Area

This element is enclosed by the tags <TEXTAREA> </TEXTAREA> it is an element
that allows for free form text entry.


Text area has the following attributes:

2. ROWS the number of rows to the textbox.
3. COLS the number of columns to the textbox.
4. WRAP defaults to OFF. You should set wrap to VIRTUAL or
PHYSICAL so that the text wraps in the browser display as
the surfer types.

2. Select

This element is enclosed by the tags <SELECT> </SELECT>, where the attributes
are set differently.

Select elements attributes are:

2. SIZE This sets the number of visible choices.
3. MULTIPLE The presence of this attribute signifies that the user can make
multiple selections. By default only one selection is allowed.

3. Drop Down List

Drop down elements attributes are:

2. SIZE 1

4. List Box

List Box elements attributes are:

1. NAME: is the name of the variable to be sent to the CGI application.
2. SIZE: is greater than one.

4. Option

The list items are added to the <SELECT> element by inserting <OPTION>
</OPTION> elements.

The Option Elements attributes are:

1. SELECTED When this attribute is present, the option is selected when
the document is initially loaded. It is an error for more than
one option to be selected.
2. VALUE Specifies the value the variable named in the select element.

Example:
<P>
<SELECT SIZE=1">
<OPTION VALUE=1" SELECTED=SELECTED>Item 1
</OPTION>
<OPTION VALUE=2">Item 2</OPTION>
</SELECT>
</P>

SOME EXAMPLES

Creating an Order Form
<HTML>
<HEAD>
<TITLE> UNITED SHOPPING </TITLE>
</HEAD>

<BODY TEXT = RED BGCOLOR=IVORY LINK=GREEN
VLINK=BLUE>
<FONT FACE=VERDANA COLOR=RED>
<CENTER>
<H1> UNITED SHOPPING CENTRE </H1>
<IMG SRC=UnitedShopping.jpeg ALIGN=BOTTOM
HSPACE=100" VSPACE=25 BORDER=1>
<IMG SRC=Line.gif HEIGHT =4" WIDTH = 400 HSPACE=15"
VSPACE=2>
</CENTER>

<FORM>
<P><INPUT TYPE=HIDDEN NAME =Passwd
VALUE=UP> Title:
<SELECT NAME=Title SIZE=1">
<OPTION VALUE =Mr.>Mr.</OPTION>
<OPTION VALUE=Mrs.>Mrs.</OPTION>
<OPTION VALUE=Ms.>Ms.</OPTION>
<OPTION VALUE=Dr.>Dr.</OPTION>
</SELECT>
<BR>
<BR>
Name:<INPUT TYPE=TEXT NAME=Name SIZE=20"
MAXLENGTH=25">
<BR>
<BR>
<BR>
Address:<INPUT TYPE=TEXT NAME=Addr SIZE=30"
MAXLENGTH=35">
<BR>
<BR>
<BR>
E-mail ID:<INPUT TYPE=TEXT NAME=Eid SIZE=30"
MAXLENGTH=50">
<BR>
<BR>
<BR>

Forms

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Forms

Uploaded by

Copyright:

Available Formats

FORMS

You might also like