Làm việc với Form

Phần tử Form
Phần tử Form

Form là một trong những phần tử quan trọng nhất của một website hiện đại. Ngày nay, trang web đã rời xa khỏi mục đích ban đầu của nó là cung cấp thông tin cho người dùng. Người dùng còn tương tác ngược lại với trang web của chúng ta. Và phần tử form là chìa khóa, giúp chúng ta thực hiện những tương tác đó.

Phương thức POST và GET

POST và GET là 2 phương thức cơ bản hỗ trợ việc gửi dữ liệu từ người dùng lên máy chủ web. Trong phạm vi bài viết này, mình sẽ không đi quá sâu vào việc phân tích kỹ thuật các phương thức này.

Để hiểu rõ hơn về 2 phương thức này, chúng ta hãy xem bảng bên dưới:

POST GET
Dữ liệu không được hiển thị phía trên đường dẫn của trang web Dữ liệu sẽ hiển thị phía trên đường dẫn của trang web
  • Dữ liệu gửi lên máy chủ không bị giới hạn kích thước
  • Do dữ liệu không nằm trên đường dẫn nên khó nắm thông tin và không thể lưu được trạng thái lại
  • Dữ liệu được thêm vào trên đường dẫn. Có định dạng key=value, các cặp key, value được nối với nhau bằng dấu &
  • Đường dẫn của một trang web bị giới hạn bởi 2048 ký tự. Kéo theo dữ liệu gửi qua phương thức GET cũng sẽ bị giới hạn
  • Do dữ liệu gửi lên máy chủ sẽ được hiển thị trên url. Do đó, cần cân nhắc và tránh gửi các dữ liệu nhạy cảm dưới phương thức này

Phần tử form

Xét ví dụ bên dưới, ta thấy phần tử form tương đối phức tạp. Gồm các phần tử input, label sắp xếp cạnh nhau.

Phần tử input

Phần tử input có nhiệm vụ thu thập dữ liệu của người dùng. Sau nhiều lần nâng cấp với mục đích tăng trải nghiệm cho người dung. Phần tử input hiện nay gồm các biến thể sau:

Khi làm việc với phần tử input, có 3 thuộc tính chúng ta sẽ đặc biệt quan tâm:

  • type: quy định loại biến thể. Các loại biến thể khác nhau sẽ được trình duyệt hiển thị khác nhau
  • name: tên biến khi gửi và nhận dữ liệu
  • value: lưu trữ dữ liệu người dùng

Phần tử label

Phần tử label có hai công dụng chính trong form:

  • Mô tả chi tiết hơn về chức năng của input
  • Tăng trải nghiệm của người dùng. Một số input có kích thước khá nhỏ như checkbox, radio button, …vv Khi thao tác với chúng người dùng sẽ gặp ít nhiều khó khăn. Với sự hỗ trợ của label, khi người dùng click vào label, hệ thống sẽ tự động focus vào phần tử input tương ứng.

Button submit

Chúng ta có thể sử dụng một đoạn mã HTML bên dưới để định nghĩa một button submit.

Button submit sẽ giúp người dùng kích hoạt sự kiện gửi dữ liệu trong form đến máy chủ.

Các thuộc tính

Phần tử form bao gồm các thuộc tính

  • accept-charset
  • action
  • autocomplete
  • enctype
  • method
  • name
  • novalidate
  • target

Trong đó, có 2 thuộc tính chúng ta sẽ sử dụng tương đối nhiều.

action

Chỉ định đích đến của dữ liệu, giá trị là một đường dẫn. Ví dụ: chúng ta có file login-form.html để hiển thị form đăng nhập cho người dùng. Dữ liệu muốn gửi về trang authenticate.php để máy chủ xác thực người dùng. Thì authenticate.php chính là giá trị của thuộc tính này. Nếu thuộc tính này để trống, dữ liệu sẽ chuyển đến trang hiện tại.

method

Quy định phương thức chuyển dữ liệu của form. Thuộc tính có giá trị mặc định là GET