Transcript Chapter 5

Chapter 6
Forms
Forms
• Can contain:
–
–
–
–
–
text boxes
radio (option) buttons
selection lists (drop down lists)
text areas
submit/reset buttons
• Usually sends input data to a program
running on a web server
Forms
Forms
• Form Tag:
<form attributes>
Form elements and layout tags
</form>
Form Input Types
<INPUT TYPE=option NAME=text>
Option:
BUTTON
RADIO
RESET
CHECKBOX
SUBMIT
HIDDEN
TEXT
IMAGE
TEXTAREA
PASSWORD
Forms
Input Text Box
<INPUT NAME=name
VALUE=default
SIZE=width
MAXLENGTH=maxNbrChars>
Password Text Box
<INPUT NAME=name
TYPE=PASSWORD
SIZE=width
MAXLENGTH=maxNbrChars>
• Value is masked when user types
• NOT ENCRYPTED
Selection List
<SELECT NAME=name>
<OPTION> Option 1
<OPTION> Option 2
<OPTION> Option 3
<OPTION> Option 4
<OPTION> Option 5
</SELECT>
Selection List
<SELECT NAME=STATE>
<OPTION> Wisconsin
<OPTION> Michigan
<OPTION> Florida
<OPTION> Georgia
<OPTION> Ohio
</SELECT>
Selection List
<SELECT NAME=STATE MULTIPLE>
<OPTION> Wisconsin
<OPTION> Michigan Allows multiple
<OPTION> Florida selections from
<OPTION> Georgia the list
<OPTION> Ohio
</SELECT>
Selection List
<SELECT NAME=STATE SIZE=3>
<OPTION> Wisconsin
<OPTION> Michigan List changes from
<OPTION> Florida dropdown to
<OPTION> Georgia listbox that
displays 3 options
<OPTION> Ohio
</SELECT>
Selection Group
<SELECT NAME=name>
<OPTGROUP label=“North”>
<OPTION>Michigan
<OPTION>Wisconsin
<OPTGROUP label =“South”>
<OPTION>Florida
</SELECT>
Selection Group
North
Michigan
Wisconsin
South
Florida
Radio Button
<INPUT TYPE=RADIO
NAME=name
VALUE=valueSent>
<INPUT TYPE=RADIO CHECKED>
Sets the option as a default
Radio Example
<INPUT TYPE=RADIO NAME=PARTY
VALUE=DEM>Democrat<BR>
<INPUT TYPE=RADIO NAME=PARTY
VALUE=REP>Republican<BR>
<INPUT TYPE=RADIO NAME=PARTY
VALUE=IND>Vegetarian<BR>
Radio buttons with same NAME function as a group
Radio Example
<INPUT TYPE=RADIO NAME=PARTY
VALUE=DEM>Democrat<BR>
<INPUT TYPE=RADIO NAME=PARTY
VALUE=REP>Republican<BR>
<INPUT TYPE=RADIO NAME=PARTY
VALUE=IND>Vegetarian<BR>
There is no caption with the button
unless included as plain text in the
HTML
Radio Group Box
• Box placed around a set of fields that
indicate they belong to a group
<fieldset>
<legend align=“align”>legend text</legend>
Input tags
</fieldset>
Check Boxes
<INPUT TYPE=CHECKBOX
NAME=name
VALUE=text
CHECKED>any display text must be in
HTML<BR>
• CHECKED turns on box as default
• VALUE determines what is transmitted
when checked
Text Area
<TEXTAREA
NAME=name
ROWS=nbrRows
COLS=nbrCols>
default text goes here
</TEXTAREA>
• Useful for submitting comments
• Does have text as part of the tag
Image Fields
<INPUT TYPE=IMAGE SRC=“url”
NAME=name VALUE=text >
• Sends the coordinates on the image of
where the user clicked
Hidden Fields
<INPUT TYPE=HIDDEN
NAME=name
VALUE=text >
• Functions like a regular text input field, but
is invisible to the user
Submit Button
<INPUT
TYPE=SUBMIT
VALUE="buttonCaption" >
• Submits all fields on the form to the URL
specified in the ACTION on the form
Reset Button
<INPUT
TYPE=RESET
VALUE= "buttonCaption" >
• Clears all fields on the form to their default
values
MailTo Form Action
<FORM ACTION= "mailto:[email protected]"
METHOD= "POST" >
• Sends the form output to an e-mail address
instead of a web server
• E-mail message has special characters
embedded to separate fields (page 6.39)
• Special programs available to parse the data
MailTo Form
Labels
• No specific Label Control
• Can enter html text to accomplish this
• If you want to link label with control you
have to use Label tag
<label for=“id”>label text</label>
• Not supported by Netscape
Forms
<form action = "another.htm" method="get" >
</form>
• Form fields are all items defined between form tags
• “Submit” button will send fields to the page specified in
the ACTION
– “Get” method sends data items as part of the URL after a “?”
– “Post” method send data items as part of the HTTP header and are
not visible to the user
Forms
<form action = "Another.htm" method="get"
name=frmMyForm>
<input name="txtFirst"> <BR>
<input name="txtLast"> <BR>
<input id="cmdSubmit" type="submit" >
<input id="cmdReset" type="reset" >
</form>
Forms
When “Submit” button is clicked the
following URL will be submitted:
Another.htm?txtFirst=response&txtLast=response
response will be the values that the user typed into
the text boxes on the form
Forms
For practice use the following action:
<form action =
"http://students.cis.fvtc.edu/FormResponder.asp"
method= "post " name= "frmMyForm" >
or you can also use the “get” method