[HTML] FORM VÀ CÁC ĐỐI TƯỢNG

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ư:

1. Form đăng nhập hệ thống
2. Form đăng ký
3. Form liên hệ
4. …

II – LÀM VIỆC VỚI FORM

1 – Form và các uộc tính của Form

1. Thẻ <form></form>
   • 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ẻ <input> 

Thẻ <input> 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.   

a. Làm việc với đối tượng Textbox của thẻ <input>

• 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.

b. Làm việc với đối tượng Password của thẻ <input>

• 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.

  c. Làm việc với đối tượng Checkbox của thẻ <input>

• 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

  b. Làm việc với đối tượng Radio của thẻ <input>

• 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

e. Làm việc với đối tượng File của thẻ <input>

• 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:

<form name = “contact” action = “contact.php” method = “post”>

<input type = “file” name = “fileupload”>

</form>

f. Làm việc với đối tượng Submit Button của thẻ <input>

• 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

g. Làm việc với đối tượng Submit Button của thẻ <input>

• 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

h. Làm việc với đối tượng Reset Button của thẻ <input>

• 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

1. Cặp thẻ <select></select>

Cặp thẻ <select></select> 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

2. Cặp thẻ <option></option>

Cặp thẻ <option></option> nằm bên trong cặp thẻ <select></select> 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

1. Cặp thẻ <textarea></textarea>

• 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

4 – Một số thẻ định dạng được sử dụng cho Form

1. Cặp thẻ <fieldset></fieldset>
   • Tạo ra khung bao lấy các đối tượng trong Form

2. Cặp thẻ <legend></legend>
   • Cặp thẻ <legend></legend> nằm bên trong cặp thẻ <fieldset></fieldset> 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ẻ <legend></legend>