1
1
Forms vàCascading Style Sheet
Khoa CNTT -KHTN
2
Nội dung
l Giới thiệu form
l Các thành phần nhập liệu thông dụng
l Sử dụng form
l Giới thiệu CSS
l Cách sử dụng CSS trong trang Web
3
Giới thiệu form
l Làcông cụ hỗ trợ nhập liệu trên Web
l Dữ liệu được SUBMIT đến các chương trình (trang
web) tương ứng để xử lý
l tag <FORM> …. </FORM>
– NAME: tên form
– ACTION: chỉ định chương trình xử lý dữ liệu
– METHOD: phương thức chuyển dữ liệu (GET,POST)
2
4
Các thành phần nhập liệu
l Sử dụng tag <INPUT>
l Các thuộc tính
– TYPE
– NAME
– VALUE
– SIZE
– MAXLENGTH
– CHECKED
– SRC
5
Các dạng Input (1)
l TEXT[ Default ]
l PASSWORD
l BUTTON
l SUBMIT
l RESET
l RADIO
l CHECKBOX
l DROPDOWNLISTBOX
l HIDDEN.
6
Các loại INPUT(2)
l TEXT vàPASSWORD
– Value
– Name
– Size
– Length
Username: <INPUT TYPE="TEXT" NAME="USRNAME"
VALUE="ledduy" SIZE="20" MAXLENGTH="128">
Password: <INPUT TYPE="PASSWORD"
NAME="USRPASSWORD"
VALUE="123456" SIZE="20">
3
7
Các loại INPUT(3)
l Button, Submit, Reset
– Name
– Size
– Type
– Value
l Submit: tạo button kết thúc nhập liệu
l Reset: tạo button khởi tạo lại giátrị mặc định
<INPUT TYPE="SUBMIT" NAME="BTNSUBMIT"
VALUE="Submit">
<INPUT TYPE="RESET" NAME="BTNRESET" VALUE="Reset">
8
Các loại INPUT (4)
l Radio
– checked
– name
– size
– status
– type
– value
l Các Radio cùng tên sẽ
cùng 1 nhóm
Sex: <INPUT TYPE="RADIO"
NAME="USRSEX"
CHECKED VALUE="M">
Male
<INPUT TYPE="RADIO"
NAME="USRSEX"
VALUE="W">Female
9
Các loại INPUT (5)
l Checkbox
– checked
– name
– size
– status
– type
– Value
Language:
<INPUT TYPE="CHECKBOX"
NAME="USRLANG"
VALUE="ENG" CHECKED> English
<INPUT TYPE="CHECKBOX"
NAME="USRLANG"
VALUE="FR">French
<INPUT TYPE="CHECKBOX"
NAME="USRLANG" VALUE="JP"
CHECKED>Japanese
4
10
Các loại INPUT (6)
l Dropdown Listbox
– Name
– Size
– Multiple (cho phép chọn
nhiều dòng)
Occupation: <SELECT SIZE="1"
NAME="Occupation">
<OPTION SELECTED
VALUE="0">Other</OPTION>
<OPTION
VALUE="1">Engineer</OPTION>
<OPTION
VALUE="2">Teacher</OPTION>
<OPTION
VALUE="3">Doctor</OPTION>
<OPTION
VALUE="4">Worker</OPTION>
</SELECT>
11
Các loại INPUT (7)
l TextArea
– rows
– Size
– type
– Value
– cols
Other information: <TEXTAREA ROWS="3"
NAME="OtherInfo“COLS="20"></TEXTAREA>
12
Sử dụng form
<FORM NAME=frmName Action=xuly.asp METHOD=GET>
<INPUT TYPE= …. >
<INPUT TYPE= …>
<INPUT TYPE=reset value=Reset>
<INPUT TYPE=submit value=Submit>
</FORM>
l Phân biệt GET vàPOST
Thông tin được gởi kèm theo phương thức GET
xuly.asp?USRNAME=ledduy&USRPASSWORD=123456&USR
SEX=M&USRLANG=ENG&USRLANG=JP&Occupation=0&
OtherInfo=&BTNSUBMIT=Submit
5
13
Vídụtổng hợp
<html> <head>
<title>Vi du</title> </head>
<body>
<FORM ACTION="URL">
Username: <INPUT TYPE="TEXT" NAME="USRNAME"
VALUE="ledduy" SIZE="20" MAXLENGTH="128"> <BR>
Password: <INPUT TYPE="PASSWORD" NAME="USRPASSWORD"
VALUE="123456" SIZE="20"><BR>
Sex:<INPUT TYPE="RADIO" NAME="USRSEX" CHECKED
VALUE="M">Male
<INPUT TYPE="RADIO" NAME="USRSEX" VALUE="W">Female
<BR>
14
Vídụtổng hợp
Language: <INPUT TYPE="CHECKBOX" NAME="USRLANG"
VALUE="ENG" CHECKED> English
<INPUT TYPE="CHECKBOX" NAME="USRLANG"
VALUE="FR">French
<INPUT TYPE="CHECKBOX" NAME="USRLANG" VALUE="JP"
CHECKED>Japanese<BR>
Occupation: <SELECT SIZE="1" NAME="Occupation">
<OPTION SELECTED VALUE="0">Other</OPTION>
<OPTION VALUE="1">Engineer</OPTION>
<OPTION VALUE="2">Teacher</OPTION>
<OPTION VALUE="3">Doctor</OPTION>
<OPTION VALUE="4">Worker</OPTION>
</SELECT> <BR>
15
Vídụtổng hợp
Other information: <TEXTAREA ROWS="3"
NAME="OtherInfo"
COLS="20"></TEXTAREA><P><INPUT
TYPE="SUBMIT"
NAME="BTNSUBMIT"
VALUE="Submit">
<INPUT TYPE="RESET" NAME="BTNRESET"
VALUE=" Reset
"></P>
</FORM>
</body>
</html>
6
16
Kết quả
17
Style Sheets
18
Nội dung
l Giới thiệu
l Sử dụng Inlinestyles
l Sử dụng nhúng trong trang web
l Sử dụng liên kết đến tập tin StyleSheets
7
19
Giới thiệu
l Dùng để mô tả các hiển thị các thành phần
trên trang WEB
l Sử dụng tương tự như dạng TEMPLATE
l Cóthể sử dụng lại
l Cóthể thay đổi thuộc tính từng trang hoặc cả
site nhanh chóng (cascading)
20
Inline styles
l Định dạng theo từng tag HTML riêng
l Dùng thuộc tính STYLE
l Cúpháp chung
<ELEMENT STYLE=”property:value; property:value….”>
</ELEMENT>
<H1 STYLE="color: yellow">This is yellow</H1>
21
Nhúng 1 style block vàwebpage
<HEAD>
<TITLE>Embedded Style Sheet</TITLE>
<STYLE TYPE="text/css">
<!—
Selector
{
property: value;
property: value;
}
>
</STYLE>
</HEAD>
8
22
Nhúng 1 style block vàwebpage
<HTML> <HEAD>
<TITLE>Embedded Style
Sheet</TITLE>
<STYLE TYPE="text/css">
<!
P {
color: red;
font-size: 12pt;
font-family: Arial;
}
H2 {
color: green;
}
>
</STYLE>
</HEAD>
<BODY
BGCOLOR="#FFFFFF">
<H2>This is green</H2>
<P>This is red, 12 pt. and
Garamond.</P>
</BODY>
</HTML>
23
Liên kết đến FILE CSS
l Trong tập tin .CSS
<Style>
Selector
{
property: value;
property: value;
}
</Style>
l Trong tập tin HTML
<head>
<title> Cascading Style Sheets </title>
<link HREF="URL" REL="stylesheet" TYPE=”text/css”>
</head>
24
Liên kết đến FILE CSS
Trong tập tin MyStyle.CSS
<STYLE>
H2
{
FONT-WEIGHT: bold;
FONT-SIZE: 16pt;
COLOR: white;
FONT-STYLE: italic;
FONT-FAMILY: Arial;
BACKGROUND-COLOR:
red;
font-color: white
}
</STYLE>
Trong trang Web cósửdụng
MyStyle.CSS
<html>
<head>
<title>FrontPage 98 -
Cascading Style
Sheets</title>
<link HREF="MyStyle.css"
REL="stylesheet" >
</head>
<body>
<h2>This is an H2 </h2>
</body>
</html>
9
25
Selectors
l Là tên 1 style tương ứng với một thành phần
được áp định dạng
l Các dạng selectors
§ HTMLelement selectors
§ Class selectors
§ ID selectors
26
HTML Selectors
l Selector định dạng cho các tag HTML
H1 { color: blue }
A
{
FONT-SIZE: 12pt;
FONT-FAMILY: Arial
}
l Sử dụng chính tên các Tag trong HTML
27
CLASS Selector (1)
l Sử dụng trong thuộc tính CLASS của các
thành phần HTML
l Mỗi class selector cóthể gán cho nhiều thành
phầnkhác nhau
l Đặt tên .ClassName
10
28
CLASS Selector –Vídụ(1)
<STYLE TYPE="text/css">
.water { color: blue }
.danger { color: red }
</STYLE>
<P class="water">test water
<P class="danger">test danger
<P> no style
<BR>
<EM class="danger">italic</EM>
29
ID Selector(1)
l Sử dụng trong thuộc tính ID của các thành phần HTML
l Đặt tên #IDName
<STYLE TYPE="text/css">
#control { color: red }
</STYLE>
<P id="control">Fire is this colour</H2><BR>
<P>This paragraph has no style applied
30
Một số thuộc tính thường dùng
l BACKGROUND: white;
l MARGIN: 1em 4em 2em 3em;
l COLOR: black;
l FONT-FAMILY: helvetica, sans-serif
l FONT-SIZE: 90%;
l FONT-WEIGHT:BOLD;
l TEXT-DECORATION: underline line;
l TEXT-ALIGN: left;
l VERTICAL-ALIGN : middle;
l BORDER : red 1px solid;
l PADDING: 2pt
l …
Không có nhận xét nào:
Đăng nhận xét