Giáo trình Thực hành HTML - Bài 5: Làm việc với Form và các đối tượng trong Form

LAB HTML 5
LÀM VIỆC VỚI FORM VÀ CÁC ĐỐI TƯỢNG TRONG FORM
A – LÝ THUYẾT
I – GIỚI THIỆU VỀ FORM
1 – Khái niệm về Form
	Form đơn giản là các biểu mẫu nhằm giúp người dùng tương tác với hệ thống, mà cụ thể là người dùng có thể gửi các thông tin cho hệ thống hay người quản trị hệ thống thông qua Form
2 – Các ứng dụng của Form
Form là một thành phần không thể thiếu đối với các website, nó có thể dùng để tạo nên rất nhiều biểu mẫu phục vụ cho việc tương tác giữa người dùng với hệ thống như:
Form đăng nhập hệ thống
Form đăng ký
Form liên hệ
II – LÀM VIỆC VỚI FORM
1 – Form và các uộc tính của Form
Thẻ 
name: Tên của Form. Giá trị của thuộc tính là một đoạn text thể hiện tên của Form
action: Hướng xử lý dữ liệu của Form. Giá trị của thuộc tính là đường dẫn tới trang xử lý dữ liệu trong Form
method: Phương thức xử lý dữ liệu của Form. Giá trị có thể sử dụng là POST hoặc GET
	Ba thuộc tính này chỉ sử dụng và có tác dụng khi chúng ta kết hợp HTML với các ngôn ngữ lập trình như (Javascript, PHP,)
