Chuong2 Mo Rong Layout Form

Lập trình Web
CHƯƠNG 2. (mở rộng)

LAYOUT VÀ FORM
Khoa CNTT – ĐH.GTVT tp.HCM

© 2019 Khoa Công nghệ thông tin
Lập trình Web – Chương 2. (mở rộng) Layout và Form
Nội dung
 Layout
 Giới thiệu về Form
 Các thành phần của Form
 Một số thuộc tính tiện ích của Form và Input
 Phân biệt phương thức GET/POST
 Thẻ MARQUEE
© 2019 Khoa CNTT – ĐHGTVT

Layout
 Là thiết kế bố cục cho trang web
 Các loại layout:
– Layout cố định ( Fixed Layout): Là layout có 1 độ phân giải
màn hình xác định. Độ rộng của trang web và các cột là 1 số
xác định
• Độ phân giải 800x600 : 760-790px
• Độ phân giải 1024x768: 960-1000px
– Layout động ( Float Layout): Độ rộng trang web và các cột
được xác định theo %.

Cách tạo Layout

 Tạo layout dùng div
– Mỗi bộ phận/thành phần trong trang web là một tag div có tên.
– Có 1 tag <div> làm container (chứa toàn thể nội dung trang
web).
• Tạo style định dạng cho div này có Width=độ rộng trang web;
Margin=Auto

Một số layout ví dụ
 1. Layout 2 cột:

Một số layout ví dụ (tt)

 1. Layout 2 cột (tt): viết code html
Định dạng CSS


 1. Layout 2 cột (tt): Lưu ý:
– Muốn giữa 2 div có khoảng cách 5 pixel (như hình trên)
thì:
• Cách 1: Thêm thuộc thuộc tính margin-left:185px cho div #right
• Cách 2:Thêm thuộc tính float:left; margin-left:5px; width:775px cho
#right

2. Layout 1 header và 2 cột:


 1. 2. Layout 1 header và 2 cột (tt): viết code html
Định dạng CSS

3. Layout có 1 header và 3 cột, 1 footer


3. Layout có 1 header và 3 cột, 1 footer (tt): Viết code


3. Layout có 1 header và 3 cột, 1 footer (tt): ĐỊnh dạng
CSS

Bài tập Layout

Bài tập Layout (tt)

Nội dung
 Thẻ MARQUEE

Giới thiệu Form

 Được dùng để nhận dữ liệu từ phía người dùng
 Giúp gởi yêu cầu của người dùng đến trang xử lý trong
ứng dụng web
 Tag <form> dùng để chứa các thành phần khác của form
 Những thành phần nhập liệu được gọi là Form Field
– text field
– password field
– multiple-line text field
– ……

Ví dụ

Tag <Form>
 Là container chứa các thành phần nhập liệu khác.

<FORM NAME=“…” ACTION=“…” METHOD=“…”>

</FORM>
 Các thuộc tính của </FORM>
– NAME : tên FORM
– ACTION : chỉ định trang web nhận xử lý dữ liệu từ FORM này
khi có sự kiện click của button SUBMIT.
– METHOD : Xác định phương thức chuyển dữ liệu (POST,GET)

Tag <Form> - Ví dụ
Dangnhap.htm
<html>
<body>
<form Name=“Dangnhap”
Action=“/admin/xlDangnhap.php”
Method=“Post”>
………………
</form>
</body>
</html>

Nội dung
 Thẻ MARQUEE

Các thành phần của Form

 Gồm các loại Form Field sau:
– Text field
– Password field
– Hidden Text field
– Check box
– Radio button
– File Form Control
– Submit Button, Reset Button, Generalized Button
– Multiple-line text field
– Label
– Pull-down menu
– Scrolled list
– Field Set

Các thành phần của Form – Text Field

 Dùng để nhập một dòng văn bản
 Cú pháp
<INPUT
TYPE = “TEXT”
NAME = string
READONLY
SIZE = variant
MAXLENGTH = long
TABINDEX = integer 20
VALUE = string t with
………… 301
30
>
 Ví dụ
<input type=“text” name=“txtName” value=“This is one line text with
301” size=“20” maxlength=“30”>

Các thành phần của Form – Password Field

 Dùng để nhập mật khẩu
 Cú pháp
<INPUT
TYPE = “PASSWORD”
NAME = string
READONLY
SIZE = variant
MAXLENGTH = long
TABINDEX = integer
VALUE = string
…………
>
 Ví dụ
<input type=“Password” name=“txtPassword” value=“123456abc1234”
size=“20” maxlength=“30”>

Các thành phần của Form – Check box

 Cú pháp
<input
TYPE = “checkbox”
NAME = “text”
VALUE = “text”
[checked]
>
 Ví dụ
