BIỂU MẪU STYLE VÀ CASCADING STYLE SHEET
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 (495.84 KB, 38 trang )
CHƯƠNG VII. BIỂU MẪU STYLE VÀ CASCADING STYLE SHEET
VII.1. FORM
VII.1.1. FORM là gì?
a. Chức năng của FORM
!"
#$%&
'"
'(
)
*
*
&
'''
'
*+
'
*
+
+
&
&
&
#$%+
'
,
&
)
'
&
'
*
'-
+
&
'
+
#$%
.*
'
+
&
)
*
'
#$%+
$/
*0
.+
)
' 1
2
''
*
+
&
'"
)+
'
)
*
+
1
'
3
*
+
control4'
'
2 5&
'&
'
#$%
'
'"
'
6'
2
)
"
)
&
'
/
*0
2 1
*
'"
'
&
+
*
&7
'"
1899$:;9
':$;<$;<=
$*'
5
2*
+
''
/&
'
)
#$%
9''>9''
b. Thành phần của FORM
1
'
+
'
.*
<FORM...>...</FORM>.
?
'
2
)
'"
&
+&+
'
'
&
1'
+
'
2*
7
<FORM METHOD=POST ACTION="URL">
Toàn bô ̣ các thành phần khác bên trong form năm ơ đây
</FORM>
5
'"
METHOD
"
'
'+
)
*
)
'@&
'
&
1
A'
*
POST, GET
2'
'
*
POST
5
'"
ACTION
+
'
'*
+
"
BCD
'"
)
/
*0
)
*
'
2
VII.1.2.Các thành phần trong FORM
#+
)
'
*
'
'
'. %
+&
)
'"
&*
*
'
)
+
'
a. Hộp văn bản – TextBox
E
*
+
)
'
)
*
/"
'
E
)
+
'
7
=''2.F
5
+
'
*
7
<INPUT TYPE="TEXT" NAME="Tên" SIZE="n">
5+
5GH5*
'
*
5/'/Tên *
'
&
*
'
&"
'
Tên
&
'
''+
'I
b. Hộp mật khẩu – Password
E
'
*
+
)
'
'
/"
'
E
'
+
'
7
5
+
'
*
7
<INPUT TYPE="PASSWORD" SIZE="n">
5+
PASSWORD
*
'
+
'
'
*
&"
E
'
)
)
"
'
'
"
'"
'
"
'
'
'
'&
J
D&
7!
'
"
'
J+
'&'
"
'
"
'
&
;K)+
)
)
'
/'
#
)
*
'
c. Vùng văn bản – Text Windows
!
+
'
!
7
1'
'*
7
<TEXTAREA NAME= OTenVung" ROWS=m COLS=n> Van ban hien
thi</TEXTAREA>
'+
Tên vu
̀
ng*
'
*
&"
#
+
'
L+
)
'
L'"
)
/
'
'
!"
7
<TEXTAREA NAME="COMMENTS" ROWS=5 COLS=50> Bạn cần phải
thường xuyên cập nhật các mẫu virus mới nhất</TEXTAREA>
d. Các lựa chọn – Radio Button
1
'
*
'
''
"
+
'
'
' #
'
7
1'
'7
<INPUT TYPE="RADIO" NAME="Tên_nhóm_nút"
VALUE="giá_trị_được_chọn"> Nhãn nút
5+
RADIO
*
'
'
Cnha
̃
n nu
́
t i*
/"
'
)
/
'
'
!"
7
)
+
'
'+
'M?'M*
7
<INPUT TYPE="RADIO" NAME="PAYMENT"
VALUE="Mastercard">Master Card
5"
''
'"
NAME
+
'
PAYMENT
*
'
'
C
N
'
*
''N
''
'
'"
VALUE
+
'-
'
*
*
L?'L D&
'
)
?'*
'
*
?'*
)
''
)
' 5
'
'&
)
'
'/
'"
"
L5
'"
?'1L
%"
)
'
'*
'
'
)
E5?D'
D&
'
'"
#:?G
'
'
'
5"
''"
'
'
'+
NAME =[PAYMENT].
5
'
'
'
'
'
'
'"
CHECKED"
)
*
+
+
)
'
e. Ô đánh dấu – CheckBoxes
O+
+
+
'
*
O
7
1'
'7
<INPUT TYPE="checkbox" NAME="Tên nhóm nút" VALUE="giá
trị được chọn"> Nhan o i
!"
7
6
'
'
+
+
'
'
'
+
!"
'
+
'
/+
'
'*
7
<INPUT TYPE="CHECKBOX" NAME="DELIVERY"
VALUE="Overnight">Overnight ý nghĩa của các thuộc tính
cũng tương tự như của nút radio.
5
'
+
'
'
'
'"
CHECKED
+
+
)
'
f. Danh sách lựa chọn – thành phần SELECT
1'
+
'
*
7
<SELECT NAME="MENU" SIZE="5">
<OPTION>Menu item 1
<OPTION>Menu item 2
<OPTION SELECTED>Menu item 3
<OPTION>Menu item 4
<OPTION>Menu item 5
<OPTION>Menu item 6
<OPTION>Menu item 7
<OPTION>Menu item 8
</SELECT>
'+
'
'"
SIZE
/
+
'
"
'
&'
OPTION SELECTED
/
+
*
+
+
1
'
'
/
P'+Q''R'S
SIZE=1
7
'
&"
'
'"
SIZE
'+
)
'
?
+
SELECT"
'
5
'"
MULTIPLE
+
g. Hộp chọn tệp
1
'
'
''
'
'
!"
6
'
'=K'"
'
1.*
)
'
1
'7
<INPUT TYPE="FILE"́NAME="fileName">
6
''
'
'/'&
'
3
'=K4'"
''
)
+
'
'"
VALUE
'
&
h. Nút Send và Clear
6
+
)
+
/'"
'-
+
/
+
*
'
+
7
$M
'-
+
1*M/
*
*
'
+
E
'+
*
&
7
?
)
+
'
'
&*
7
<INPUT TYPE="SUBMIT" VALUE="Send form">
<INPUT TYPE="RESET" VALUE="Clear form">
'+
/"
'
'
$21*2
'
'"
VALUE
)
'
'
''
%"
)
'
'&
/
'&
&
T
+UT+
*
U
i. Nút nhấn – Push Button
#
'
L$'L
LC'L*
2
-&+
'
'
'
'
'
+
)
+
/
*"
''
'
'
?
)
+
'
'
'
-
'
&*
<Button type="button" name="Tên nút"> Nhãn nút
</BUTTON>
Tên nu
́
t+
'
nha
̃
n nu
́
t*
)
)
'
'
' #
''"
'
'
&"
'
'"
'&'
nha
̃
n nu
́
t
"
<BUTTON type="button" name="Tên nút"><IMG SRC="Tệp
ảnh" ALT="Dòng chữ thay thế"></BUTTON>
D&
7
)
'&'
'
IMG 6+
'image map
'
IMG
'
''
BUTTON
/
*"
'
'
'
'
'"
'
' onclick, ondblclick, onmousedown,
onmouseup, onmouseover, onmousemove, onmouseout
...
;
'"
&
$'
)
)
+
&
j. Nút nhấn bằng hình ảnh
1
'
'
'
'
'
'"
<INPUT type="image" NAME = "Tên nút" SRC="Tên ảnh">
6
'2+
+
'
+
/&'"
/*
'
'M'
"
1
*
&+
+
name.x=x-value name.y=y-value
+&*
V'
'
'"
'Wx-value, y-value*
'
+
#
/
*"
'
'
+
+
'
'"
)'
"
'"
7
''
image map
'
k. Các trường ẩn
1
'
'
'2+
+
''
$
!"
7
<INPUT TYPE="HIDDEN" NAME="previous-url" VALUE="URL">
)
'+
'
'*
'''
#$%
'+
'
'''
+
"
BCD
'+
+
"
=:16
?
'"
)
*
+
+
'
+
$X''*
'
'
'
7
<INPUT TYPE="HIDDEN" NAME="subject" VALUE="membership
form">
)
&+
/"
'
+
)
'
'"
VALUE
+
M
X''*
l. Nhãn
5
**
1
'+
)
)
+
'
'"
value
1
'
*
text fields, checkboxes, radio buttons, menus
)
+
1
'
'
'/"
'
'"
+
*
L
)
L')*
'
5&+
'
E5?D
'
LABEL
+
)
'
+
1
'
YD:=GDZ Y>D:=GDZ dùng +
+
"
)
'
LABEL.
5
'"
.[C
'
**
<LABEL for="Id">
5
'"
&
)
'
+
'
9 9*
'
+
'
+
#
'
'"
2'"
+
*
'
+
'
'
LABEL
+/
'
1
'
'
LABEL
''
+
!"
7
<FORM action="..." method="post">
<TABLE>
<TR>
<TD><LABEL for="fname">First Name</LABEL>
<TD><INPUT type="text" name="firstname" id="fname">
<TR>
<TD><LABEL for="lname">Last Name</LABEL>
<TD><INPUT type="text" name="lastname" id="lname">
</TABLE>
</FORM>
8
)
'
'"
.[C
)
''
+
'
'"
FOR
'
+
''
LABEL
D
&
''
LABEL
"
''
+
1
)
*
)
'
+
''
&'
+
!"
7
)
A'
'/'2*
<FORM action="..." method="post">
<P>
<LABEL>
First Name
<INPUT type="text" name="firstname">
</LABEL>
<LABEL>
<INPUT type="text" name="lastname">
Last Name
</LABEL>
</P>
</FORM>
VII.1.3. Thêm tính cấu trúc cho FORM
a. FIELDSET và LEGEND
5
FIELDSET
'
'
+
*-
#$%)
'
'
'
)
)/
*"
&
2
5
LEGEND
'
'FIELDSET
1
'
'"
align = top|bottom|left|right
• top:*+
'
"
'
2*' &*
'
+
• bottom:*+
'
"
2*'
• left:*+
'
"
'
• right:*+
'
"
2*'
!
<FORM action="..." method="post">
<P>
<FIELDSET>
<LEGEND>Personal Information</LEGEND>
Last Name: <INPUT name="personal_lastname"
type="text">
First Name: <INPUT name="personalỴfirstname"
type="text">
Address: <INPUT name="personalỴaddress"
type="text">
</FIELDSET>
<FIELDSET>
<LEGEND>Medical History</LEGEND>
<INPUT name="history_illness" type="checkbox"
value="Smallpox"> Smallpox
<INPUT name="history_illness" type="checkbox"
value="Mumps"> Mumps
<INPUT name="history_illness" type="checkbox"
value="Dizziness"> Dizziness
<INPUT name="history_illness" type="checkbox"
value="Sneezing"> Sneezing
</FIELDSET>
<FIELDSET>
<LEGEND>Current Medication</LEGEND>
Are you currently taking any medication?
<INPUT name="medication_now" type="radio"
value="Yes">Yes
<INPUT name="medication_now" type="radio"
value="No">No
<BR> If you are currently taking medication, please
indicate it in the space below:
<TEXTAREA name="current_medication" rows="5"
cols="50">
</TEXTAREA>
</FIELDSET>
</FORM>
5@&
'
)
'
7
Hình VII.1. Kết quả ví dụ
VII.2. Cascading style sheet
$'&*$'*\R'+Q'S-']\^'_+`I'E5?D
+R3%&E5?D4 ?QI''a'bcd^R''&*
'eI^^f*`S 5c\&'g*\-f
e'&*'I+_e'P'P'\V''_'
VII.2.1. Inline Style
?R'+Q'S-']h%&E5?D*\V'&*+R 5^'_
'&+i'&*hfc'jE5?D''^+`_'k'
' $b'&+i^'_'_elV+V*m''VhnIQ
be'&+i'm'V3be'&+iS'o4
1^V'&+i'&*h'7
5&+i'&*'
!P'V'+_'&+i'&*
$jpV*'&*'^'_P'V'&*+R\dP'
''\'
?R'T*'&*U*\R''&*\+`V\R'c'j+Qe' $'&*
q'`'r'dVc'jhR'_QR'*o\+^ ?R'*
'&*+`+ksI'R'S
STYLE
'hVc'j !SpP'
tV\h
<H1>
3EF4'\\+u'^'_V'R'S
STYLE
h'v
H1
<H1 STYLE=”color:red”>
#P'tI'+_jR'*'&*r'w*x\+^'
dI+t'`'&*3$'&*[X'4 $'&*[X'q'`]'R'S\
1$$q'`V'&* _I'R'S'7
Dmumt'y''R'S'&*1$$
5&+iz+c'h'ymt'\zP'
!Sp'R'S1$$2'MK''\2'''%E5?D EQ
'/'M*'\'/':*
5{&/R'Sp+_/^]'| 5gI*'&*+_VV
'R'Sh't
<P>
H+mo+&'9''G/*7
<HTML>
<HEAD>
<TITLE>Setting Properties</TITLE>
</HEAD>
<BODY>
<P style = “color:aqua; font-Style:italic; text-
Align:center;”> This paragraph has an inline style
applied to it
<BR>
<P> This paragraph is displayed in the default style.
<BR>
<P>Can you see the <SPAN style =
color:red>difference</SPAN>in this line
</BODY>
<HTML>
Hình VII.2. Sử dung Inline Style
VII.2.2. Giới thiệu Style Sheet
$'&*'*\\'-d*0\+f_V'&* $'&*''d
em\e_}hR''\*eE5?D^g+`+'\
@Q\ 5'b'P'^'_sf^R'~+_
|\V'\*eE5?Dh' Qe''•^'_+k€k'S\b
/r'ehVc'j'R''\'mVe|+Qe' !Sp'^
'_'mR''&*'+ks'v
<H1>
*\z•\\\/
EQ'vc'j
<P>
+`+o\+uo2':*
5^'_+ks'''&*\'t'R'k'S‚'&*'
6+^'&*'^'_+`*P'+_'r'dV''R''+_'m
R'em'S`+ƒr'-'' 5^'_+ksf
'&*'\*P'x'\R''ahV'+_f
vf''mV'
?R''^'_^'&*'P^'&*'+`
/V+k+^'@&e'gjpV_'k'-&oc+kh
^ !SpR''v
<H1>
*+`_'kIR'+kmV+m\V*f
•a& %IeI'&*''^'_/V+kV\'v
<H1>
+`_'k''@&e'
!fQ'*0'&P''^'_Ir'we'&*'\oE5?D
%I'b'P'@„e1$'&*$'31$$4+`V'@&e'
q'`'t' 1$$*\R'…+`V''_(*1'
3'n]*\TN1U4I'V'@&e'
VII.2.3. Javascript Style Sheet
#'q'`V'&*' #^•`'`'&*'\+`
P''t<$'\I@+t'`'\*e‚%'[X'
?*3%[?4 6+ksR''&*''^'_V_7
T'/'>1$$UMM5'n`\&^'@xV1$$
T'/'><$'U‚5'n`\&^'@xV<$''&*'
6IxV<$''c'j
<STYLE>
'd/V+k'R
'SV'vh+t'`'\*e
5@+t'`'\*eVc'jE5?D+`+t/jV
+t'` ?R'+t'`^V'R'S\^'_+`'&a+_+ks
em\'&*hc'j ?R''R'S'df^'_m'+RR'+t
'`oR''aV'R'S !SpR''+`+t/jR'+t
'`'\*e t'`'\*e^R''R'SV'v 5R'SV'v^
R'+t'`EA t'`EA^R''R'S]*\*\^'_+`'&
a\'&+i+`&c
Document.tags.H2.color = “limegreen”
!Sp7
<HTML>
<HEAD>
<STYLE TYLE = “text/javascript”>
tags.P.fontSize = “25pt”;
tags.P.marginLeft = “15pt”;
tags.H2.color = “hotpink”;
</STYLE>
</HEAD>
<BODY>
<H2>This is an H2 element with a style applied</H2>
<BR>
<P>This is a paragraph element
</BODY>
</HTML>
5r'dVc'jV+f'yP'yc'j
<BODY>
#P't
rR''&*Q+k'r'dVc'j'R''\*e'^'_+Q''&*
&c'c'j
<BODY>
m{m&''@&e''7
!Sp7
<HTML>
<HEAD>
<STYLE TYPE = “text/javascript”>
tags.body.color=”red”;
</STYLE>
</HEAD>
<BODY>
<H2>This is an H2 element</H2>
<BR>
<P>This is a paragraph element
</BODY>
</HTML>
Hình VII.3. Hỗ trợ một style bình thường
!Sp7
<HTML>
<HEAD>
<STYLE TYPE = “text/css”>
BODY {color:limegreen}
</STYLE>
</HEAD>
<BODY>
