ebook Tìm hiểu về form
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (697.33 KB, 25 trang )
1
FORM
FORM
2Ths. Mai Xuân Hùng
Nội dung
Nội dung
Giới thiệu về Form
Giới thiệu về Form
Các thành phần của Form
Các thành phần của Form
Thẻ MARQUEE
Thẻ MARQUEE
3Ths. Mai Xuân Hùng
Nội dung
Nội dung
Giới thiệu về Form
Giới thiệu về Form
Các thành phần của Form
Các thành phần của Form
Thẻ MARQUEE
Thẻ MARQUEE
4Ths. Mai Xuân Hùng
Giới thiệu Form
Giới thiệu Form
Được dùng để nhận dữ liệu từ phía người dùng
Được dùng để nhận dữ liệu từ phía người dùng
Giúp gởi yêu cầu của người dùng đến trang xử
Giúp gởi yêu cầu của người dùng đến trang xử
lý trong ứng dụng web
lý trong ứng dụng web
Tag
Tag
<form>
<form>
dùng để chứa các thành phần khác
dùng để chứa các thành phần khác
của form
của form
Những thành phần nhập liệu được gọi là
Những thành phần nhập liệu được gọi là
Form
Form
Field
Field
text field
text field
password field
password field
multiple-line text field
multiple-line text field
……
……
5Ths. Mai Xuân Hùng
Ví dụ
Ví dụ
6Ths. Mai Xuân Hùng
Tag <Form>
Tag <Form>
Là container ch a các thành ph n nh p ứ ầ ậ
Là container ch a các thành ph n nh p ứ ầ ậ
li u khác.ệ
li u khác.ệ
<
<
FORM
FORM
NAME=“…” ACTION=“…” METHOD=“…”
NAME=“…” ACTION=“…” METHOD=“…”
>
>
<! các thành phần của Form >
<! các thành phần của Form >
</
</
FORM>
FORM>
Các thu c tính c a ộ ủ
Các thu c tính c a ộ ủ
</
</
FORM>
FORM>
NAME
NAME
: tên FORM
: tên FORM
ACTION
ACTION
: ch đ nh trang web nh n x lý d li u t ỉ ị ậ ử ữ ệ ừ
: ch đ nh trang web nh n x lý d li u t ỉ ị ậ ử ữ ệ ừ
FORM này
FORM này
khi có s ki n click c a button ự ệ ủ
khi có s ki n click c a button ự ệ ủ
SUBMIT
SUBMIT
.
.
METHOD
METHOD
: X
: X
á
á
c đ
c đ
ị
ị
nh ph ng thươ
nh ph ng thươ
ứ
ứ
c chuy
c chuy
ể
ể
n d
n d
ữ
ữ
li
li
ệ
ệ
u
u
(
(
P
P
OST
OST
,
,
GET
GET
)
)
7Ths. Mai Xuân Hùng
Tag <Form> - Ví dụ
Tag <Form> - Ví dụ
<html>
<html>
<body>
<body>
<form
<form
Name=“Dangnhap”
Name=“Dangnhap”
Action=“/admin/xlDangnhap.php”
Action=“/admin/xlDangnhap.php”
Method=“Post”>
Method=“Post”>
………………
………………
</form>
</form>
</body>
</body>
</html>
</html>
Dangnhap.htm
8Ths. Mai Xuân Hùng
Nội dung
Nội dung
Gi i thi u v Formớ ệ ề
Gi i thi u v Formớ ệ ề
Các thành ph n c a Formầ ủ
Các thành ph n c a Formầ ủ
Th MARQUEEẻ
Th MARQUEEẻ
9Ths. Mai Xuân Hùng
Các Control của Form
Các Control của Form
G m các lo i Form Field sau:ồ ạ
G m các lo i Form Field sau:ồ ạ
Text field
Text field
Password field
Password field
Hidden Text field
Hidden Text field
Check box
Check box
Radio button
Radio button
File Form Control
File Form Control
Submit Button, Reset Button, Generalized Button
Submit Button, Reset Button, Generalized Button
Multiple-line text field
Multiple-line text field
Label
Label
Pull-down menu
Pull-down menu
Scrolled list
Scrolled list
Field Set
Field Set
10Ths. Mai Xuân Hùng
Text Field
Text Field
Dùng để nhập một dòng văn bản
Dùng để nhập một dòng văn bản
Cú pháp
Cú pháp
<INPUT
<INPUT
TYPE
TYPE
= “TEXT”
= “TEXT”
NAME
NAME
=
=
string
string
READONLY
READONLY
SIZE
SIZE
=
=
variant
variant
MAXLENGTH
MAXLENGTH
= long
= long
TABINDEX
TABINDEX
=
=
integer
integer
VALUE
VALUE
=
=
string
string
…………
…………
>
>
Ví dụ
Ví dụ
<input
<input
type=“
type=“
text
text
” name=“
” name=“
txtName
txtName
” value=“
” value=“
This is one line text with
This is one line text with
301
301
”
”
size=“
size=“
10
10
” maxlength=“
” maxlength=“
10
10
”
”
>
>
t with
301
10
20
11Ths. Mai Xuân Hùng
Password Field
Password Field
Dùng đ nh p m t kh uể ậ ậ ẩ
Dùng đ nh p m t kh uể ậ ậ ẩ
Cú pháp
Cú pháp
<INPUT
<INPUT
TYPE
TYPE
= “PASSWORD”
= “PASSWORD”
NAME
NAME
=
=
string
string
READONLY
READONLY
SIZE
SIZE
=
=
variant
variant
MAXLENGTH
MAXLENGTH
= long
= long
TABINDEX
TABINDEX
=
=
integer
integer
VALUE
VALUE
=
=
string
string
…………
…………
>
>
Ví dụ
Ví dụ
<input
<input
type=“
type=“
Password
Password
” name=“
” name=“
txtPassword
txtPassword
”
”
value=“
value=“
123456abc1234
123456abc1234
”
”
size=“
size=“
10
10
” maxlength=“
” maxlength=“
20
20
”
”
>
>
12Ths. Mai Xuân Hùng
Check box
Check box
Cú pháp
Cú pháp
<input
<input
TYPE
TYPE
=
=
“checkbox”
“checkbox”
NAME
NAME
=
=
“text”
“text”
VALUE
VALUE
=
=
“text”
“text”
[checked]
[checked]
>
>
Ví d ụ
Ví d ụ
<html>
<body>
Check box group : <br>
Anh van: <input type="checkbox" name="Languages1" value="En"><br>
Hoa: <input type="checkbox" name="Languages2" value="Chz" checked><br>
Nhut: <input type="checkbox" name="Languages3" value="Jp"><br>
</body>
</html>
13Ths. Mai Xuân Hùng
Radio button
Radio button
Cú pháp
Cú pháp
<input
<input
TYPE
TYPE
=
=
“radio”
“radio”
NAME
NAME
=
=
“text”
“text”
VALUE
VALUE
=
=
“text”
“text”
[checked]
[checked]
>
>
Ví dụ
Ví dụ
<html>
<body>
Radio Button Group : <br>
Nam: <input type="radio" name="sex" value="nam" checked><br>
Nu: <input type="radio" name="sex" value="nu“checked ><br>
</body>
</html>
<html>
<body>
Radio Button Group : <br>
Nam: <input type="radio" name="sex1" value="nam" checked><br>
Nu: <input type="radio" name="sex2" value="nu“checked ><br>
</body>
</html>
14Ths. Mai Xuân Hùng
File Form Control
File Form Control
Dùng đ upload 1 file lên serverể
Dùng đ upload 1 file lên serverể
Cú pháp
Cú pháp
<form
<form
action=“…” method=“post”
action=“…” method=“post”
enctype=“multipart/form-data” name=“ ”>
enctype=“multipart/form-data” name=“ ”>
<input
<input
TYPE=“FILE” NAME=“…”
TYPE=“FILE” NAME=“…”
>
>
</form>
</form>
Ví dụ
Ví dụ
<html>
<body>
<form name=“frmMain” action=“POST” enctype=“multipart/form-data”>
<input type="file" name="fileUpload">
</form>
</body>
</html>
15Ths. Mai Xuân Hùng
Submit button
Submit button
Nút phát l nh và g i d li u ệ ở ữ ệ
Nút phát l nh và g i d li u ệ ở ữ ệ
c a form đ n ủ ế
c a form đ n ủ ế
trang x lý.ử
trang x lý.ử
M i form ch có ỗ ỉ
M i form ch có ỗ ỉ
m tộ
m tộ
nút submit và nút này
nút submit và nút này
đ c vi n đ mượ ề ậ
đ c vi n đ mượ ề ậ
Cú pháp:
Cú pháp:
<input TYPE=“submit” name=“…” value=“…”>
<input TYPE=“submit” name=“…” value=“…”>
Ví d :ụ
Ví d :ụ
<input type="submit" name="btnSend" value="Send">
16Ths. Mai Xuân Hùng
Reset Button
Reset Button
Dùng đ tr l i giá tr m c đ nh cho các ể ả ạ ị ặ ị
Dùng đ tr l i giá tr m c đ nh cho các ể ả ạ ị ặ ị
control khác trong form
control khác trong form
Cú pháp
Cú pháp
<input TYPE=“reset” name=“…” value=“…”>
<input TYPE=“reset” name=“…” value=“…”>
Ví d ụ
Ví d ụ
<input type=“reset” name=“btnReset” value=“Rest”>
17Ths. Mai Xuân Hùng
Generalized Button
Generalized Button
Cú pháp
Cú pháp
<input type=“button” name=“…” value=“…”
<input type=“button” name=“…” value=“…”
onclick=“
onclick=“
script”
script”
>
>
Ví dụ
Ví dụ
<input type="button" name=“btnNormal” value=“Press Me!”
onclick="alert('Hello from JavaScript');" >
18Ths. Mai Xuân Hùng
Multiline Text Field
Multiline Text Field
Dùng đ nh p văn b n nhi u dòngể ậ ả ề
Dùng đ nh p văn b n nhi u dòngể ậ ả ề
Cú pháp
Cú pháp
<
<
TEXTAREA
TEXTAREA
COLS
COLS
=
=
long
long
ROWS
ROWS
=
=
long
long
DISABLED
DISABLED
NAME
NAME
=
=
string
string
READONLY
READONLY
TABINDEX
TABINDEX
=
=
integer
integer
WRAP
WRAP
= OFF | PHYSICAL | VIRTUAL
= OFF | PHYSICAL | VIRTUAL
>
>
……………
……………
</TEXTAREA>
</TEXTAREA>
Ví d ụ
Ví d ụ
<textarea cols="20" rows="5" wrap="off">
This is a text on multiline.
</textarea>
20
5
19Ths. Mai Xuân Hùng
Label
Label
Dùng đ gán nhãn cho m t Form Fieldể ộ
Dùng đ gán nhãn cho m t Form Fieldể ộ
Cú pháp
Cú pháp
<LABEL
<LABEL
FOR =
FOR =
IDString
IDString
CLASS=
CLASS=
string
string
STYLE=
STYLE=
string
string
>
>
Ví d ụ
Ví d ụ
<label for="Languages">Anh văn: </label>
<input type="checkbox" name="Languages" id="Languages" value="Eng">
20Ths. Mai Xuân Hùng
Dropdown Menu
Dropdown Menu
Dùng đ t o ra m t combo boxể ạ ộ
Dùng đ t o ra m t combo boxể ạ ộ
Cú pháp
Cú pháp
<Select
<Select
name=“…”
name=“…”
>
>
<optgroup
<optgroup
label=“…”>
label=“…”>
<option [selected] value=“…” >……
<option [selected] value=“…” >……
</option>
</option>
………
………
</optgroup>
</optgroup>
<option [selected] value=“…” >……</option>
<option [selected] value=“…” >……</option>
………
………
</select>
</select>
21Ths. Mai Xuân Hùng
Dropdown Menu
Dropdown Menu
<html>
<html>
<body>
<body>
combo box:
combo box:
<select name="DSSoftware">
<select name="DSSoftware">
<optgroup label="
<optgroup label="
Multimedia
Multimedia
">
">
<option value="WM10">Window Media
<option value="WM10">Window Media
10</option>
10</option>
<option value="JA9">Jet Audio 9</option>
<option value="JA9">Jet Audio 9</option>
</optgroup>
</optgroup>
<optgroup label="
<optgroup label="
Operation System
Operation System
">
">
<option value="WXP">Windows XP</option>
<option value="WXP">Windows XP</option>
<option value="WXPSP2">Windows XP
<option value="WXPSP2">Windows XP
SP2</option>
SP2</option>
<option value="WVT">Windows Vista</option>
<option value="WVT">Windows Vista</option>
</optgroup>
</optgroup>
<option
<option
selected
selected
value="Office07">Office
value="Office07">Office
2007</option>
2007</option>
</select>
</select>
</body>
</body>
</html>
</html>
22Ths. Mai Xuân Hùng
Field Set
Field Set
Dùng đ t o ra Group box, nhóm các thành ph n ể ạ ầ
Dùng đ t o ra Group box, nhóm các thành ph n ể ạ ầ
nh p li u trong formậ ệ
nh p li u trong formậ ệ
Cú pháp
Cú pháp
<fieldset>
<fieldset>
<legend>GroupBox’s Name</legend>
<legend>GroupBox’s Name</legend>
<input ……>
<input ……>
…
…
</fieldset>
</fieldset>
Ví d ụ
Ví d ụ
<html>
<body>
<fieldset>
<legend>Subject</legend>
<input type="checkbox" name="Subjects" value="Eng"> English<br>
<input type="checkbox" name="Subjects" value="Math" checked> Mathematics<br>
<input type="checkbox" name="Subjects" value="GraphTheory"> Graph Theory<br>
</fieldset>
</body>
</html>
23Ths. Mai Xuân Hùng
Nội dung
Nội dung
Gi i thi u v Formớ ệ ề
Gi i thi u v Formớ ệ ề
Các thành ph n c a Formầ ủ
Các thành ph n c a Formầ ủ
Th MARQUEEẻ
Th MARQUEEẻ
24Ths. Mai Xuân Hùng
Thẻ MARQUEE
Thẻ MARQUEE
Dùng đ t o hi u ng ch ch y trên màn hình trình ể ạ ệ ứ ữ ạ
Dùng đ t o hi u ng ch ch y trên màn hình trình ể ạ ệ ứ ữ ạ
duy tệ
duy tệ
Cú pháp
Cú pháp
<MARQUEE
<MARQUEE
BEHAVIOR = ALTERNATE | SCROLL | SLIDE
BEHAVIOR = ALTERNATE | SCROLL | SLIDE
DIRECTION = DOWN | LEFT | RIGHT | UP
DIRECTION = DOWN | LEFT | RIGHT | UP
LOOP =
LOOP =
int
int
SCROLLAMOUNT=
SCROLLAMOUNT=
long
long
SCROLLDELAY=
SCROLLDELAY=
long
long
WIDTH
WIDTH
= long
= long
> Text Text Text
> Text Text Text
</MARQUEE>
</MARQUEE>
Ví d ụ
Ví d ụ
25Ths. Mai Xuân Hùng
Tự động chuyển hướng trang web
Tự động chuyển hướng trang web
T đ ng chuy n h ng trang web sang trang ự ộ ể ướ
T đ ng chuy n h ng trang web sang trang ự ộ ể ướ
web khác (URL) sau m t kho ng th i gian t ộ ả ờ
web khác (URL) sau m t kho ng th i gian t ộ ả ờ
(tính theo giây)
(tính theo giây)
Cú pháp
Cú pháp
<head>
<head>
<META HTTP-EQUIV=“refresh”
<META HTTP-EQUIV=“refresh”
CONTENT=“t;URL=URL”>
CONTENT=“t;URL=URL”>
</head>
</head>