<html>
<body>
Check box group : <br>
Anh van: <input type="checkbox" name="Languages1" value="En"><br>
Hoa: <input type="checkbox" name="Languages2" value="Chz" checked><br>
Nhut: <input type="checkbox" name="Languages3" value="Jp"><br>
</body>
</html>

Các thành phần của Form – Radio button

 Cú pháp
<input
TYPE = “radio”
NAME = “text”
VALUE = “text”
[checked]
>
 Ví dụ
<html>
<body>
Radio Button Group : <br>
Nam: <input type="radio" name="sex" value="nam" checked><br>
Nu: <input type="radio" name="sex" value="nu“checked ><br>
</body>
</html>
<html>
<body>
Radio Button Group : <br>
Nam: <input type="radio" name="sex1" value="nam" checked><br>
Nu: <input type="radio" name="sex2" value="nu“checked ><br>
</body>
</html>
Các thành phần của Form – File Form Control

 Dùng để upload 1 file lên server
 Cú pháp
<form action=“…” method=“post” enctype=“multipart/form-data”
name=“...”>
<input TYPE=“FILE” NAME=“…”>
</form>
 Ví dụ <html>
<body>
<form name=“frmMain” action=“POST” enctype=“multipart/form-data”>
<input type="file" name="fileUpload">
</form>
</body>
</html>

Các thành phần của Form – Submit button

 Nút phát lệnh và gởi dữ liệu của form đến trang xử lý.
 Mỗi form chỉ có một nút submit và nút này được viền đậm
 Cú pháp:
<input TYPE=“submit” name=“…” value=“…”>
 Ví dụ:
<input type="submit" name="btnSend" value="Send">

Các thành phần của Form – Reset Button

 Dùng để trả lại giá trị mặc định cho các control khác trong
form
 Cú pháp
<input TYPE=“reset” name=“…” value=“…”>
 Ví dụ
<input type=“reset” name=“btnReset” value=“Rest”>

Các thành phần của Form - Generalized Button

 Cú pháp
<input type=“button” name=“…” value=“…” onclick=“script”>
 Ví dụ
<input type="button" name=“btnNormal” value=“Press Me!”

onclick="alert('Hello from JavaScript');" >

Các thành phần của Form – Multiline Text Field

 Dùng để nhập văn bản nhiều dòng
 Cú pháp
<TEXTAREA
COLS = long
ROWS = long
DISABLED
NAME = string
READONLY
TABINDEX = integer
WRAP = OFF | PHYSICAL | VIRTUAL> ……………
</TEXTAREA>
 Ví dụ <textarea cols="20" rows="5" wrap="off">

20
This is a text on multiline.
</textarea>

Các thành phần của Form - Label

 Dùng để gán nhãn cho một Form Field
 Cú pháp
<LABEL
FOR = IDString
CLASS=string
STYLE=string
>
 Ví dụ
<label for="Languages">Anh văn: </label>

<input type="checkbox" name="Languages" id="Languages" value="Eng">

Các thành phần của Form – Pull-down Menu

 Dùng để tạo ra một combo box
 Cú pháp
<Select name=“…”>
<optgroup label=“…”>
<option [selected] value=“…” >……</option>
………
</optgroup>
<option [selected] value=“…” >……</option>

………
</select>

Các thành phần của Form – Pull-down Menu

<html>
<body>
combo box:
<select name="DSSoftware">
<optgroup label="Multimedia">
<option value="WM10">Window Media 10</option>
<option value="JA9">Jet Audio 9</option>
</optgroup>
<optgroup label="Operation System">
<option value="WXP">Windows XP</option>
<option value="WXPSP2">Windows XP SP2</option>
<option value="WVT">Windows Vista</option>
</optgroup>
<option selected value="Office07">Office 2007</option>
</select>
</body>
</html>

Các thành phần của Form – Field Set

 Dùng để tạo ra Group box, nhóm các thành phần nhập liệu
trong form
 Cú pháp
<fieldset>
<legend>GroupBox’s Name</legend>
<input ……>
…
</fieldset>
 Ví dụ
<html>
<body>
<fieldset>
<legend>Subject</legend>
<input type="checkbox" name="Subjects" value="Eng"> English<br>
<input type="checkbox" name="Subjects" value="Math" checked> Mathematics<br>
<input type="checkbox" name="Subjects" value="GraphTheory"> Graph Theory<br>
</fieldset>
</body>
</html>

Nội dung
 Thẻ MARQUEE

Một số thuộc tính tiện ích của Form và Input

Một số thuộc tính tiện ích của Form và Input

 Accesskey=char
– Tạo phím nóng cho form fields.
– Áp dụng cho tất cả form fields.
– Cách nhấn Alt + char
– Tránh các phím tắt của browser.
 Title = string
– Tạo tooltip cho form fields.
– Áp dụng cho tất cả form fields.
 Autocomplete = ON/OFF
