bai giang ra hoi dong

 Các thành phần nhập liệu trong Form: input textbox, input password, input submit button, input reset button,…4.1.1 Giới thiệu Form a.. LẬP TRÌNH WEB CƠ BẢNCHƯƠNG 4: CÁC ĐỐI TƯỢNG ĐỘNG

LẬP TRÌNH WEB CƠ BẢN

CHƯƠNG 4: CÁC ĐỐI TƯỢNG ĐỘNG TRONG WEB

Giáo viên: VÕ ĐẠI HỒNG

Tuy Hòa, tháng 12 năm 2017

Kiểm tra và nhắc lại bài học trước:

 Các Tag văn bản:

LẬP TRÌNH WEB CƠ BẢN

CHƯƠNG 4: CÁC ĐỐI TƯỢNG ĐỘNG TRONG WEB

 Các thành phần nhập liệu trong Form: input textbox, input password, input submit button, input reset button,…

4.1.1 Giới thiệu Form

a Chức năng Form:

LẬP TRÌNH WEB CƠ BẢN

CHƯƠNG 4: CÁC ĐỐI TƯỢNG ĐỘNG TRONG WEB

a Chức năng Form:

4.1 Thiết kế Form

4.1.1 Giới thiệu Form

Mô tả chức năng của Form

LẬP TRÌNH WEB CƠ BẢN

CHƯƠNG 4: CÁC ĐỐI TƯỢNG ĐỘNG TRONG WEB

4.1 Thiết kế Form

Ví dụ: Thiết kế Form có mẫu như sau:

4.1.1 Giới thiệu Form

a Chức năng Form:

b Cấu trúc của Form:

<form name=“…” action=“…” method=“Post/Get”>

<! các thành phần của Form >

</ form >

 Cấu trúc của Form :

b Cấu trúc của Form:

- <form : Khai báo thẻ form;

- Name= “ ”: tên form;

- Action= “ ”: chỉ định trang web nhận xử lý dữ liệu từ

form khi có sự kiện click của button Submit;

- Method= “Post/Get”: Xác định phương thức chuyển

b Cấu trúc của Form:

Ví dụ 1: Thiết kế form dùng để đăng nhập thông tin người dùng:

<div> THÔNG TIN ĐĂNG NHẬP </div>

<form name="Dangnhap" action="xlDangNhap.asp"

LẬP TRÌNH WEB CƠ BẢN

CHƯƠNG 4: CÁC ĐỐI TƯỢNG ĐỘNG TRONG WEB

4.1 Thiết kế Form

4.1.1 Giới thiệu Form  Chức năng: là một đối tượng dùng để nhập một dòng

văn bản trong form

 Cú pháp:

<input type = “text” name= “ ” width = “ ” >

 Các thành phần của Input textbox:

- Input: từ khóa khai báo loại thẻ input

- Type= “text” : là từ khoá khai báo kiểu là input textbox

- Name= “ ” : Tên của input textbox trong form;

- Width= “ ”: độ rộng của input textbox;

4.1.2 Các loại input của Form

a Input textbox:

LẬP TRÌNH WEB CƠ BẢN

CHƯƠNG 4: CÁC ĐỐI TƯỢNG ĐỘNG TRONG WEB

4.1 Thiết kế Form

4.1.1 Giới thiệu Form

4.1.2 Các loại input của Form

a Input textbox:

Ví dụ 2: Thiết kế hộp textbox trong form (ở ví dụ 1) dùng để nhập thông tin người dùng như sau:

Mã code như sau:

<form name="Dangnhap" action="xlDangNhap.asp"

method=“Post" >

Nhập Username: <input type=“text” name=“txtUsername ” width=“30” >

</form>

LẬP TRÌNH WEB CƠ BẢN

CHƯƠNG 4: CÁC ĐỐI TƯỢNG ĐỘNG TRONG WEB

4.1 Thiết kế Form

4.1.1 Giới thiệu Form

 Chức năng: là một đối tượng dùng để nhập mật khẩu trong form

 Cú pháp:

<input type = “password” name = “ ” width = “ ” >

 Các thành phần của Input password:

- Type= “password”: là từ khoá khai báo kiểu input password;

- Name= “ ”: Tên của input password trong form;

- Width= “ ”: độ rộng của đối tượng input password;

4.1.2 Các loại input của Form

a Input textbox:

b Input password:

LẬP TRÌNH WEB CƠ BẢN

CHƯƠNG 4: CÁC ĐỐI TƯỢNG ĐỘNG TRONG WEB

4.1 Thiết kế Form

4.1.1 Giới thiệu Form

4.1.2 Các loại input của Form

a Input textbox:

b Input password:

Ví dụ 3: Thiết kế form thêm input password trong form

(ở ví dụ 2) dùng để nhập mật khẩu của người dùng như

sau:

Mã code như sau:

<form name="Dangnhap" action="xlDangNhap.asp" method=“Post" >

Nhập Username: <input type=“text” name=“ txtUsername ” width=“30” >

Nhập Password: <input type=“password” name=“txtPassword”

width=“30” >

</form>

LẬP TRÌNH WEB CƠ BẢN

CHƯƠNG 4: CÁC ĐỐI TƯỢNG ĐỘNG TRONG WEB

4.1 Thiết kế Form

4.1.1 Giới thiệu Form

4.1.2 Các loại input của Form

a Input textbox:

b Input password:

