Tự học HTML Form & CSS
Trang 1Forms và Cascading Style Sheet
Khoa CNTT - KHTN
2
Nội dung
lGiới thiệu form
3
Giới thiệu form
web) tương ứng để xử lý
– 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)
Trang 2Các thành phần nhập liệu
– TYPE
– VALUE
– SIZE
– MAXLENGTH
– CHECKED
5
Các dạng Input (1)
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">
Trang 3Các loại INPUT (3)
– Name
– Size
– Type
– Value
<INPUT TYPE="SUBMIT" NAME="BTNSUBMIT"
VALUE="Submit">
<INPUT TYPE="RESET" NAME="BTNRESET" VALUE="Reset">
8
Các loại INPUT (4)
– checked
– name
– size
– status
– type
– value
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
Trang 4Các loại INPUT (6)
– 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)
– 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
Trang 5Ví 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>
Trang 6Kết quả
17
Style Sheets
18
Nội dung
lGiới thiệu
Trang 7Giới thiệu
trên trang WEB
site nhanh chóng (cascading)
20
Inline styles
<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>
Trang 8Nhú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
<Style>
Selector
{
property: value;
}
</Style>
<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>
Trang 9Selectors
lLà tên 1 style tương ứng với một thành phần
được áp định dạng
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)
thành phần HTML
phần khác nhau
Trang 10CLASS 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
Trang 11Phần thực hành MS FrontPage
màu nền
32
Thiết kế trang Web theo mẫu
33
Thiết kế trang Web theo mẫu