Thao tác với HDSD form trong lập trình WEB

GVLT: Lương Vĩ Minh – – Trần Thị Bích Hạnh –
1
BÀI 4
HƯỚNG DẪN TẠO FORM
TRONG Dreamweaver

Mục lục
I. Yêu cầu: 2
II. Hướng dẫn: 3
1. Bước 1: Tạo nền cho form 3
2. Bước 2 : Thiết kế table 3
3. Bước 3: Tạo các controls và text theo mẫu đã yêu cầu. 4
4. Bước 4: Kiểm tra kết quả thực hiện. 4
III. Bài tập thực hành: 5
1. Bài tập 1: 5
2. Bài tập 2: 5

GVLT: Lương Vĩ Minh – – Trần Thị Bích Hạnh –
2
I. Yêu cầu:
Thiết kế form có nội dung sau:


GVLT: Lương Vĩ Minh – – Trần Thị Bích Hạnh –
3
II. Hướng dẫn:
1. Bước 1: Tạo nền cho form
Từ menu Insert 
Form  chọn Form.

Mã lệnh HTML tương ứng cho việc tạo một Form:

<form method="POST">
</form>
2. Bước 2 : Thiết kế table
Từ menu Insert 
Table

* Table phải nằm trong
Form







GVLT: Lương Vĩ Minh – – Trần Thị Bích Hạnh –
4
3. Bước 3: Tạo các controls và text theo mẫu đã yêu cầu.

TEXT BOX Control


<input type="text" name="……">

STT
TextField

Char width
Type
HTML Code
1
textTenDN
20
Single line
<input type="text" name="textTenDN">
2
textMatkhau
15
Multi line
<input type="text" name="textTenDN">
3
textMatkhaugolai
15
Password
<input type="text" name="textTenDN">

BUTTON Control


<input type="submit" value="……" name="……">
STT
Button
name
Value
Action
HTML Code
1

btDangky
Đăng ký
Submit
<input type="submit" value="Đăng ký" name="btDangky">
2
btXoa
Xóa
Reset
<input type="reset" value="Xóa" name="btXoa">

Kết quả :


4. Bước 4: Kiểm tra kết quả thực hiện.
- Lưu trang web lại. Nhấn F12 để xem trang web bằng trình duyệt web IE.
GVLT: Lương Vĩ Minh – – Trần Thị Bích Hạnh –
5
III. Bài tập thực hành:
1. Bài tập 1:
- Tìm hiểu thêm các control khác (listbox, combo box, radio Button, checkbox, …) và thuộc tính của
nó.
2. Bài tập 2:
- Bổ sung trang web trên với các nội dung sau: