Form nhập

Mục đích:

Sử dụng CSS để tạo giao diện có phong cách riêng.

Sử dụng JavaScript để kiểm tra hợp thức dữ liệu nhập phía client

Nội dung:

Lập trang Đăng ký thành viên có giao diện như sau:

Xem bài mẫu

· Đặt tâm điểm vào ô nhập họ tên khi mới vào trang

· Các ô phải nhập có có nền mầu nền xanh

· Khi người dùng nhập xong một ô và gõ Enter thì chương trình chuyển điều khiển sang ô tiếp theo

· Khi người dùng nhập xong tên và chuyển điều khiển ra khỏi ô Họ và tên thì chuẩn hóa họ tên (bỏ các dấu cách không cần thiết, viết hoa các chữ cái đầu các từ)

· Khi người dùng nhập xong email thì kiểm tra định dạng email là ten[.ten]*@ten[.ten]*. Nếu email được nhập không đúng định dạng thì thông báo lỗi ngay sau ô nhập email.

· Khi người dùng nhập các số vào ngày sinh thì tự động thêm các dấu cách / khi đã nhập đủ ngày, hay đã nhập đủ tháng.

· Khi người dùng gõ lại mật khẩu xong thì kiểm tra mật khẩu gõ lại có trùng mật khẩu không. Nếu không trùng thì hiển thị thông báo “Mật khẩu gõ lại không đúng” ngay sau ô nhập lại mật khẩu

· Khi người dùng bấm Chấp nhận, kiểm tra các thông tin đã được nhập hay chưa (trừ địa chỉ và điện thoại). Nếu thông tin nào chưa được nhập thì hiển thị thông báo ngay sau ô nhập thông in đó.

Hướng dẫn thực hiện

Bước 1. Khai báo form

• Sử dụng HTML để khai báo các đối tượng trên form theo dạng

– <label><input><span><br/>

trong đó, các đối tượng <span> dùng để báo lỗi dữ liệu của <input> liền trước sau khi kiểm tra

• Sử dụng CSS cho các <label> để chúng có độ rộng (width) bằng nhau (gióng cột), cần thêm đặt trôi để làm việc này

• Sử dụng CSS để biểu thị các ô buộc nhập

• Sử dụng CSS cho các <span> báo lỗi

• Sử dụng CSS để đặt màu chữ cho <input> ngày sinh là màu xám

Lưu ý: Tất cả CSS đều khai báo và sử dụng bảng định dạng (đặt thuộc tính class cho các đối tượng HTML bằng bảng định dạng mong muốn).

Bước 2. Xử lý sự kiện trên form

• Sự kiện blur của <input> họ tên

– Gọi hàm chuẩn hóa tên để chuẩn hóa, sau đó đặt lại tên đã chuẩn hóa

• Sự kiện focus của <input> ngày sinh

– Sử dụng CSS để đặt màu chữ của <input> ngày sinh thành màu đen

– Xóa nội dung <input> ngày sinh nếu nội dung là “nn/tt/nnnn”

• Sự kiện blur của <input> ngày sinh

– Nếu ngày sinh rỗng, đặt nội dung <input> ngày sinh là “nn/tt/nnnn” và sử dụng CSS để đặt màu chữ của <input> ngày sinh thành màu xám

• Sự kiện click của nút <Chấp nhận>

– Lần lượt kiểm tra các ràng buộc trên các dữ liệu nhập và đặt/xóa các nội dung báo lỗi

• Sự kiện keyup ở tất các các <input>

– Kiểm tra nếu phím nhả là Enter (mã 13) thì đặt tâm điểm sang <input> tiếp theo. Chú ý kiểm tra window.event để chạy được trên cả IE.

• Các sự kiện khác cho các <input> nếu cần

Ghi chú: Với javascript, sử dụng thuộc tính className để thay đổi bảng định dạng cho đối tượng tài liệu, sử dụng một trong các thuộc tính value, innerHTML hoặc innerText (lưu ý đối tượng tài liệu phải có thuộc tính mới được dùng) để thay đổi nội dung đối tượng tài liệu.