c Input submit button:

 Chức năng: là nút phát lệnh và gởi dữ liệu của form đến trang xử lý của web

 Cú pháp:

<input type=“submit” value=“…” name=“…” >

 Các thành phần của Input submit button:

- Type= “submit” : là từ khoá khai báo kiểu input submit button;

- Value= “ ”: Chuỗi hiển thị trên input submit button;

- Name= “ ”: Tên của input submit button trong form;

LẬP TRÌNH WEB CƠ BẢN

CHƯƠNG 4: CÁC ĐỐI TƯỢNG ĐỘNG TRONG WEB

4.1 Thiết kế Form

4.1.1 Giới thiệu Form

4.1.2 Các loại input của Form

a Input textbox:

b Input password:

Ví dụ 4: Thiết kế thêm input submit button có value= “Đăng nhập” trong form (ở ví dụ 3) dùng để gửi dữ liệu từ form trên

đến trang xử lý như sau:

Mã code như sau:

<form name="Dangnhap" action="xlDangNhap.asp" method="post" >

Nhập Username: <input type=“text” name=“txtUsername” width=“30” >

Nhập Password: <input type=“password” name=“txtPassword” width=“30”>

<input type=" submit" value=" Đăng nhập" name=“subDangnhap" >

</form>

c Input submit button:

LẬP TRÌNH WEB CƠ BẢN

CHƯƠNG 4: CÁC ĐỐI TƯỢNG ĐỘNG TRONG WEB

4.1 Thiết kế Form

4.1.1 Giới thiệu Form

4.1.2 Các loại input của Form

a Input textbox:

b Input password:

d Input reset button:

 Chức năng: là nút để (reset) trả lại giá trị ban đầu của các input trong form

 Cú pháp:

<input type=“reset” value=“…” name=“…” >

 Các thành phần của Input reset button:

- Type= “reset”: là từ khoá khai báo kiểu input reset;

- Value= “ ”: Chuỗi hiển thị trên input reset button;

- Name= “ ”: Tên của input reset button trong form;

c Input submit button:

LẬP TRÌNH WEB CƠ BẢN

CHƯƠNG 4: CÁC ĐỐI TƯỢNG ĐỘNG TRONG WEB

4.1 Thiết kế Form

4.1.1 Giới thiệu Form

4.1.2 Các loại input của Form

a Input textbox:

b Input password:

Ví dụ 5: Thiết kế thêm input reset button có value= “Nhập lại”

trong form (ở ví dụ 4) dùng để trả lại giá trị ban đầu của form như sau:

Mã code như sau:

<form name="Dangnhap" action="xlDangNhap.asp" method="post" >

Nhập Username: <input type=“text” name=“txtUsername” width=“30” >

Nhập Password: <input type=“password” name=“txtPassword” width=“30”

>

<input type="submit" value="Đăng nhập" name=“SubDangnhap">

<input type=" reset" value=" Nhập lại " name=“resNhaplai" >

</form>

d Input reset button:

c Input submit button:

LẬP TRÌNH WEB CƠ BẢN

CHƯƠNG 4: CÁC ĐỐI TƯỢNG ĐỘNG TRONG WEB

4.1 Thiết kế Form

4.1.1 Giới thiệu Form

4.1.2 Các loại input của Form

4 Input submit button:

5 Input reset button:

<form name=“…” action=“…” method=“Post/Get”>

<! các thành phần của Form >

</ form >

<input type = “text” name= “ ” width = “ ” >

<input type = “password” name = “ ” width = “ ” >

<input type=“submit” value=“…” name=“…” >

<input type=“reset” value=“…” name=“…” >

d Input reset button:

c Input submit button:

LẬP TRÌNH WEB CƠ BẢN

CHƯƠNG 4: CÁC ĐỐI TƯỢNG ĐỘNG TRONG WEB

4.1 Thiết kế Form

4.1.1 Giới thiệu Form

4.1.2 Các loại input của Form

a Input textbox:

b Input password:

BÀI TẬP THỰC HÀNH:

- Bài tập 1: Thiết kế lại form đăng nhập như hình sau:

d Input reset button:

c Input submit button:

LẬP TRÌNH WEB CƠ BẢN

CHƯƠNG 4: CÁC ĐỐI TƯỢNG ĐỘNG TRONG WEB

4.1 Thiết kế Form

4.1.1 Giới thiệu Form

4.1.2 Các loại input của Form

action=mailto:tranvana@gmail.com method= “post”>

- Bài tập 2: Thiết kế lại form gửi email theo mẫu sau:

d Input reset button:

c Input submit button:

LẬP TRÌNH WEB CƠ BẢN

CHƯƠNG 4: CÁC ĐỐI TƯỢNG ĐỘNG TRONG WEB

4.1 Thiết kế Form

4.1.1 Giới thiệu Form

4.1.2 Các loại input của Form

a Input textbox:

b Input password:

BÀI TẬP THỰC HÀNH:

- Bài tập 3: Thiết kế lại form gửi email theo mẫu sau:

d Input reset button:

c Input submit button:

LẬP TRÌNH WEB CƠ BẢN

CHƯƠNG 4: CÁC ĐỐI TƯỢNG ĐỘNG TRONG WEB

4.1 Thiết kế Form

4.1.1 Giới thiệu Form

4.1.2 Các loại input của Form

a Input textbox:

b Input password:

BÀI TẬP THỰC HÀNH:

- Bài tập 4: Thiết kế lại form theo mẫu sau:

d Input reset button:

c Input submit button: