Đang tải... (xem toàn văn)
Lập trình web tĩnh Html dành cho người mới bắt đầu học lập trình web Mình khuyên các bạn nên học đầy đủ từ bài số 1 trở đi Và kết hợp với video khi sử dụng slide nhưng do video mình chưa có thời gia up lên khi nào có mình sẽ cho link lên mục này
Chương 17 Xử lý Form kiện cho phần tử Form Mục tiêu: Vào cuối chương này, bạn có thể: Làm việc với đối tượng form phần tử form Các thuộc tính Các phương thức Sử dụng kiện cho đối tượng form Giới thiệu Form sử dụng để tương tác với người dùng Chúng ta muốn lấy ý kiến người dùng Để làm điều này, cần cung cấp cho người dùng cách thức để nhập thông tin, dạng HTML Trong chương này, thảo luận form, phần tử form kiện kiện tương ứng với phần tử 19.1 Đối tượng Form Đối tượng form bao gồm thuộc tính: ACCEPT ACTION METHOD Thuộc tính xác định danh sách kiểu MIME Thuộc tính định vị trí script dùng để xử lý form sau form hoàn thành gửi (submit) Thuộc tính định phương thức mà liệu gửi đến server Cú pháp METHOD = (GET | POST) Ví dụ 1: Simple.html SIMPLE This is Simple.html file Demo.html Using Form Tag { PAGE } Hình 19.1 a: Kết ví dụ Hình 19.1 b: Kết ví dụ (sau nhấp vào nút Submit) Bây thảo luận phần tử kiện form 19.2 Đối tượng Textfield (trường văn bản) Các Textfield nhận biết kiện onBlur, onFocus, onChange Sự kiện onFocus xảy người dùng nhấp chuột vào trường text Sự kiện onBlur xảy người dùng di chuyển khỏi trường text cách nhấp chuột bên nhấn phím "tab" Sự kiện onChange xảy người dùng có thay đổi bên trường text sau di chuyển khỏi trường văn Ví dụ bao gồm kiện nói Ví dụ 2: { PAGE } TextField Events Dưới kết ví dụ 2: Hình 19.2 a: Kết ví dụ { PAGE } Hình 19.2 b: Kết ví dụ (khi nhấp vào hộp văn (textbox)) Hình 19.2 c: Kết ví dụ (Sau nhập văn vào textbox nhấn phím tab) { PAGE } Hình 19.2 d: Kết ví dụ (Sau nhấp chuột bên textbox) Trong ví dụ trên, người dùng nhấp chuột bên trường text, kiện onFocus xảy Khi người dùng nhấp chuột bên trường văn bản, kiện onBlur xảy Khi người dùng có thay đổi văn bản, kiện onChange xảy 19.3 Đối tượng Button Một button nhận biết kiện onClick Sự kiện onClick xảy người dùng nhấp vào button Ví dụ minh họa cách sử dụng kiện onClick Ví dụ 3: Button Events { PAGE } Hình 19.3 a: Kết ví dụ Hình 19.3 b: Kết ví dụ (sau nhập văn vào trường text đầu tiên) Hình 19.3 c: Kết ví dụ (sau nhấp vào nút copy) { PAGE } Trong ví dụ trên, người dùng nhấp vào nút Copy, kiện onClick xảy phần văn trường text thứ chép sang trường text thứ hai 19.4 Đối tượng Checkbox Checkbox đối tượng form hoạt động theo chế bật-tắt Điều có nghĩa Checkbox check không Cũng button, checkbox nhận biết kiện onClick Ví dụ minh hoạ cách sử dụng đối tượng checkbox Ví dụ 4: Checkbox Events The Light Switch { PAGE } Hình 19.4: kết ví dụ Lưu ý: Khi chạy ví dụ này, bạn nhấp vào checkbox để xem kết xảy 19.5 Đối tượng radio Các nút radio gần giống checkbox JavaScript, chúng dùng form Checkbox hoạt động theo chế bật/tắt Chúng ta bật, tắt chuyển đổi hai chế độ check không check Các nút radio khác Một nút radio bật, giữ nguyên chế độ bạn bật nút khác Lúc nút tắt Nút radio nhận biết kiện onClick Ví dụ 5: Option Button Events { PAGE } Light off Light on onClick="onButton();" Hình 19.5: kết ví dụ Lưu ý: Khi thử ví dụ này, bạn nhấp vào nút radio để xem kết xảy 19.6 Đối tượng ComboBox / lựa chọn Đối tượng ComboBox form HTML xuất giống danh sách sổ xuống danh sách cuộn tuỳ chọn Danh sách chọn lựa mô tả thẻ cách sử dụng thẻ ComboBox hỗ trợ kiện onBlur, onFocus, onChange Ví dụ 6: Option Button Events { PAGE } Dogs Fish Birds Hình 19.6: Kết ví dụ Lưu ý: Khi chạy ví dụ này, bạn chọn tuỳ chọn sẵn có message tương ứng hiển thị 19.7 Kiểm tra tính hợp lệ form Chương trình ví dụ việc kiểm tra tính hợp lệ form trước chuyển cho server để tiếp tục xử lý Trong trình kiểm tra tính hợp lệ form, người lập trình phải kiểm tra trường để bảo đảm trường bị bỏ trống chứa thông tin không hợp lệ Ví dụ 7: Form Events { PAGE } Handling Form Events First Name : Last Name : Email : Comments : Enter your comments Hình 19.7 a: kết ví dụ { PAGE } Hình 19.7 b: Kết ví dụ (sau gửi form) { PAGE } Tóm tắt Form sử dụng để tương tác với người dùng Các trường text nhận biết kiện onBlur, onFocus, onChange Button, checkbox, combobox, radio button nhận biết kiện onClick { PAGE } Kiểm tra kiến thức Đối tượng form bao gồm thuộc tính: _, _, _ _ định phương thức truyền liệu đến server Sự kiện onFocus xảy người dùng nhấp chuột bên trường văn – Đúng/Sai đối tượng form HTML hoạt động theo chế bật-tắt Một textfield đối tượng form HTML xuất giống danh sách sổ xuống danh sách cuộn bao gồm mục chọn– Đúng/Sai { PAGE } Bài tập củng cố Tạo Form theo mẫu đây: Viết mã JavaScript để kiểm tra tính hợp lệ form Hiển thị thông báo có trường bị bỏ trống không chọn Hiển thị thông báo “Form is OK” tất trường chọn điền đầy đủ thông tin hợp lệ { PAGE } [...]... chỉ định phương thức truyền dữ liệu đến server 3 Sự kiện onFocus xảy ra khi người dùng nhấp chuột bên trong trường văn bản – Đúng/Sai 4 là một đối tượng form HTML hoạt động theo cơ chế bật-tắt 5 Một textfield là một đối tượng trên form HTML xuất hiện giống như một danh sách sổ xuống hoặc một danh sách cuộn bao gồm các mục chọn– Đúng/Sai { PAGE } Bài tập củng cố 1 Tạo một Form theo mẫu dưới đây:... NAME="comment" rows=4 cols=30 > Enter your comments < /HTML> Hình 19.7 a: kết quả của ví dụ 7 { PAGE } Hình 19.7 b: Kết quả của ví dụ 7 (sau khi gửi form) { PAGE } Tóm tắt Form được sử dụng để tương tác với người dùng Các trường text nhận biết các sự kiện