– Gợi ý tự động khi nhập liệu.
– Áp dụng cho tất cả tag form, input.

Bật chế độ Auto-complete cho IE

Nội dung
 Thẻ MARQUEE

Phân biệt phương thức GET/POST - GET

 Các đối số của Form được ghi chèn vào đường dẫn URL
của thuộc tính action trong tag <Form>
 Khối lượng dữ liệu đối số được truyền đi của Form bị giới

hạn bởi chiều dài tối đa của một URL trên Address bar. (tối
đa của một URL là 2048 bytes)

Phân biệt phương thức GET/POST - POST

 Các đối số của Form được truyền “ngầm” bên dưới
 Khối lượng dữ liệu đối số được truyền đi của Form không

phụ thuộc vào URL  Không bị giới hạn



Nội dung
 Thẻ MARQUEE

Thẻ MARQUEE
 Dùng để tạo hiệu ứng chữ chạy trên màn hình trình duyệt
 Cú pháp
<MARQUEE
BEHAVIOR = ALTERNATE | SCROLL | SLIDE
DIRECTION = DOWN | LEFT | RIGHT | UP
LOOP = int
SCROLLAMOUNT=long
SCROLLDELAY=long
WIDTH = long> Text Text Text
</MARQUEE>
 Ví dụ

Tự động chuyển hướng trang web

 Tự động chuyển hướng trang web sang trang web khác
(URL) sau một khoảng thời gian t (tính theo giây)
 Cú pháp
<head>
<META HTTP-EQUIV=“refresh” CONTENT=“t;URL=URL”>
</head>

Chuong2 Mo Rong Layout Form

Uploaded by

Document Information

Original Title

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

Chuong2 Mo Rong Layout Form

Uploaded by

Copyright:

Available Formats

Lập trình Web

CHƯƠNG 2. (mở rộng)

Khoa CNTT – ĐH.GTVT tp.HCM

© 2019 Khoa CNTT – ĐHGTVT

© 2019 Khoa CNTT – ĐHGTVT

Cách tạo Layout

© 2019 Khoa CNTT – ĐHGTVT

© 2019 Khoa CNTT – ĐHGTVT

Một số layout ví dụ (tt)

Định dạng CSS

© 2019 Khoa CNTT – ĐHGTVT

Một số layout ví dụ (tt)

© 2019 Khoa CNTT – ĐHGTVT

© 2019 Khoa CNTT – ĐHGTVT

Một số layout ví dụ (tt)

Định dạng CSS

© 2019 Khoa CNTT – ĐHGTVT

© 2019 Khoa CNTT – ĐHGTVT

Một số layout ví dụ (tt)

© 2019 Khoa CNTT – ĐHGTVT

Một số layout ví dụ (tt)

© 2019 Khoa CNTT – ĐHGTVT

Bài tập Layout

© 2019 Khoa CNTT – ĐHGTVT

Bài tập Layout (tt)

© 2019 Khoa CNTT – ĐHGTVT

© 2019 Khoa CNTT – ĐHGTVT

Giới thiệu Form

© 2019 Khoa CNTT – ĐHGTVT

© 2019 Khoa CNTT – ĐHGTVT

 Là container chứa các thành phần nhập liệu khác.

© 2019 Khoa CNTT – ĐHGTVT

© 2019 Khoa CNTT – ĐHGTVT

© 2019 Khoa CNTT – ĐHGTVT

Các thành phần của Form

© 2019 Khoa CNTT – ĐHGTVT

Các thành phần của Form – Text Field

© 2019 Khoa CNTT – ĐHGTVT

Các thành phần của Form – Password Field

© 2019 Khoa CNTT – ĐHGTVT

Các thành phần của Form – Check box

© 2019 Khoa CNTT – ĐHGTVT

Các thành phần của Form – Radio button

Các thành phần của Form – File Form Control

© 2019 Khoa CNTT – ĐHGTVT

Các thành phần của Form – Submit button

© 2019 Khoa CNTT – ĐHGTVT

Các thành phần của Form – Reset Button

© 2019 Khoa CNTT – ĐHGTVT

Các thành phần của Form - Generalized Button

<input type="button" name=“btnNormal” value=“Press Me!”

© 2019 Khoa CNTT – ĐHGTVT

Các thành phần của Form – Multiline Text Field

 Ví dụ <textarea cols="20" rows="5" wrap="off">

© 2019 Khoa CNTT – ĐHGTVT

Các thành phần của Form - Label

<label for="Languages">Anh văn: </label>

© 2019 Khoa CNTT – ĐHGTVT

Các thành phần của Form – Pull-down Menu

<option [selected] value=“…” >……</option>

© 2019 Khoa CNTT – ĐHGTVT

Các thành phần của Form – Pull-down Menu

© 2019 Khoa CNTT – ĐHGTVT