a simple guide to forms in html

7/23/2019 a simple guide to forms in html

http://slidepdf.com/reader/full/a-simple-guide-to-forms-in-html 1/17

Lesson 5 The Forms UnitII

Forms Option button Checkbox

Password Name Type

The Forms

The Forms is a type of display format similar to a paper which you use to ll

in information. It is used to gather or collect data sent in an application form. The

Forms can contain input elds, selection lists, and input boxes. There are attributes

that can be used to Forms. They are: (1) the ACTION, (2) the ENCTYPE, (3) the METO!, (4)

the NAME, and (5) the TA"#ET attributes. The ACTION attribute specifies the $"% where the

contents of the Form will be submitted. The $"% or the Uniformed Resource Location is the

actual location where the Form is submitted. hen ACTION is omitted, the $"% of the

document itself is assumed. The ACTION attribute also defines what happens when the user

clic!s on the &ubmit button in submittin" a Form. The ENCTYPE attribute is used to specify

the format of the submitted data, in case the protocol specified by the METO! attribute does

not impose any format. The METO! attribute is used to specify the method to be used by the

protocol. #sually, the method used is the #ET method or PO&T method. The NAME attribute is

used to specify a form name used by $%&cript or 'aa&cript. The TA"#ET attribute is used tospecify the tar"et frame where the response pa"e is show up.

The Form is created usin" the 'FO"M( as the startin" ta" and ')FO"M( as the endin"

ta". These ta"s define the start and end of a fillintheblan! Form*

KEYWORDS




The followin" shows an e*ample of a Form*

The followin" shows the Table of Forms Attributes and their short description.

Attributes !escriptionACTION &pecifies the #+ of the -orm where the actual data is submitted,

processed and sent a response bac! to the browser.

ENCTYPE etermines the mechanism used to encode the -orm contents. /t

specifies the format to be used in the -orm.METO! &pecifies the method to be used in sendin" the -orm0s contents to

the web serer. The T and &T method are usually used.NAME &pecifies the form name to be sued by the $% and '$ scripts.

TA"#ET &pecifies the tar"et frame where the response pa"e is shown.




The Form Elements

There are elements that build up a Form. These elements are !"# the input

felds which are specied by INPUT, !$# the selection lists which are specied by

SELECT, and !%# the input boxes which are specied by TEXT AREA elements.

The INPUT

The INPUT element denes the input elds where the user may enter

information on the Form. The INPUT is dened by using the <INPUT> </INPUT>

tags. There are attributes used in INPUT tags. They are the TYPE NA!E

C"ECKED #ALUE SI$E, and !AXLEN%"T& The following shows the INPUT Attr'()tes and their short description.

Attributes !escriptionTYPE efines the format of the input data

NAME &pecifies the ariable name passed to 6/ (6ommon ateway

pplication)CEC+E! &pecifies that the input field is chec!ed by default

,A%$E &pecifies the data associated with the ariable name to be passed

to the 6/ (6ommon ateway pplication)

&I-E &pecifies the number of characters in the te*t fieldMA.%EN#T &pecifies the ma*imum number of characters accepted

The Form elements hae properties. -or e*ample, the TYPE attribute of the INP$T

element can use some input data format such as TE.T/ PA&&0O"!/ CEC+1O./ "A!IO/

&$1MIT, and "E&ET data input format.


The Te*t

The Text defines the input type as character data. This can be used to proide input

fields for te*t, phone numbers, dates, and others.



%elow is an TM% Pro2ram usin" the element INP$T in Form.

TM% Pro2ram 3


The followin" is the Pro2ram Output of the TM% Pro2ram 3 showin" input bo*es in

the -orm.

&yntax4

'INP$T TYPE 5 6TE.T78



Pro2ram Output 3


The assword



The Password defines the input type as password character data. /t is used to enter a

password.

nother TM% Pro2ram applyin" the element as!in" for a password is presented below.

TM% Pro2ram 9


&yntax4

'INP$T TYPE 5 6PA&&0O"!78



The followin" is the Pro2ram Output of the TM% Pro2ram 9 showin" a Password as

an INP$T Type.

Pro2ram Output 9

The 6hec!bo*



The Checkbox defines input type as a chec!bo*. /t is used to allow the users to select

more that one option at the same time.

Pro2ram &amp:e

Pro2ram Output


The +adio

&yntax4

'INP$T TYPE 5 6CEC+1O.78



The "adio defines input type as a radio button. /t is used to allow the users to select only

one option at a time.

Pro2ram &amp:e

Pro2ram Output


&yntax4

'INP$T TYPE 5 6"A!IO78



The &ubmit

The &ubmit button defines input type as a submit button form data. /t is used to carry

out a command or action submittin" the -orm data application. /t causes the browser to send

the names and alues of 6T/7 attribute of the -orm elements.

Pro2ram &amp:e

Pro2ram Output


&yntax4

'INP$T TYPE 5 6&$1MIT78



The +eset

The "eset button defines input type as a reset button form data. /t is used to allows the

user to clear all the input in the -orm.

Pro2ram &amp:e

Pro2ram Output

&yntax4

'INP$T TYPE 5 6"E&ET78




The SELECT

The SELECT element denes a list of options that can be selected from a pull&down list in the current Form. The SELECT is dened by using the <SELECT>

</SELECT> tags. There are attributes used in SELECT tags. They are the NA!E

SI$E, and !ULTIPLE.

The following shows the SELECT Attr'()tes and their short description.

Attributes !escriptionNAME &pecifies the name for the selection list&I-E &pecifies the number of options or choices that is aailable in the

selection lists.M$%TIP%E /ndicates that multiple selection are allowed from the selection list

There is one element that can be associated to &E%ECT in creatin" a selection lists. /t is

the OPTION element. The OPTION element is defined as 'OPTION( ')OPTION( ta"s. These

ta"s denote the option or selection item in the selection lists.

The ption

The Option defines the selection item in the selection lists. This element represents onechoice in the selection list. The Option element only occurs within the &E%ECT statement and

does not support other 8T9 elements.

The followin" is the synta* of OPTION element.

&yntax4

'OPTION( ')OPTION(




Pro2ram &amp:e

Pro2ram &amp:e




The TEXT AREA

The TEXT AREA element is used to display a space to allow the users to enter

multiple lines of text. The TEXT AREA is dened by using the <TEXT AREA>

</TEXT AREA> tags. There are attributes used in TEXT AREA tags. They are the

NA!E ROWS COLS and WRAP.

The following shows the TEXTAREA Attr'()tes and their short description.

Attributes !escriptionNAME &pecifies the name that implies the type of information you want to

collect"O0& &pecifies the number of rows of te*tbo*

CO%& &pecifies the number of columns of te*tbo*0"AP &pecifies the te*t wraps in the browser.

The following is the syntax of the TEXT AREA element.

Pro*r+m S+m,le

&yntax4

'TE.T A"EA( ')TE.T A"EA(




