HTML – Form
F
22/02/2010
Byy Tonyy Chun-Kuen WONG
FORM
Form is used to collect information from users.
Information collected can be used in both client-side and server-
side scripts.
B i FORM ttag
Basic
<form action = “URL address” method=“transmission method”>
// the content of the form
</form>
action : specify the server script for processing the form data
“action”
action can also be mailto:email_address
mailto:email address
<form action =mailto: [email protected]> ….. </form>
A Simple Example (orderform.html)
http://isem03 hkbu edu hk/~isemuser20/form/orderform html
http://isem03.hkbu.edu.hk/~isemuser20/form/orderform.html
<html><head>
<title>Bob's Auto Parts</title>
</head><body>
<h1>Bob's Auto Parts</h1>
<h2>Order Form</h2>
<form action="processorder.php" method=post>
// Detail deleted, the following
g is the last item
<tr>
<td>Spark Plugs</td>
<td align=center><input type="text" name="sparkqty" size=3
maxlength=3></td>
</tr>
<tr>
<td colspan=2 align=center><input type=submit value="Submit
Order"></td>
</tr>
</table></form></body></html>
Get and Post
method: specify
p y how the form data should be sent
post
get
G (Program
Get ( : orderformGET.html)
f G )
http://isem03.hkbu.edu.hk/~isemuser20/form/orderformGET.html
The system will transmits the variables to the designated php
file and separate by the ? and &
It will transmits the data immediately (maximum 2K each
ti )
time)
Appended to the end of the URL
Post
The system will encrypt the data and transmits the data to the
designated php file
It will wait for the server to read the data.
Sent as a separate packet
FORM Input Elements
<input type = “option” name = “field_name”
value = “default _value” size = “width of the input box” checked>
option
p is the type
yp of input
p field
name is the name of the field and it will be treated as
variable name in script
p
checked is used to select the default_value for
checkbox or radio
input type
text, textarea, password, checkbox, radio,
hidden reset,
hidden, reset submit,
submit image,
image button,
button file
Text and Password Input
Text input type is used to input small quantity of text
<input type=“text” name=“filename” value = “Name here please”
size=10 maxlength=15 />
value:
al e: the default
defa lt text
te t shown
sho n on the screen
size: the length of the text box shown on the screen
maxlength:
g the maximum number of characters that can be entered
Password input type is the same as Text input box, but the
input will be shown as “*”.
<input type=“password” name =“…” size= … maxlength= “…”>
Textarea input type allow user to enter larger quantity of
text
Text Area Input
Textarea input type allow user to enter larger quantity of
text
<TEXTAREA ROWS=value COLS=value NAME=Text>Default
text </TEXTAREA>
<TEXTAREA ROWS=5 COLS=15 NAME= NAME=“testcomment”>Enter
testcomment >Enter
comment here</TEXTAREA>
COLS and ROWS define the number of columns and rows of the
text area.
Default text can be empty, but you need to include the
</TEXTAREA> anyway. y y
Check Box
Check Box create a control that can be toggled between
checked and unchecked.
<INPUT TYPE=“checkbox” NAME=“notification” />
You can give a set of checkbox the same NAME. They
will be treated as a group when submitted for procession.
<INPUT TYPE="checkbox"
TYPE " h kb " NAME="interest"
NAME "i t t" />
<INPUT TYPE="checkbox" NAME="interest" />
<INPUT
U TYPE="checkbox" NAME="interest" />
Radio Button
Radio Button is similar to check box with different display
<INPUT TYPE=“radio” NAME=“notify” VALUE=“Yes” />
VALUE is mandatory, the value is sent to the server if the
radio button is selected.
To form a mutually exclusive choices, use same NAME
f a number
for b off radio
di buttons.
b
<INPUT TYPE="radio" NAME="gender" VALUE="Male" />
<INPUT TYPE="radio"
TYPE= radio NAME=
NAME="gender"
gender VALUE=
VALUE="Female"
Female />
Menus
SELECT and OPTION can be used to create a menu of
choices
<SELECT NAME="fruit" SIZE=2>
<option
i value="app">Apple</option>
l l / i
<option value="org">Orange</option>
<option value
value="ban">Bananna</option>
ban >Bananna</option>
</SELECT>
SIZE attribute can be used to create a scrollable menu.
The text of the VALUE attribute of OPTION will be sent
to the server. Without the VALUE, the displayed text will
be sent.
Hidden Field and File Upload
HIDDEN field can be use to include information you don’t
want user to see.
The value of the hidden field will be sent to the server
when the form is submitted.
<INPUT TYPE="hidden" NAME="testhidden" VALUE="1234" />
FILE type can be used to upload file to the server
<INPUT TYPE="file"
TYPE= file NAME=
NAME="fileup"
fileup />
Buttons
SUBMIT input type creates a button used to submit the
form to the server.
The text of VALUE attribute will be shown on the button.
<input type="submit" value="Send Out">
RESET input type creates a button used to clear the form.
<input type="reset" value="Clear the Form">
BUTTON input type creates a push button that can be used
to call a client-side
client side script.
script
<INPUT TYPE="button" NAME="hello"
VALUE="Press to say
y hello" ONCLICK="helloworld()"
() />
Examples
l
Ex1 : A Simple Example again
http://isem03.hkbu.edu.hk/~isemuser20/form/orderform.html
p
Processingg pprogram
g : Processorder.php
p p
called by orderform.html
Ex2 : Calling program : formdemo.html
http://isem03.hkbu.edu.hk/ isemuser20/form/formdemo.html
http://isem03.hkbu.edu.hk/~isemuser20/form/formdemo.html
Processing program : formdemo.php
formdemo php
called by formdemo.html
Questions ?
How to collect and process the data from the form ?
You need a server side scripting language.
PHP can solve the problem.
p
How to store the data and retrieve data stored ?
PHP PROGRAM with MySQL y Q support……..
pp
HTML and FORM tutorial from w3Schools
HTML tutorial
http://www.w3schools.com/html/default.asp
Form tutorial
http://www.w3schools.com/html/html_forms.asp
