HTML Form & CSS
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 (122.22 KB, 11 trang )
Forms và Cascading Style Sheet
Khoa CNTT - KHTN
1
Nội dung
l
l
l
l
l
Giới thiệu form
Các thành phần nhập liệu thông dụng
Sử dụng form
Giới thiệu CSS
Cách sử dụng CSS trong trang Web
2
Giới thiệu form
l
l
l
Là công cụ hỗ trợ nhập liệu trên Web
Dữ liệu được SUBMIT đến các chương trình (trang
web) tương ứng để xử 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)
3
1
Các thành phần nhập liệu
l
l
Sử dụng tag <INPUT>
Các thuộc tính
–
–
–
–
–
–
–
TYPE
NAME
VALUE
SIZE
MAXLENGTH
CHECKED
SRC
4
Các dạng Input (1)
l
l
l
l
l
l
l
l
l
5
TEXT
[ Default ]
PASSWORD
BUTTON
SUBMIT
RESET
RADIO
CHECKBOX
DROPDOWN LISTBOX
HIDDEN.
Các loại INPUT (2)
l
TEXT và PASSWORD
–
–
–
–
Value
Name
Size
Length
Username: VALUE="ledduy" SIZE="20" MAXLENGTH="128">
6
Password: NAME="USRPASSWORD"
VALUE="123456" SIZE="20">
2
Các loại INPUT (3)
l
Button, Submit, Reset
–
–
–
–
l
l
7
Name
Size
Type
Value
Submit: tạo button kết thúc nhập liệu
Reset: tạo button khởi tạo lại giá trị mặc định
VALUE="Submit">
<INPUT TYPE="RESET" NAME="BTNRESET" VALUE="Reset">
Các loại INPUT (4)
l
–
–
–
–
–
–
l
Sex: NAME="USRSEX"
CHECKED VALUE="M">
Male
NAME="USRSEX"
VALUE="W">Female
Radio
checked
name
size
status
type
value
Các Radio cùng tên sẽ
cùng 1 nhóm
8
Các loại INPUT (5)
l
Checkbox
–
–
–
–
–
–
checked
name
size
status
type
Value
Language:
NAME="USRLANG"
VALUE="ENG" CHECKED> English
NAME="USRLANG"
VALUE="FR">French
NAME="USRLANG" VALUE="JP"
CHECKED>Japanese
9
3
Các loại INPUT (6)
l
Dropdown Listbox
–
–
–
Name
Size
Multiple (cho phép chọn
nhiều dòng)
Occupation: NAME="Occupation">
VALUE="0">Other</OPTION>
</SELECT>
10
Các loại INPUT (7)
l
TextArea
–
–
–
–
–
rows
Size
type
Value
cols
Other information: NAME="OtherInfo“ COLS="20"></TEXTAREA>
11
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
12
4
Ví dụ tổng hợp
13
<html> <head>
<title>Vi du</title> </head>
<body>
<FORM ACTION="URL">
Username: VALUE="ledduy" SIZE="20" MAXLENGTH="128"> <BR>
Password: VALUE="123456" SIZE="20"><BR>
Sex:VALUE="M">Male
<INPUT TYPE="RADIO" NAME="USRSEX" VALUE="W">Female
<BR>
Ví dụ tổng hợp
Language: VALUE="ENG" CHECKED> English
VALUE="FR">French
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>
14
Ví dụ tổng hợp
15
Other information: NAME="OtherInfo"
COLS="20"></TEXTAREA><P>
NAME="BTNSUBMIT"
VALUE="Submit">
VALUE=" Reset
"></P>
</FORM>
</body>
</html>
5
Kết quả
16
Style Sheets
17
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
18
6
Giới thiệu
l
Dùng để mô tả các hiển thị các thành phần
trên trang WEB
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)
l
19
Inline styles
l
l
Định dạng theo từng tag HTML riêng
Dùng thuộc tính STYLE
Cú pháp chung
l
<ELEMENT STYLE=”property:value; property:value….”>
</ELEMENT>
<H1 STYLE="color: yellow">This is yellow</H1>
20
Nhúng 1 style block và webpage
<HEAD>
<TITLE>Embedded Style Sheet</TITLE>
<STYLE TYPE="text/css">
Selector
{
property: value;
property: value;
...
}
-->
</STYLE>
</HEAD>
21
7
Nhúng 1 style block và webpage
<HTML> <HEAD>
<TITLE>Embedded Style
Sheet</TITLE>
<STYLE TYPE="text/css">
color: red;
font-size: 12pt;
font-family: Arial;
}
H2 {
color: green;
}
-->
</STYLE>
</HEAD>
<H2>This is green</H2>
<P>This is red, 12 pt. and
Garamond.</P>
</BODY>
</HTML>
22
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>
23
Liên kết đến FILE CSS
24
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>
REL="stylesheet" >
</head>
<body>
This is an H2
</body>
</html>
8
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
25
HTML Selectors
l
Selector định dạng cho các tag HTML
H1 { color: blue }
A
{
l
FONT-SIZE: 12pt;
FONT-FAMILY: Arial
}
Sử dụng chính tên các Tag trong HTML
26
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
27
9
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>
28
<EM class="danger">italic</EM>
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
29
Một số thuộc tính thường dùng
l
l
l
l
l
l
l
l
l
l
l
l
BACKGROUND: white;
MARGIN: 1em 4em 2em 3em;
COLOR: black;
FONT-FAMILY: helvetica, sans-serif
FONT-SIZE: 90%;
FONT-WEIGHT:BOLD;
TEXT-DECORATION: underline line;
TEXT-ALIGN: left;
VERTICAL-ALIGN : middle;
BORDER : red 1px solid;
PADDING: 2pt
…
30
10
Phần thực hành MS FrontPage
l
l
l
l
l
l
l
l
31
l
Tổ chức WebSite
Đặt thuộc tính chung cho Website: bảng mã, tiêu đề,
màu nền
Sử dụng Font tiếng Việt Unicode
Sử dụng Inline Style Sheet
Sử dụng Embeded Style
Sử dụng Linked Style
Định dạng bảng biểu và tổ chức TABLE
Tạo FORM và các INPUT
Tạo file CSS bằng Ms Visual Interdev
Thiết kế trang Web theo mẫu
32
Thiết kế trang Web theo mẫu
33
11
