HTML4 15 – Form trong HTML

0
121

Bài 15 này, chúng ta sẽ đi tìm hiểu về định dạng Form trong HTML nhé, đây là 1 định dạng không thể thiếu trong các giao diện website của bạn.

Form là gì?

Form là những biểu mẫu trên website giúp người dùng tương tác với hệ thống, 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 định dạng Form.

Form thường được ứng dụng trong việc tạo:

  • Form đăng nhập login
  • Form đăng ký register
  • Form liên hệ contact

Làm việc với Form như thế nào?

Để khai báo vùng làm việc của Form, ta sử dụng cặp thẻ <form></form>

Trong thẻ <form> có các thuộc tính như sau:

Tên thuộc tính Ý nghĩa thuộc tính
name Tên Form (được sử dụng cho lập trình backend)
action Hướng xử lý, đích đến của dữ liệu trong Form (được sử dụng cho lập trình Backend)
method Phương thức truyền dữ liệu trong Form (được sử dụng cho lập trình backend, có 2 giá trị là GET hoặc POST)

Lưu ý: 3 thuộc tính kể trên được sử dụng và có tác dụng khi chúng ta kết hợp HTML với ngôn ngữ lập trình web PHP.

Ví dụ:

Trình duyệt hỗ trợ

  • Chrome
  • Firefox
  • IE
  • Safari
  • Opera

Các phần tử trong Form của HTML4

1. Phần tử TEXTBOX

Khai báo 1 phần tử textbox, sử dụng thẻ <input/>.

Các thuộc tính:

  • name: đặt tên cho phần tử, xác định tên cho trường được gửi tới Server để xác định và nhận giá trị xử lý.
  • type: định kiểu cho phần tử (type=”text”), xác định kiểu của dữ liệu nhập vào là text, chữ, ký tự, …
  • value: giá trị của phần tử
  • size: xác định độ rộng các ký tự của text
  • maxlength: xác định số lượng ký tự lớn nhất mà người sử dụng có thể nhập vào Text Input.

Ví dụ:

2. Phần tử PASSWORD

Khai báo 1 phần tử password, kiểu này sẽ giấu các ký tự ngay sau khi người sử dụng nhập mật khẩu vào, sử dụng thẻ <input/>.

Các thuộc tính:

  • name: đặt tên cho phần tử, xác định tên cho trường được gửi tới Server để xác định và nhận giá trị xử lý.
  • type: định kiểu cho phần tử (type=”password”), xác định kiểu dữ liệu nhập vào là password.
  • value: giá trị của phần tử
  • size: xác định độ rộng các ký tự của text
  • maxlength: xác định số lượng ký tự lớn nhất mà người sử dụng có thể nhập vào Text Input.

Ví dụ:

3. Phần tử CHECKBOX

Khai báo 1 phần tử checkbox, sử dụng thẻ <input/>. Checkbox được sử dụng khi có nhiều hơn một tùy chọn được yêu cầu để chọn.

Các thuộc tính:

  • name: đặt tên cho phần tử, xác định tên trường được gửi tới Server để xác định và nhận giá trị.
  • type: định kiểu cho phần tử (type=”checkbox”)
  • value: giá trị của phần tử
  • checked: lựa chọn mặc định (checked=”checked”)

Ví dụ:

4. Phần tử RADIO

Khai báo 1 phần tử radio, sử dụng thẻ <input/>. Radio Button được sử dụng khi ngoài rất nhiều các tùy chọn, chỉ có một tùy chọn được yêu cầu để chọn.

Các thuộc tính:

  • name: đặt tên cho phần tử, xác định tên trường được gửi tới Server để xác định và nhận giá trị.
  • type: định kiểu cho phần tử (type=”radio”)
  • value: giá trị của phần tử
  • checked: lựa chọn mặc định (checked=”checked”)

Ví dụ:

5. Phần tử FILE

Khai báo 1 phần tử file, sử dụng thẻ <input/>. Nếu bạn muốn cho phép một người sử dụng tải một file lên trang của bạn, bạn sẽ cần sử dụng một File Upload Box.

Các thuộc tính:

  • name: đặt tên cho phần tử, xác định tên trường được gửi tới Server để xác nhận và nhận giá trị.
  • type: định kiểu cho phần tử (type=”file”)
  • accept: xác định kiểu của file mà Server chấp nhận.

Ví dụ:

6. Phần tử SUBMIT BUTTON

Khai báo 1 phần tử submit, sử dụng thẻ <input/>.

Các thuộc tính:

  • name: đặt tên cho phần tử
  • type: định kiểu cho phần tử (type=”submit”)
  • value: giá trị của phần tử

Ví dụ:

7. Phần tử RESET BUTTON

Khai báo 1 phần tử submit, sử dụng thẻ <input/>.

Các thuộc tính:

  • name: đặt tên cho phần tử
  • type: định kiểu cho phần tử (type=”reset”)
  • value: giá trị của phần tử

Ví dụ:

8. Phần tử TEXTAREA

Khai báo 1 phần tử textarea, sử dụng cặp thẻ <textarea><textarea/>, nó được sử dụng khi người sử dụng yêu cầu thông tin chi tiết mà có độ dài nhiều dòng, hơn 1 dòng.

Các thuộc tính:

  • name: đặt tên cho phần tử, cung cấp tên cho trường được gửi tới Server để xác định và nhận giá trị.
  • cols: quy định độ rộng của phần tử (giá trị là số nguyên dương)
  • rows: quy định độ cao của phần tử (giá trị là số nguyên dương)

Ví dụ:

9. Phần tử SELECTBOX

Khai báo 1 danh sách mà người dùng muốn lựa chọn, chúng ta sử dụng phần tử selectbox với các cặp thẻ <select><select/> bao ngoài <option></option>. Một Select Box cung cấp danh sách liệt kê từ trên xuống (hộp drop down) các tùy chọn đa dạng trong một form, và tại đó người sử dụng có thể chọn một hoặc nhiều lựa chọn.

Các thuộc tính cho thẻ <select>:

  • name: đặt tên cho phần tử, xác định tên được gửi tới Server để xác định và nhận giá trị.
  • size: Được sử dụng để hiển thị một hộp danh sách có thanh cuốn.
  • multiple: Nếu thiết lập là multiple, thì cho phép người sử dụng lựa chọn nhiều hơn một mục trên menu.

Các thuộc tính cho thẻ <option>:

  • label: Gán nhãn cho tùy chọn.
  • selected: lựa chọn mặc định (selected=”selected”)
  • value: giá trị của phần tử trong danh sách

Ví dụ:

10. Hidden Form trong HTML

Hidden Form được sử dụng để ẩn dữ liệu bên trong trang và sau đó có thể được đẩy tới Server. Form này ẩn bên trong code và không xuất hiện trên các trang.

Ví dụ, một Hidden Form được sử dụng để giữ số trang hiện tại. Khi một người sử dụng nhấn vào trang tiếp theo (next page) thì giá trị của Hidden Form sẽ được gửi tới Server và tại đây nó sẽ quyết định trang nào sẽ được hiển thị tiếp theo trang hiện tại.

Như vậy là chúng ta đã tìm hiểu xong về định dạng Form trong HTML, rất hay đúng không nào. Đây là 1 định dạng bạn không được bỏ qua, nên hãy ôn tập thật chắc nhé. Chúc các bạn học tập tốt!

 

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây