Transcript Creating Forms

Creating Forms
Masters Project CS 490
Kevin Murphy
HTML Tags
<FORM>
<INPUT>
</FORM>
Kevin Murphy
Attributes
n
<FORM> required attributes
-
ACTION=
•
•
-
“script.url”—location on server of CGI script
“mailto:(email address)”
METHOD=
•
•
“GET”—Data added at end of URL, sent as variable
“POST”—Data is sent separately to server
(This is what we will use.)
Kevin Murphy
Sample of
Opening Form Tag
n
< FORM ACTION = “mailto: kmm @
neiu.edu METHOD = “POST” >
(Spaces are shown for ease of viewing only.)
Kevin Murphy
User Input Fields
n
These define the elements that will
appear on the form that the user will
interact with.
n
This is the same concept as a database
or a mail merge field.
n
The elements are defined using the
<INPUT> tag.
n
Regular, explanatory text can be interspersed with <INPUT> on the form.
Kevin Murphy
The <INPUT> Tag
TYPE = Attribute
n
The TYPE= attribute specifies the type
of input.
Options are:
•TEXT
•PASSWORD
•RADIO
•CHECKBOX
•SUBMIT
•RESET
Kevin Murphy
Other <INPUT> Tag
Attributes
n
SIZE
-
n
NAME
-
n
Gives the text input box a data element name that
identifies the information
CHECKED
-
n
Defines the size of text input box on form in # of
characters—default is 20
For marking radio button/checkbox by default
READONLY
-
To keep visitors from changing form elements
Kevin Murphy
Sample
<FORM ACTION=“mailto:[email protected]”
METHOD=“POST”>
<H2>Response Form</H2>
<P>
Customer Name: <INPUT TYPE=“TEXT”
NAME=“customer” SIZE=“30”>
</P>
</FORM>
Kevin Murphy
Sample
<FORM ACTION=“mailto:[email protected]”
METHOD= “POST”>
<H2>Response Form</H2>
<P>Customer Name: <INPUT TYPE=“TEXT”
NAME=“customer” SIZE=“30”></P>
<P>City: </P>
<INPUT TYPE=“RADIO” NAME=“city” VALUE=“Des
Plaines”>DesPlaines<BR>
<INPUT TYPE=“RADIO” NAME=“city” VALUE=
“Skokie” CHECKED>Skokie<BR>
(Sample continued)
Kevin Murphy
Result
Response Form
Customer Name:
City:
Des Plaines
Skokie
Kevin Murphy
List Boxes
Using the SELECT tag and OPTION
attribute, a list box can be created.
<SELECT NAME=“Pets” MULTIPLE>
<OPTION>Dog/s
<OPTION>Cat/s
<OPTION>Bird/s
<OPTION>Other/s
</SELECT>
Kevin Murphy
Sample Cont’d
<P> <INPUT TYPE=“CHECKBOX” VALUE=
“information”>Please send information.</P>
<P> What types of pets do you have?<BR>
(Select all that apply)</P>
<SELECT NAME=“Pets” MULTIPLE>
<OPTION>Dog/s
<OPTION>Cat/s
<OPTION>Bird/s
<OPTION>Other/s
</SELECT>
(Sample continued)
Kevin Murphy
Result
Response Form
Customer Name:
City:
Des Plaines
Skokie
Please send information
What types of pets do you have?
(Select all that apply)
Dog/s
Kevin Murphy
Finally...
SUBMIT
•
The standard way for a user to send form info to the
server is clicking a submit button
RESET
•
This button resets all the form’s default settings
<INPUT TYPE=“SUBMIT” VALUE=“Send Data”>
<INPUT TYPE=“RESET” VALUE=“Clear”>
Kevin Murphy
Sample Cont’d
<P>
<INPUT TYPE=“SUBMIT” VALUE= “Send
Data”>
<INPUT TYPE=“RESET” VALUE=“Clear”>
</P>
</FORM>
</BODY>
</HTML>
Kevin Murphy
Response Form
Customer Name:
City:
Des Plaines
Skokie
Please send information
What types of pets do you have?
(Select all that apply)
Dog/s
Send Data
Clear
KevinK.Murphy
Tabers
HTML Tags
Review
Form
<FORM> </FORM>
Required
Attributes
Field
ACTION=
METHOD=
<INPUT TYPE=..>
Input Types
TEXT, RADIO,
PASSWORD, CHECKBOX,
SUBMIT, RESET
<SELECT NAME=..>
</SELECT>
Options List
Kevin Murphy