Forms và Cascading Style Sheet
Giới thiệu form
l Các thành phần nhập liệu thôngdụng
l Sử dụng form
l Giới thiệu CSS
l Cách sử dụng CSS trong trang Web
Tóm tắt nội dung Forms và Cascading Style Sheet, để xem tài liệu hoàn chỉnh bạn click vào nút "TẢI VỀ" ở trên
11
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 ….
– 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)
24
Các thành phần nhập liệu
l Sử dụng tag
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 DROPDOWN LISTBOX
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">
37
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">
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
410
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
VALUE="1">Engineer
<OPTION
VALUE="2">Teacher
<OPTION
VALUE="3">Doctor
<OPTION
VALUE="4">Worker
11
Các loại INPUT (7)
l TextArea
– rows
– Size
– type
– Value
– cols
Other information: <TEXTAREA ROWS="3"
NAME="OtherInfo“ COLS="20">
12
Sử dụng 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
513
Ví dụ tổng hợp
Vi du
Username: <INPUT TYPE="TEXT" NAME="USRNAME"
VALUE="ledduy" SIZE="20" MAXLENGTH="128">
Password: <INPUT TYPE="PASSWORD" NAME="USRPASSWORD"
VALUE="123456" SIZE="20">
Sex:<INPUT TYPE="RADIO" NAME="USRSEX" CHECKED
VALUE="M">Male
Female
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
Occupation:
Other
Engineer
Teacher
Doctor
Worker
15
Ví dụ tổng hợp
Other information: <TEXTAREA ROWS="3"
NAME="OtherInfo"
COLS="20"><INPUT
TYPE="SUBMIT"
NAME="BTNSUBMIT"
VALUE="Submit">
<INPUT TYPE="RESET" NAME="BTNRESET"
VALUE=" Reset
">
616
Kết quả
17
Style Sheets
18
Nội dung
l Giới thiệu
l Sử dụng Inline styles
l Sử dụng nhúng trong trang web
l Sử dụng liên kết đến tập tin Style Sheets
719
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
This is yellow
21
Nhúng 1 style block và webpage
Embedded Style Sheet
<!—
Selector
{
property: value;
property: value;
...
}
-->
822
Nhúng 1 style block và webpage
Embedded Style
Sheet
<!--
P {
color: red;
font-size: 12pt;
font-family: Arial;
}
H2 {
color: green;
}
-->
<BODY
BGCOLOR="#FFFFFF">
This is green
This is red, 12 pt. and
Garamond.
23
Liên kết đến FILE CSS
l Trong tập tin .CSS
Selector
{
property: value;
property: value;
...
}
l Trong tập tin HTML
Cascading Style Sheets
24
Liên kết đến FILE CSS
Trong tập tin MyStyle.CSS
H2
{
FONT-WEIGHT: bold;
FONT-SIZE: 16pt;
COLOR: white;
FONT-STYLE: italic;
FONT-FAMILY: Arial;
BACKGROUND-COLOR:
red;
font-color: white
}
Trong trang Web có sử dụng
MyStyle.CSS
FrontPage 98 -
Cascading Style
Sheets
<link HREF="MyStyle.css"
REL="stylesheet" >
This is an H2
925
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
§ HTML element 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ần khác nhau
l Đặt tên .ClassName
10
28
CLASS Selector – Ví dụ(1)
.water { color: blue }
.danger { color: red }
test water
test danger
no style
italic
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
#control { color: red }
Fire is this colour
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 …
11
31
Phần thực hành MS FrontPage
l Tổ chức WebSite
l Đặt thuộc tính chung cho Website: bảng mã, tiêu đề,
màu nền
l Sử dụng Font tiếng Việt Unicode
l Sử dụng Inline Style Sheet
l Sử dụng Embeded Style
l Sử dụng Linked Style
l Định dạng bảng biểu và tổ chức TABLE
l Tạo FORM và các INPUT
l Tạo file CSS bằng Ms Visual Interdev
32
Thiết kế trang Web theo mẫu
33
Thiết kế trang Web theo mẫu
File đính kèm:
Forms và Cascading Style Sheet.pdf
