ch.6a html_form
Transcript of ch.6a html_form
-
8/9/2019 ch.6a html_form
1/8
orm
22/02/2010
By Tony 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.
as c ag
action : specify the server script for processing the form data
action can also be mailto:email address _
..
-
8/9/2019 ch.6a html_form
2/8
A Simple Example (orderform.html)
~. . . .
Bob's Auto Parts
Bob's Auto Parts
Order Form
// Detail deleted, the following is the last item
Spark Plugs
Get and Post
method: s ecif how the form data should be sent post
get
Get Program : order orm ET.html http://isem03.hkbu.edu.hk/~isemuser20/form/orderformGET.html
file and separate by the ? and &
It will transmits the data immediately (maximum 2K eacht me
Appended to the end of the URL
The system will encrypt the data and transmits the data to thedesignated php file
It will wait for the server to read the data.
Sent as a separate packet
-
8/9/2019 ch.6a html_form
3/8
FORM Input Elements
o tion is the t e of in ut field
name is the name of the fieldand it will be treated asvariable name in scri t
checked is used to select the default_value forcheckbox or radio
text, textarea, password, checkbox, radio,, , , , ,
Text and Password Input
Text input type is used to input small quantity of text
va ue: e e au ex s own on e screen
size: the length of the text box shown on the screen
maxlen th: 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 *.
Textarea input type allow user to enter larger quantity of
text
-
8/9/2019 ch.6a html_form
4/8
Text Area Input
Textarea input type allow user to enter larger quantity of
text Default
text
comment here
COLS and ROWS define the number of columns and rows of the
text area.
Default textcan be empty, but you need to include the
an wa .
Check Box
Check Box create a control that can be toggled between
checked and unchecked.
You can give a set of checkbox the same NAME. Theywill be treated as a group when submitted for procession.
< = c ec ox = n eres >
-
8/9/2019 ch.6a html_form
5/8
Radio Button
Radio Button is similar to check box with different display
VALUE is mandatory, the value is sent to the server if theradio button is selected.
To form a mutually exclusive choices, use same NAME
or a num er o ra o uttons.
" " " " " "
Menus
SELECT and OPTION can be used to create a menu of
choices
AppleOrange
=" "
SIZE attribute can be used to create a scrollable menu.
The text of the VALUE attribute ofOPTION will be sent
to the server. Without the VALUE, the displayed text will
be sent.
-
8/9/2019 ch.6a html_form
6/8
Hidden Field and File Upload
HIDDEN field can be use to include information you dont
want user to see.
The value of the hidden field will be sent to the serverwhen the form is submitted.
FILE type can be used to upload file to the server
" " " "
Buttons
SUBMIT input type creates a button used to submit the
form to the server.
The text ofVALUE attribute will be shown on the button.
RESET input type creates a button used to clear the form.
BUTTON input type creates a push button that can be used
- .
-
8/9/2019 ch.6a html_form
7/8
Examples
Ex1 : A Simple Example again
htt ://isem03.hkbu.edu.hk/~isemuser20/form/orderform.html
Processin ro ram : Processorder. h
called by orderform.html
Ex2 : Calling program : formdemo.html
~
.
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.
How to store the data and retrieve data stored ?
PHP PROGRAM with M S L su ort..
-
8/9/2019 ch.6a html_form
8/8
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