III – LÀM VIỆC VỚI CÁC ĐỐI TƯỢNG TRONG FORM
1 – Các đối tượng của thẻ 
Thẻ trong Form có thể tạo ra rất nhiều các đối tượng khác nhau, sự khác nhau đó được quy định bởi thuộc tính type trong Form. Mỗi một giá trị khác nhau của type sẽ tạo ra một đối tượng khác tương ứng. 
Làm việc với đối tượng Textbox của thẻ 
type: Thuộc tính quy định kiểu hiển thị của đối tượng. Giá trị để hiển thị dạng Textbox là: text
name: Tên của đối tượng Textbox. Giá trị là đoạn text thể hiện tên, thuộc tính này chỉ sử dụng và có tác dụng khi chúng ta kết hợp HTML với các ngôn ngữ lập trình như (Javascript, PHP,) 
value: Giá trị của đối tượng Textbox. Giá trị của thuộc tính này là bất cứ ký tự nào, với mục đích hiển thị các ký tự đó ngay trong hộp thoại Textbox
size: Độ rộng của trường Textbox. Giá trị sử dụng là một số nguyên dương.
Làm việc với đối tượng Password của thẻ 
type: Thuộc tính quy định kiểu hiển thị của đối tượng. Giá trị để hiển thị dạng Password là: password
name: Tên của đối tượng Password. Giá trị là đoạn text thể hiện tên, thuộc tính này chỉ sử dụng và có tác dụng khi chúng ta kết hợp HTML với các ngôn ngữ lập trình như (Javascript, PHP,)
value: Giá trị của đối tượng Password. Giá trị của thuộc tính này là bất cứ ký tự nào, với mục đích hiển thị các ký tự đó ngay trong hộp thoại Password
size: Độ rộng của trường Password. Giá trị sử dụng là một số nguyên dương.
Làm việc với đối tượng Checkbox của thẻ 
type: Thuộc tính quy định kiểu hiển thị của đối tượng. Giá trị để hiển thị dạng Checkbox là: checkbox
name: Tên của đối tượng Checkbox. Giá trị là đoạn text thể hiện tên, thuộc tính này chỉ sử dụng và có tác dụng khi chúng ta kết hợp HTML với các ngôn ngữ lập trình như (Javascript, PHP,)
value: Giá trị của đối tượng Checkbox. Giá trị là đoạn text thể hiện giá trị của Checkbox, thuộc tính này chỉ sử dụng và có tác dụng khi chúng ta kết hợp HTML với các ngôn ngữ lập trình như (Javascript, PHP,)
checked: Mặc định lựa chọn Checkbox có thuộc tính này. Giá trị sử dụng để có được sự lựa chọn cho Checkbox này đó là: checked
Làm việc với đối tượng Radio của thẻ 
type: Thuộc tính quy định kiểu hiển thị của đối tượng. Giá trị để hiển thị dạng Radio là: radio
name: Tên của đối tượng Radio. Giá trị là đoạn text thể hiện tên.
value: Giá trị của đối tượng Radio. Giá trị là đoạn text thể hiện giá trị của Radio, thuộc tính này chỉ sử dụng và có tác dụng khi chúng ta kết hợp HTML với các ngôn ngữ lập trình như (Javascript, PHP,)
checked: Mặc định lựa chọn phần tử Radio có thuộc tính này đối với các phần tử Radio còn lại. Giá trị sử dụng để có được sự lựa chọn cho Radio này đó là: checked
Chú ý: Nếu chúng ta sử dụng một nhóm các Radio (Bao gồm 2 thành phần Radio trở lên) thì thuộc tính name của các thành phần này phải có giá trị giống nhau
Làm việc với đối tượng File của thẻ 
type: Thuộc tính quy định kiểu hiển thị của đối tượng. Giá trị để hiển thị dạng File là: file
name: Tên của đối tượng File. Giá trị là đoạn text thể hiện tên, thuộc tính này chỉ sử dụng và có tác dụng khi chúng ta kết hợp HTML với các ngôn ngữ lập trình như (Javascript, PHP,
VD:
Làm việc với đối tượng Submit Button của thẻ 
type: Thuộc tính quy định kiểu hiển thị của đối tượng. Giá trị để hiển thị dạng Submit Button là: submit
name: Tên của đối tượng Submit Button. Giá trị là đoạn text thể hiện tên, thuộc tính này chỉ sử dụng và có tác dụng khi chúng ta kết hợp HTML với các ngôn ngữ lập trình như (Javascript, PHP,)
value: Giá trị sẽ hiển thị ngay trên nút Submit Button. Giá trị là một đoạn text được sử dụng do người dùng gõ vào để hiển thị tên trên nút Submit button
Làm việc với đối tượng Reset Button của thẻ 
type: Thuộc tính quy định kiểu hiển thị của đối tượng. Giá trị để hiển thị dạng Reset Button là: reset
name: Tên của đối tượng Reset Button Giá trị là đoạn text thể hiện tên, thuộc tính này chỉ sử dụng và có tác dụng khi chúng ta kết hợp HTML với các ngôn ngữ lập trình như (Javascript, PHP,)
value: Giá trị sẽ hiển thị ngay trên nút Reset Button. Giá trị là một đoạn text được sử dụng do người dùng gõ vào để hiển thị tên trên nút Reset button
2 - Làm việc với đối tượng Selectbox
Cặp thẻ 
Cặp thẻ dùng để khai báo bắt đầu làm việc với một danh sách các đối tượng mà người dùng muốn lựa chọn
name: Tên của đối tượng Selectbox. Giá trị là đoạn text thể hiện tên.
multiple: Thuộc tính quy định kiểu hiển thị tất cả các đối tượng trong Select hay còn gọi là danh sách các Option. Giá trị bằng multiple sẽ chuyển Selectbox sang chế độ hiển thị toàn bộ các Option và có thể sử dụng Ctrl để lựa chọn nhiều giá trị cùng lúc
Cặp thẻ 
Cặp thẻ nằm bên trong cặp thẻ dùng để khai báo một phần tử trong danh sách. Một danh sách có thể có một hoặc nhiều phần tử. 
value: Giá trị của mỗi thành phần Option. Giá trị là đoạn text thể hiện giá trị của mỗi Option, thuộc tính này chỉ sử dụng và có tác dụng khi chúng ta kết hợp HTML với các ngôn ngữ lập trình như (Javascript, PHP,)
selected: Thuộc tính này mặc định Option được chọn và hiểm thị ngay đầu tiên trong danh sách tất cả các Option. Giá trị bằng selected sẽ mặc định chọn thành phần Option nào có thuộc tính này
3 - Làm việc với đối tượng Textarea
Cặp thẻ 
name: Tên của đối tượng Textarea. Giá trị là đoạn text thể hiện tên.
Cols: Quy định độ rộng của trường Textarea. Giá trị sử dụng là một số nguyên dương
Rows: Quy định độ cao của trường Textarea. Giá trị sử dụng là một số nguyên dương
VD:
4 – Một số thẻ định dạng được sử dụng cho Form
Cặp thẻ 
Tạo ra khung bao lấy các đối tượng trong Form
Cặp thẻ 
Cặp thẻ nằm bên trong cặp thẻ và dùng để tạo tiêu đề cho Form và nằm lưng chừng ở phần khung bao
Chú ý: Chúng ta hoàn toàn sử dụng được các thẻ HTML ddingj dạng văn bản để định dạng cho các phần tử nằm bên trong cặp thẻ 
B – THỰC HÀNH
I – BÀI TẬP THỰC HÀNH
1 – Bài tập
Bài 1:
Sử dụng Form và Table để thiết kế hộp đăng nhập như hình 1 dưới đây
II – BÀI TẬP VỀ NHÀ
1 – Bài tập
Bài 2:
Sử dụng các kiến thức về Form và các đối tượng trong Form để hoàn thiện trang liện hệ của website như hình 2 dưới đây. Xem File bài giải bai_tap_2.html để việc thiết kế được chính xác hơn