Académique Documents
Professionnel Documents
Culture Documents
Forms
Forms
Forms add the ability to web pages to not only provide the person
Forms
viewingadd the ability
the document to dynamic
with web pages to not but
information only provide
also the
to obtain
person viewing
information theperson
from the document
viewingwith dynamic
it, and information
process the information.
but also to obtain information from the person viewing it,
Objectives:
Uponand process
completing the
this information.
section, you should be able to
Objectives:
1. Create a FORM.
2.
Upon Add elements to
completing a FORM.
this section, you should be able to
1.
3. Create (Common Gateway Interface).
a FORM.
Define CGI
2.
4. Add elements
Describe to a FORM.
the purpose of a CGI Application.
5.
3. Specify an
Define CGIaction for the FORM.
(Common Gateway Interface).
Forms work in all browsers.
4. Describe the purpose of a CGI Application.
Forms are Platform Independent.
5. Specify an action for the FORM.
Forms work in all browsers.
Forms are Platform Independent. 2
Forms
FORM
To insert a form we use the <FORM></FORM> tags. The rest of the form
elements
To insertmust
a form
be we use the
inserted <FORM></FORM>
in between tags. The rest of the form
the form tags.
elements must be inserted in between the form tags.
<HTML> <HEAD>
<HTML> <HEAD>
<TITLE> Sample Form</TITLE>
<TITLE> Sample Form</TITLE>
</HEAD>
</HEAD>
<BODY BGCOLOR=“FFFFFF”>
<BODY BGCOLOR=“FFFFFF”>
<FORM ACTION = http://www.xnu.com/formtest.asp
<FORM ACTION = http://www.xnu.com/formtest.asp>
<P> First Name: <INPUT TYPE=“TEXT” NAME=“fname” MAXLENGTH=“50”> </P>
<P> First Name: <INPUT TYPE=“TEXT” NAME=“fname” MAXLENGTH=“50”>
<P> <INPUT TYPE=“SUBMIT” NAME=“fsubmit1” VALUE=“Send Info”> </P>
</P>
</FORM>
<P> <INPUT TYPE=“SUBMIT” NAME=“fsubmit1” VALUE=“Send Info”> </P>
</BODY> </HTML>
</FORM>
</BODY> </HTML>
3
<FORM> element attributes
<FORM> element attributes
ACTION: is the URL of the CGI (Common Gateway
ACTION:
Interface)isprogram
the URL that
of the CGI (Common
is going to acceptGateway
the data
Interface) program
from the form, thatit,
process is and
goingsend
to accept the data
a response back
from
to thethe form, process it, and send a response back
browser.
to the browser.
METHOD: GET (default) or POST specifies which
METHOD:
HTTP method GETwill
(default)
be usedor to
POST
send specifies which
the form’s
HTTP method
contents to thewill
webbeserver.
used toThe
sendCGIthe form’s
application
contents
should betowritten
the webto server.
accept The CGI application
the data from either
should
method.be written to accept the data from either
method.
NAME: is a form name used by VBScript or
NAME: is a form name used by VBScript or
JavaScripts.
JavaScripts.
TARGET: is the target frame where the response page
TARGET:
will showisup.
the target frame where the response page
will show up.
4
Form Elements
Form Elements
Form elements have properties: Text
Form elements have properties: Text boxes,
Password boxes, Checkboxes, Option(Radio)
boxes, Password boxes, Checkboxes,
buttons, Submit, Reset, File, Hidden and
Option(Radio)
Image. buttons, Submit, Reset,
File, Hidden and Image.
The properties are specified in the TYPE
The properties
Attribute are specified
of the HTML element in the TYPE
Attribute of the HTML element
<INPUT></INPUT>.
<INPUT></INPUT>.
5
ABCD
KIIT University
6
Form
Form Elements
Elements
• <INPUT><INPUT>
Element’sElement’s
Properties Properties
• TYPE=
TYPE= Type
Typeof INPUT
of INPUT entry field.
entry field.
• NAME
NAME = Variable
= Variable namename passed
passed to CGIto application
CGI application
• VALUE=
VALUE= TheThedatadata associated
associated withwith the variable
the variable
• name
name to passed
to be be passed to CGI
to the the CGI application
application
• CHECKED=
CHECKED= Button/box
Button/box checked
checked
• SIZE=
SIZE= Number
Number of visible
of visible characters
characters in field
in text text field
• MAXLENGHT=
MAXLENGTH= Maximum
Maximum number
number of characters
of characters
accepted.
accepted.
7
Text Box
Text Box
Text boxes: Used to provide input fields for text, phone
Text boxesdates,
numbers, : Used to provide input fields for text, phone numbers,
etc.
dates, etc.
<INPUT TYPE= " TEXT " >
<INPUT TYPE= " TEXT " >
Browser
Browser will
will display
display
Textboxes
Textboxes useuse
thethe following
following attributes:
attributes:
TYPE:
TYPE:text.
text.
SIZE:
SIZE:determines
determines thethe
sizesize of the
of the textbox
textbox in characters.
in characters. Default=20
Default=20 characters.
characters.
MAXLENGHT
MAXLENGHT: determines the the
: determines maximum number
maximum of characters
number of
that the field that
characters will accept.
the field will accept.
NAME:
NAME: is is
thethe
name
name of the variable
of the to betosent
variable be to thetoCGI
sent theapplication.
CGI
VALUE: will display its contents as the default value.
application.
VALUE: will display its contents as the default value. 8
Example on Text Box
Example on Text Box
<TITLE>Form_Text_Type</TITLE>
</HEAD> <BODY>
<TITLE>Form_Text_Type</TITLE>
<h1> <font color=blue>Please
</HEAD> <BODY> enter the following
bioData</font></h1>
<h1> <font color=blue>Please enter the following
<FORMbioData</font></h1>
name="fome1" Method= " get " Action= " URL " >
First<FORM
Name:name="fome1" Method=NAME="FName"
<INPUT TYPE="TEXT" " get " Action= " URL " >
First Name: <INPUT TYPE="TEXT" NAME="FName"
SIZE="15" MAXLENGTH="25"><BR>
SIZE="15" MAXLENGTH="25"><BR>
LastLast
Name: <INPUT
Name: TYPE="TEXT"
<INPUT TYPE="TEXT"NAME="LName"
NAME="LName"
SIZE="15" MAXLENGTH="25"><BR>
SIZE="15" MAXLENGTH="25"><BR>
Nationality:
Nationality: <INPUT
<INPUT TYPE="TEXT"NAME="Country"
TYPE="TEXT" NAME="Country"
SIZE="25" MAXLENGTH="25"><BR>
SIZE="25" MAXLENGTH="25"><BR>
The Phone Number: <INPUT TYPE="TEXT" NAME="Phone"
TheSIZE="15"
Phone Number: <INPUT TYPE="TEXT" NAME="Phone"
MAXLENGTH="12"><BR>
SIZE="15"
</FORM> MAXLENGTH="12"><BR>
</BODY> </HTML>
</FORM> </BODY> </HTML>
9
Output
Output
10
Password
Password
Password: Used to allow entry of passwords.
<INPUT TYPE= " PASSWORD " >
Password: Used to allow entry of passwords.
Browser will display
<INPUT TYPE= " PASSWORD " >
Text typedwill
Browser in adisplay
password box is starred out in the browser
display.
Text typed in a password box is starred out in the browser
display. boxes use the following attributes:
Password
Password boxes use the following attributes:
TYPE: password.
TYPE: password.
SIZE: determines the size of the textbox in characters.
SIZE: determines the size of the textbox in characters.
MAXLENGHT:
MAXLENGHT:determines themaximum
determines the maximumsize size
ofof
thethe password
password in in
characters.
characters.
NAME:
NAME:isisthe
thename
name of the variabletotobebesent
the variable sent
toto
thethe
CGICGI
application.
application.
VALUE: is usually blank.
VALUE: is usually blank. 11
Example on Password Box
Example on Password Box
<HTML><HEAD>
<TITLE>Form_Password_Type</TITLE></HEAD>
<HTML><HEAD>
<BODY>
<TITLE>Form_Password_Type</TITLE></HEAD>
<BODY>
<h1> <font color=red>To Access, Please
<h1> <font color=red>To Access, Please
enter:</font></h1>
enter:</font></h1>
<FORM name="fome2" Action="url" method="get">
<FORM name="fome2" Action="url" method="get">
User Name:
User Name:<INPUT
<INPUT TYPE="TEXT" Name="FName"
TYPE="TEXT" Name="FName"
SIZE="15" MAXLENGTH="25"><BR>
SIZE="15" MAXLENGTH="25"><BR>
Password:
Password:<INPUT
<INPUTTYPE="PASSWORD"
TYPE="PASSWORD"
NAME="PWord" value=""
NAME="PWord" value="" SIZE="15”
SIZE="15”
MAXLENGTH="25"><BR>
MAXLENGTH="25"><BR>
</FORM></BODY> </HTML>
</FORM></BODY> </HTML>
12
Output
Output
13
Hidden
Hidden
Hidden:
Hidden: Used
Used totosend
senddata to to
data thethe
CGICGI
application that
application
you don’t
that want the
you don’t web
want thesurfer
webtosurfer
see, change or have
to see,
change
to enterorbuthave to enterforbut
is necessary theisapplication
necessarytofor the
process
application to process the form correctly.
the form correctly.
<INPUT TYPE=“HIDDEN”>
<INPUT TYPE=“HIDDEN”>
Nothing
Nothing isis displayed
displayed in in
thethe browser.
browser.
Hidden inputshave
Hidden inputs havethe
the following
following attributes:
attributes:
TYPE:
TYPE: hidden.
hidden.
NAME:
NAME: is is the
thename
nameofofthethe variable
variable to betosent
be to
sent
theto
the CGI application.
CGI application.
VALUE: is usually set a value expected by the CGI
application.
VALUE: is usually set a value expected by the CGI
application.
14
Check Box
Check Box: Check boxes allow the users to select more than
one option.
<INPUT TYPE=“CHECKBOX”>
Browser will display
16
Output
17
Radio Button
Radio Button: Radio buttons allow the users to select
only one option.
<INPUT TYPE=“RADIO”>
Browser will display
18
<HTML> <HEAD><TITLE>CheckBoxType</TITLE> </HEAD>
<BODY>
<h1> <font color=green>Please check one of the
following</font></h1>
<FORM name="fome3" Action="url" method="get">
<font color=red> Select Country: </font><BR>
jordan:<INPUT TYPE= "RADIO" Name="country" CHECKED><BR>
Yemen<INPUT TYPE="RADIO " Name="country"><BR>
Qatar:<INPUT TYPE="RADIO" Name="country"><BR> <BR>
<font color=blue>Select Language:</font><BR>
Arabic:<INPUT TYPE="RADIO" Name="language" CHECKED><BR>
English:<INPUT TYPE=" RADIO " Name="language"><BR>
French:<INPUT TYPE=" RADIO " Name="language"> <BR></FORM>
</BODY></HTML>
19
20
.
<HTML><HEAD> .
<TITLE>RADIOBox</TITLE> </HEAD>
<BODY>
Form #1:
<FORM>
<INPUT TYPE="radio" NAME="choice" VALUE="one"> Yes.
<INPUT TYPE="radio" NAME="choice" VALUE="two"> No.
</FORM>
<HR color=red size="10" >
Form #2:
<FORM>
<INPUT TYPE="radio" NAME="choice" VALUE="three" CHECKED>
Yes.
<INPUT TYPE="radio" NAME="choice" VALUE="four"> No.
</FORM>
</BODY></HTML>
21
Output
22
Push Button
Push Button: This element would be used with
JavaScript to cause an action to take place.
<INPUT TYPE=“BUTTON”>
Browser will display
23
.
<DIV align=center><BR><BR>.
<FORM>
<FONT Color=red>
<h1>Press Here to see a baby crying:<BR>
<INPUT TYPE="button" VALUE="PressMe"><BR><BR>
<FONT Color=blue>
Click Here to see a baby shouting:<BR>
<INPUT TYPE="button" VALUE="ClickMe" > <BR><BR>
<FONT Color=green>
Hit Here to see a baby eating:<BR>
<INPUT TYPE="button" VALUE="HitME" > <BR><BR>
<FONT Color=yellow>
</FORM></DIV>
24
. .
25
Submit Button
Submit: Every set of Form tags requires a Submit button.
This is the element 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.
<INPUT TYPE=“SUBMIT”>
The browser will display
Submit has the following attributes:
TYPE: submit.
NAME: value used by the CGI script for processing.
VALUE: determines the text label on the button, usually
Submit Query.
26
<FORM Action="URL" method="get">
First Name: <INPUT TYPE="TEXT" Size=25
name="firstName"><BR>
Family Name: <INPUT TYPE="TEXT" Size=25
name="LastName"><BR>
<BR>
<FONT Color=red>
Press Here to submit the data:<BR>
<INPUT TYPE="submit" VALUE="SubmitData " >
</FORM>
27
28
Reset Button
• 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.
• <INPUT TYPE=“RESET”>
29
<FORM Action="URL" method="get">
First Name: <INPUT TYPE="TEXT" Size=25
name="firstName"> <BR>
Family Name: <INPUT TYPE="TEXT" Size=25
name="LastName"><BR>
<BR>
<FONT Color = red>
<STRONG><font size=5>Press Here to submit the
data:</font></STRONG><BR>
<INPUT TYPE="submit" VALUE="SubmitData">
<INPUT TYPE="RESET" VALUE="Reset">
</FORM>
30
31
Image Submit Button
Image Submit Button: Allows you to substitute an
image for the standard submit button.
32
<form>
<H1><font color=blue>
Click to go Jordan’s Map:
<INPUT TYPE="IMAGE" SRC="jordan.gif">
</form>
33
File
• File Upload: You can use a file upload to allow surfers to
upload files to your web server.
• <INPUT TYPE=“FILE”>
• Browser will display
35
Other Elements used in Forms
37
38
Other Elements used in Forms
The two following examples are
<SELECT></SELECT> elements, where the
attributes are set differently.
The Select elements attributes are:
NAME: is the name of the variable to be sent to
the CGI application.
SIZE: this sets the number of visible choices.
MULTIPLE: the presence of this attribute signifies
that the user can make multiple selections. By
default only one selection is allowed.
39
<BODY bgcolor=lightblue>
<form>
Select the cities you have visited:
<SELECT name=“list” size=5>
<option> London</option>
<option> Tokyo</option>
<option> Paris</option>
<option> New York</option>
<option> LA</option>
<option> KL</option>
</SELECT>
</form>
</BODY>
40
41
Other Elements used in Forms
42
Other Elements used in Forms
List Box:
43
Other Elements used in Forms
Option
The list items are added to the <SELECT> element by
inserting <OPTION></OPTION> elements.
The Option Element’s attributes are:
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.
VALUE: Specifies the value the variable named in
the select element.
44
</HEAD>
<BODY>
<h2><font color=blue>What type of Computer do you
have?</font><h2>
<FORM>
<SELECT NAME="ComputerType" size=4>
<OPTION value="IBM" SELECTED> IBM</OPTION>
<OPTION value="INTEL"> INTEL</OPTION>
<OPTION value=" Apple"> Apple</OPTION>
<OPTION value="Compaq"> Compaq</OPTION>
</SELECT>
</FORM></BODY></HTML>
45
46
<HEAD> <TITLE>SELECT with Mutiple </TITLE> </HEAD>
<BODY>
<h2><font color=blue>What type of Computer do you
have?</font><h2>
<FORM>
<SELECT NAME="ComputerType" size=5 multiple>
<OPTION value="IBM" > IBM</OPTION>
<OPTION value="INTEL"> INTEL</OPTION>
<OPTION value=" Apple"> Apple</OPTION>
<OPTION value="Compaq" SELECTED> Compaq</OPTION>
<OPTION value=" other"> Other</OPTION>
</SELECT>
</FORM></BODY></HTML>
47
48
49