5.
Creating HTML Forms
A FORM tag in a HTML page may
contain such controls as Text, Text Area, Check Box, Radio button, Multiple
Selection, Submit Command Button, and Reset button that allows a Web page to
gather information from users and send them back to Web server.
5.1 Form Tags and Attributes
You will need to use the following
syntax for creating a form. All controls must appear between two FORM tags. The
FORM tag syntax is as shown below:
<form Name= name ACTION =action
METHOD =method>
</form>
Where:
- The ACTION attribute is the name of application,
a CGI program, on the server with valid URL that will be called to process
the information.
- The METHOD attribute specifies how the controls'
value will be transmitted to the server. There are 2 methods: POST
(environment variable) and GET (no special characters; for example, 1 <
¼; a>b; or b ). In Visual C/C++ programming language, GET environment
function is included in Window.h. To use POST method, a user-defined
function is needed to code and encode the data.
Begin Tag End Tag Meaning
<form> </form> Indicates a form
Attributes;
ACTION, METHOD, ENCTYPE, TARGET,
NAME,
ONSUBMIT, ONRESET
5.2 Input
Tags and Attributes
Begin Tag End Tag Meaning
<input> Define
an input element such as TEXT field,
radio
button, check box, and pass word field
for
a form.
Attributes:
TYPE, NAME, VALUE, ALIGN, CHECKED,
MAXLENGTH,
SIZE, SRC, ONCLICK, ONDBCLICK,
ONSELECT,
ONCHANGE, ONFOCUS, ONBLUR
Input Types and
Variables
Text
Box for Input
<input
TYPE="text" NAME="lastname">
Submit
and Reset Buttons
<input
TYPE="SUBMIT">
<input
TYPE="RESET">
Text Control
The text control is a box that the
users can enter a single line of text such as name, address, and so on.
<input type= text name=
"TextName" value = "DisplayInBox">
CheckBox Control
ChekBox control is similar to
check box in Visual Basic, a little square with an option checkmark. It is used
to present a list of options, which the users can select more than one. The
control's value can be 0 or 1; for example, checked (1) or cleared (0).
<input type = checkbox name = "check1">FirstBox
RadioButton
Control RadioButton controls are
used to present lists of options, similar to the CheckBox control, but it
allows one of them can be selected.
<input type = radio name
="level">Beginner<br>
<input type = radio name
="level" checked>Intermediate<br>
<input type = radio name
="level">Advanced<br>
Command Button
A command button can perform only
two actions in the browser (Submit and Reset) without Script (VBScript,
JavaScript, or PerlScript). The Submit command is to submit the entered data on
the controls to the server. The Reset command is to reset all control values on
the Form to their original values.
<input type = submit value = "Send
Data">
<input type = reset value =
"Reset Value">
5.3 Text Area Tags and Attributes
The TextArea control is similar to
the Text control, but it allows the entry of multiple lines of text. The
TextArea control can also defined with row and column.
Begin Tag End Tag Meaning
<textarea> </textarea>
Create a multi-line text entry area.
Attributes:
NAME, ROWS, COLS, WRAP, ONSELECT,
ONCHANGE,
ONFOCUS, ONBLUR, ONKEYDOWN,
ONKEYPRESS,
ONKEYUP
<textarea
NAME=".." ROWS=xxx, COLS=yyy>
</textarea>
5.4 Select
and Option Tags and Attributes
Begin Tag End Tag Meaning
<select> </select> Create a combo box or a list box to let
user
select
among many multiple predefined options.
Attributes:
NAME, SIZE, MULTIPLE, ONCLICK,
ONFOCUS,
ONBLUR, ONCHANGE
<option> </option>
Attributes: VALUE, SELECTED
Example 5-1: The following example "FormLab.htm"
will help you to understand the form basics.
Example
5-2: A user feedback form example.
<HTML>
<!-- form1.html
-->
<HEAD>
<TITLE>ECET/
EET 499 - Forms</TITLE>
</HEAD>
<BODY>
<H2>Form</H2>
<P>Please fill
out this form to help us improve our site.</P>
<!--The code
below is a method that calls cgi program or server program (ASP, perl...) in
Server side when the users -->
<!-- click the
Send button below-->
<!--Cgi program
or server program then generates the output from the server and send the result
back the client-->
<!-- This example
will not work in this lab -->
<!-- Initial Form
tag is needed -->
<form METHOD =
"POST" ACTION = "/cgi-bin/formmail">
<!--A text box
named "name"; it is like a text box name in Visual Basic Programming
language -->
<!--Whenever the
users type in the text box, the string (value) will equal to "name"
-->
<!--like a
variable in Programming; for example, name = " string" if the users
type string in the text box. -->
<!-- When the
users click the Send button, the client will send name's value to the server.
-->
<!--The server
will be able to retieve string from "name" and generate the result
(as the program set up)-->
<!--Case
Sensitive -->
<!--all tags in
the form work the same way such as text box, TextArea, radio, Check, and
selection-->
<!--All tags with
the send button need to be in the same form tag to work together.-->
<!--Creating text
box named "name", and size 25 character -->
<P><STRONG>Name:
</STRONG>
<input NAME =
"name" TYPE = "text" SIZE = "25"></P>
<!-- Another text
box name "comments" (textarea), also have row and column option-->
<P><STRONG>Comments:</STRONG>
<textarea NAME =
"comments" ROWS = "4" COLS =
"36"></textarea>
</P>
<!--Another text
box name "email"; Type password means when the user type, * will
display on screen -->
<P><STRONG>Email
Address:</STRONG>
<input NAME =
"email" TYPE = "password" SIZE =
"25"></P>
<!--Checked box
selection like VB; different name will present different value -->
<P><STRONG>Things
you liked:</STRONG><BR>
Site design
<input NAME =
"thing" TYPE = "checkbox" VALUE = "Design">
Links
<input NAME =
"thing1" TYPE = "checkbox" VALUE = "Links">
Ease of use
<input NAME =
"thing2" TYPE = "checkbox" VALUE = "Ease">
Images
<input NAME =
"thing3" TYPE = "checkbox" VALUE = "Images">
Source code
<input NAME =
"thing4" TYPE = "checkbox" VALUE = "Code">
</P>
<!-- <input
TYPE="radio"> creates a radio button. The -->
<!-- difference
between radio buttons and checkboxes is
-->
<!-- that only
one radio button in a group can be selected -->
<!--Only 1 name
to present radio's value -->
<P><STRONG>How
did you get to our site?:</STRONG><BR>
Search engine
<input NAME =
"how get to site" TYPE = "radio"
VALUE = "search engine"
CHECKED>
Links from another
site
<input NAME =
"how get to site" TYPE = "radio"
VALUE = "link">
Deitel.com Web site
<input NAME =
"how get to site" TYPE = "radio"
VALUE = "deitel.com">
Reference in a book
<input NAME =
"how get to site" TYPE = "radio"
VALUE = "book">
Other
<input NAME =
"how get to site" TYPE = "radio"
VALUE = "other">
</P>
<!--Like a combox
in VB -->
<!-- The
<select> tag presents a drop down menu with -->
<!-- choices
indicated by the <option> tags
-->
<P><STRONG>Rate
our site (1-10):</STRONG>
<select NAME =
"rating">
<option
SELECTED>Amazing:-)
<option>10
<option>9
<option>8
<option>7
<option>6
<option>5
<option>4
<option>3
<option>2
<option>1
<option>The
Pits:-(
</select></P>
<!--Send button;
when the users clik the Sned button, the all values in the form will be sent to
the server -->
<input TYPE =
"submit" VALUE = "Submit Your Entries">
<!--Reset button,
when it is clicked, it will reset all onformation to the defult values-->
<input TYPE =
"reset" VALUE = "Clear Your Entries">
</form> <!-- End of Form tag -->
</BODY>
</HTML>
Activities
Add the following lines with
appropriate mechanism to receive visitor or user inputs:
- The user feedback through Email to
Webmater@sunxyz.com
- A form for user feedback survey
- Make the form available for access