Bai 5 - Su Dung Form Va Javascript

Bài 5 : Sử dụng Form + Javascript
Môn : Lập trình và Thiết kế Web 1
KHOA CÔNG NGHỆ THÔNG TIN – ĐẠI HỌC KHOA HỌC TỰ NHIÊN
2007
Authored by: Lương Vĩ Minh
Bài 5 : Sử dụng Form + Javascript
Môn : Lập trình và Thiết kế Web 1
Bài 5 : Sử dụ ng Form + Javascript | 9/26/2007
1
1. Yêu cầu:
Thiết kế form có nội dung sau:

Sử dụng Javascript để kiểm tra thông tin nhập :
- Tên đăng nhập không được phép rỗng

- Mật khẩu phải chứa ít nhất 5 ký tự
- Mật khẩu nhập lại phải trùng với mật khẩu
2
2. Hướng dẫn thiết kế Form
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>
Bước 2 : Thiết kế table
Từ menu
Insert  Table
* Table phải
nằm trong
Form
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 Type HTML Code

width
1 textTenDN 20 Single <input type="text"
line name="textTenDN">
2 textMatKhau 15 Password <input type="password"
name="textMatKhau">
3 textMatKhauGoLai 15 Password <input type="password"
name="textMatKhauGoLai">
… … … … …
BUTTON Control
<input type="submit" value="……" name="……">
STT Button Value Action

HTML Code
name
<input type="submit" value="Đăng ký"
1 btDangky Đăng ký Submit name="btDangky">
2 btXoa Xóa Reset <input type="reset" value="Xóa" name="btXoa">
4
Kết quả :
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.
5
3. Hướng dẫn sử dụng Javascript
- Bước 1 : Thống nhất tên các controls sử dụng trong form trên.
STT Tên control Loại control

1 textTenDN Textbox
2 textMatkhau Textbox
3 textMatkhaugolai Textbox
4 btDangky Button
5 btXoa Button
- Bước 2 : Tạo một trang web bất kỳ có tên Dangkythanhcong.htm. Trang web này sẽ
hiện thị khi người dùng nhấn vào nút “Đăng ký” và việc kiểm tra dữ liệu thành công.
- Bước 3 : Đặt tên cho Form là DKUser
<form name="DKUser" method="POST">
- Bước 4 : Nhập đoạn Javascript vào trong tab <head>
6
- Bước 5 : gọi hàm kiểm tra khi bấm vào nút submit. Tại phần khai báo thẻ <form> của
trang web, sửa lại mã lệnh sau:
<form name="DKUser" method="POST">

<form name="DKUser" method="POST" action="Dangkythanhcong.htm" onsubmit="return
KiemTra()">
o Thuộc tính name: Đặt tên cho form đang sử dụng.

o Thuộc tính method: Chọn hình thức truyền dữ liệu với server (Post/Get)
o Thuộc tính action: Chỉ định địa chỉ URL được gọi khi button (có thuộc tính submit)
được nhấn.
o Thuộc tính onsubmit: Chỉ định hàm KiemTra() sẽ được gọi khi button (có thuộc
tính submit) được nhấn. Nếu hàm trả về giá trị False thì thuộc tính action bị bỏ
qua và ngược lại.
- Bước 6 : Kiểm tra kết quả trang web

o Lưu trang web lại.
o Nhấn F12 để mở trang web bằng IE.
o Tạo các trường hợp nhập dữ liệu khác nhau để kiểm tra kết quả trang web:
 Lần 1: Tên đăng nhập bị bỏ trống.
7
 Lần 2: Mật khẩu bị bỏ trống.
 Lần 3: Mật khẩu ngắn hơn 5 ký tự.
 Lần 4: Gõ lại mật khẩu bị bỏ trống.
 Lần 5: Nhập đầy đủ, đúng các thông tin cần thiết.
4. Bài tập thực hành:

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ó. Hoàn thành đầy đủ form đăng ký theo yêu cầu.

Bai 5 - Su Dung Form Va Javascript

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

Bai 5 - Su Dung Form Va Javascript

Uploaded by

Copyright:

Available Formats

Bài 5 : Sử dụng Form + Javascript

Môn : Lập trình và Thiết kế Web 1

Bài 5 : Sử dụ ng Form + Javascript | 9/26/2007

- Tên đăng nhập không được phép rỗng

Bước 1: Tạo nền cho form

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

Bước 2 : Thiết kế table

TEXT BOX Control

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

STT TextField Char Type HTML Code

Bài 5 : Sử dụ ng Form + Javascript | 9/26/2007

<input type="submit" value="……" name="……">

STT Button Value Action

Bước 4: Kiểm tra kết quả thực hiện.

STT Tên control Loại control

<form name="DKUser" method="POST">

- Bước 4 : Nhập đoạn Javascript vào trong tab <head>

Bài 5 : Sử dụ ng Form + Javascript | 9/26/2007

<form name="DKUser" method="POST">

o Thuộc tính name: Đặt tên cho form đang sử dụng.

- Bước 6 : Kiểm tra kết quả trang web

4. Bài tập thực hành:

Bài 5 : Sử dụ ng Form + Javascript | 9/26/2007

You might also like