Pro*r+m O)t,)t

• The Forms is a type of display format similar to a paper which you use to

ll&in information. It is used to gather or collect data sent in an application

form.

• There are attributes that can be used to Forms. They are: (1) the ACTION, (2) the

ENCTYPE, (3) the METO!, (4) the NAME, and (5) the TA"#ET attributes.

• The Form is created usin" the 'FO"M( as the startin" ta" and ')FO"M( as the

endin" ta". These ta"s define the start and end of a fillintheblan! Form*

• There are elements that build up a Form. These elements are' !"# the

input felds which are specied by INPUT, !$# the selection lists which are

+EYPOINT&



specied by SELECT, and !%# the input boxes which are specied by TEXT

AREA elements.


• The INPUT element denes the input elds where the user may enter

information on the Form. The INPUT is dened by using the <INPUT>

</INPUT> tags. There are attributes used in INPUT tags.

• The SELECT element denes a list of options that can be selected from a

pull&down list in the current Form. The SELECT is dened by using the

<SELECT> </SELECT> tags. There are attributes used in SELECT tags.

• The TEXT AREA element is used to display a space to allow the users to

enter multiple lines of text. The TEXT AREA is dened by using the <TEXT

AREA> </TEXT AREA> tags. There are attributes used in TEXT AREA

tags.

• The Text defines the input type as character data. This can be used to proide input

fields for te*t, phone numbers, dates, and others.

• The Password defines the input type as password character data. /t is used to enter

a password.

• The Option defines the selection item in the selection lists. This element represents

one choice in the selection list. The Option element only occurs within the &E%ECT

statement and does not support other 8T9 elements.

• The "eset button defines input type as a reset button form data. /t is used to allows

the user to clear all the input in the -orm.



Lesson 5 The Forms Unit

II

"ANDS-ON ACTI#ITY.

a simple guide to forms in html

Documents