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