Post on 18-Feb-2018
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
7/23/2019 a simple guide to forms in html
http://slidepdf.com/reader/full/a-simple-guide-to-forms-in-html 2/17
Lesson 5 The Forms UnitII
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.
Lesson 5 The Forms UnitII
7/23/2019 a simple guide to forms in html
http://slidepdf.com/reader/full/a-simple-guide-to-forms-in-html 3/17
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.
Lesson 5 The Forms UnitII
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.
7/23/2019 a simple guide to forms in html
http://slidepdf.com/reader/full/a-simple-guide-to-forms-in-html 4/17
%elow is an TM% Pro2ram usin" the element INP$T in Form.
TM% Pro2ram 3
Lesson 5 The Forms UnitII
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
7/23/2019 a simple guide to forms in html
http://slidepdf.com/reader/full/a-simple-guide-to-forms-in-html 5/17
Pro2ram Output 3
Lesson 5 The Forms UnitII
The assword
7/23/2019 a simple guide to forms in html
http://slidepdf.com/reader/full/a-simple-guide-to-forms-in-html 6/17
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
Lesson 5 The Forms UnitII
&yntax4
'INP$T TYPE 5 6PA&&0O"!78
7/23/2019 a simple guide to forms in html
http://slidepdf.com/reader/full/a-simple-guide-to-forms-in-html 7/17
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*
7/23/2019 a simple guide to forms in html
http://slidepdf.com/reader/full/a-simple-guide-to-forms-in-html 8/17
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 &:e
Pro2ram Output
Lesson 5 The Forms UnitII
The +adio
&yntax4
'INP$T TYPE 5 6CEC+1O.78
7/23/2019 a simple guide to forms in html
http://slidepdf.com/reader/full/a-simple-guide-to-forms-in-html 9/17
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 &:e
Pro2ram Output
Lesson 5 The Forms UnitII
&yntax4
'INP$T TYPE 5 6"A!IO78
7/23/2019 a simple guide to forms in html
http://slidepdf.com/reader/full/a-simple-guide-to-forms-in-html 10/17
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 &:e
Pro2ram Output
Lesson 5 The Forms UnitII
&yntax4
'INP$T TYPE 5 6&$1MIT78
7/23/2019 a simple guide to forms in html
http://slidepdf.com/reader/full/a-simple-guide-to-forms-in-html 11/17
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 &:e
Pro2ram Output
&yntax4
'INP$T TYPE 5 6"E&ET78
7/23/2019 a simple guide to forms in html
http://slidepdf.com/reader/full/a-simple-guide-to-forms-in-html 12/17
Lesson 5 The Forms UnitII
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(
7/23/2019 a simple guide to forms in html
http://slidepdf.com/reader/full/a-simple-guide-to-forms-in-html 13/17
Lesson 5 The Forms UnitII
Pro2ram &:e
Pro2ram &:e
7/23/2019 a simple guide to forms in html
http://slidepdf.com/reader/full/a-simple-guide-to-forms-in-html 14/17
Lesson 5 The Forms UnitII
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(
7/23/2019 a simple guide to forms in html
http://slidepdf.com/reader/full/a-simple-guide-to-forms-in-html 15/17
Lesson 5 The Forms UnitII
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&
7/23/2019 a simple guide to forms in html
http://slidepdf.com/reader/full/a-simple-guide-to-forms-in-html 16/17
specied by SELECT, and !%# the input boxes which are specied by TEXT
AREA elements.
Lesson 5 The Forms UnitII
• 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.
7/23/2019 a simple guide to forms in html
http://slidepdf.com/reader/full/a-simple-guide-to-forms-in-html 17/17
Lesson 5 The Forms Unit
II
"ANDS-ON ACTI#ITY.