WebCourse - HTML Form & CSS

Forms và Cascading Style Sheet
Khoa CNTT - KHTN
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
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)
1
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
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.
5
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">
6
2
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">
7 <INPUT TYPE="RESET" NAME="BTNRESET" VALUE="Reset">
l Radio Sex: <INPUT TYPE="RADIO"

– checked NAME="USRSEX"
CHECKED VALUE="M">
– name Male
– size <INPUT TYPE="RADIO"
– status NAME="USRSEX"
– type VALUE="W">Female
– value
l Các Radio cùng tên sẽ
cùng 1 nhóm
l Checkbox Language:
– checked <INPUT TYPE="CHECKBOX"
– name NAME="USRLANG"
– size VALUE="ENG" CHECKED> English
– status <INPUT TYPE="CHECKBOX"
NAME="USRLANG"
– type
VALUE="FR">French
– Value
<INPUT TYPE="CHECKBOX"
NAME="USRLANG" VALUE="JP"
CHECKED>Japanese
3
l Dropdown Listbox Occupation: <SELECT SIZE="1"

NAME="Occupation">
– Name <OPTION SELECTED
– Size VALUE="0">Other</OPTION>
<OPTION
– Multiple (cho phép chọn VALUE="1">Engineer</OPTION>
nhiều dòng) <OPTION
VALUE="2">Teacher</OPTION>
<OPTION
VALUE="3">Doctor</OPTION>
<OPTION
VALUE="4">Worker</OPTION>
</SELECT>
10
l TextArea
– rows
– Size
– type
– Value
– cols
Other information: <TEXTAREA ROWS="3"

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
<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
13 <BR>
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>
14
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>
15
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
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)
19
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>
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> </STYLE>

<TITLE>Embedded Style </HEAD>
Sheet</TITLE>
<BODY
<STYLE TYPE="text/css"> BGCOLOR="#FFFFFF">

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

Trong tập tin MyStyle.CSS Trong trang Web có sử dụng
<STYLE> MyStyle.CSS
H2 <html>
{ <head>
FONT-WEIGHT: bold; <title>FrontPage 98 -
FONT-SIZE: 16pt; Cascading Style
Sheets</title>
COLOR: white; <link HREF="MyStyle.css"
FONT-STYLE: italic; REL="stylesheet" >
FONT-FAMILY: Arial; </head>
BACKGROUND-COLOR: <body>
red; <h2>This is an H2 </h2>
font-color: white </body>
} </html>
24 </STYLE>
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
{
FONT-SIZE: 12pt;
FONT-FAMILY: Arial
}
l 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)
.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
#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 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 …
30
10
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
31 l 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

WebCourse - HTML Form &amp; CSS

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

WebCourse - HTML Form &amp; CSS

Uploaded by

Copyright:

Available Formats

Forms và Cascading Style Sheet

Khoa CNTT - KHTN

l Giới thiệu form

Giới thiệu form

l Là công cụ hỗ trợ nhập liệu trên Web

l Sử dụng tag <INPUT>

Các dạng Input (1)

Các loại INPUT (2)

Username: <INPUT TYPE="TEXT" NAME="USRNAME"

Password: <INPUT TYPE="PASSWORD"

l Button, Submit, Reset

<INPUT TYPE="SUBMIT" NAME="BTNSUBMIT"

Các loại INPUT (4)

l Radio Sex: <INPUT TYPE="RADIO"

Các loại INPUT (5)

l Dropdown Listbox Occupation: <SELECT SIZE="1"

Các loại INPUT (7)

Other information: <TEXTAREA ROWS="3"

<FORM NAME=frmName Action=xuly.asp METHOD=GET>

Other information: <TEXTAREA ROWS="3"

l Định dạng theo từng tag HTML riêng

<H1 STYLE="color: yellow">This is yellow</H1>

Nhúng 1 style block và webpage

<HTML> <HEAD> </STYLE>

Liên kết đến FILE CSS

l Trong tập tin .CSS

l Trong tập tin HTML

Liên kết đến FILE CSS

l Là tên 1 style tương ứng với một thành phần

CLASS Selector (1)

l Sử dụng trong thuộc tính CLASS của các

l Đặt tên .ClassName

Một số thuộc tính thường dùng

Thiết kế trang Web theo mẫu

Thiết kế trang Web theo mẫu

You might also like

WebCourse - HTML Form & CSS

WebCourse - HTML Form & CSS