Thuộc tính hình thức của biểu mẫu HTML

Chương này giới thiệu HTML <form> Các thuộc tính khác nhau của phần tử.

Thuộc tính Action

action Thuộc tính định nghĩa hành động sẽ được thực hiện khi gửi biểu mẫu.

Thường thì khi người dùng nhấn nút "Gửi", dữ liệu biểu mẫu sẽ được gửi đến tệp trên máy chủ.

Trong ví dụ dưới đây, dữ liệu biểu mẫu được gửi đến tệp có tên "action_page.php". Tệp này chứa đoạn mã server-side xử lý dữ liệu biểu mẫu:

Mô hình

Sau khi gửi, dữ liệu biểu mẫu sẽ được gửi đến "action_page.php":

<form action="/action_page.php">
  <label for="fname">Tên:</label><br>
  <input type="text" id="fname" name="fname" value="Bill"><br>
  <label for="lname">Họ:</label><br>
  <input type="text" id="lname" name="lname" value="Gates"><br><br>
  <input type="submit" value="Submit">
</form>

Thử ngay

Lưu ý:Nếu bỏ qua thuộc tính action, action sẽ được đặt thành trang hiện tại.

Thuộc tính Target

target Thuộc tính xác định nơi hiển thị phản hồi sau khi submit biểu mẫu.

target Thuộc tính có thể được thiết lập với một trong các giá trị sau:

Giá trị Mô tả
_blank Phản hồi hiển thị trong cửa sổ hoặc thẻ mới.
_self Phản hồi hiển thị trong cửa sổ hiện tại.
_parent Phản hồi hiển thị trong khung cha.
_top Phản hồi hiển thị trong toàn bộ body của cửa sổ.
framename Phản hồi hiển thị trong iframe được chỉ định tên.

Giá trị mặc định là _selfnghĩa là phản hồi sẽ mở trong cửa sổ hiện tại.

Mô hình

Ở đây, kết quả submit sẽ mở trong thẻ duyệt web mới:

<form action="/action_page.php" target="_blank">

Thử ngay

Thuộc tính Method

Thuộc tính method xác định phương thức HTTP cần sử dụng để submit dữ liệu biểu mẫu.

Dữ liệu biểu mẫu có thể được sử dụng như các biến URL (sử dụng method="get"）hoặc như một giao dịch HTTP POST (sử dụng method="post"）gửi.

Phương thức HTTP mặc định khi submit dữ liệu biểu mẫu là GET。

Mô hình

Ví dụ này sử dụng phương thức GET để submit dữ liệu biểu mẫu:

<form action="/action_page.php" method="get">

Thử ngay

Mô hình

Ví dụ này sử dụng phương thức POST để submit dữ liệu biểu mẫu:

<form action="/action_page.php" method="post">

Thử ngay

Lưu ý về GET:

  • Chỉnh sửa dữ liệu biểu mẫu vào URL dưới dạng đối tượng/giá trị (sử dụng)
  • Chắc chắn đừng sử dụng GET để gửi dữ liệu nhạy cảm！（Dữ liệu biểu mẫu submit hiển thị trong URL！）
  • Kích thước URL bị giới hạn (2048 ký tự)
  • Rất hữu ích cho việc submit biểu mẫu mà người dùng muốn thêm kết quả vào dấu trang
  • GET phù hợp với dữ liệu không an toàn, chẳng hạn như chuỗi tìm kiếm trong Google

Lưu ý về POST:

  • Chỉnh sửa dữ liệu biểu mẫu vào phần nội dung của yêu cầu HTTP (dữ liệu biểu mẫu submit không hiển thị trong URL)
  • POST không có giới hạn về kích thước, có thể được sử dụng để gửi lượng dữ liệu lớn.
  • Biểu mẫu submit với POST không thể thêm dấu trang

Lưu ý:Nếu dữ liệu biểu mẫu chứa thông tin nhạy cảm hoặc thông tin cá nhân, hãy sử dụng POST!

Thuộc tính Autocomplete

autocomplete Thuộc tính xác định biểu mẫu có nên mở chức năng tự động hoàn thành hay không.

Khi kích hoạt chức năng tự động hoàn thành, trình duyệt sẽ tự động điền giá trị dựa trên giá trị mà người dùng đã nhập trước đó.

Mô hình

Kích hoạt biểu mẫu tự động điền:

<form action="/action_page.php" autocomplete="on">

Thử ngay

Tính chất Novalidate

novalidate Tính chất là một tính chất boolean.

Nếu đã thiết lập, nó định nghĩa không nên xác thực dữ liệu biểu mẫu khi gửi.

Mô hình

Biểu mẫu không thiết lập tính chất novalidate:

<form action="/action_page.php" novalidate>

Thử ngay

Danh sách tất cả các tính chất của <form>

Tính chất Mô tả
accept-charset Định nghĩa mã mã hóa ký tự cần sử dụng để gửi biểu mẫu.
action Định nghĩa nơi gửi dữ liệu biểu mẫu khi gửi biểu mẫu.
autocomplete Định nghĩa liệu biểu mẫu có nên mở chức năng tự động hoàn thành (điền) hay không.
enctype Định nghĩa cách mã hóa dữ liệu biểu mẫu khi gửi lên máy chủ (chỉ áp dụng cho method="post").
method Định nghĩa phương pháp HTTP cần sử dụng để gửi dữ liệu biểu mẫu.
name Định nghĩa tên biểu mẫu.
novalidate Định nghĩa không nên xác thực biểu mẫu khi gửi.
rel Định nghĩa mối quan hệ giữa tài nguyên liên kết và tài liệu hiện tại.
target Định nghĩa nơi hiển thị phản hồi nhận được sau khi gửi biểu mẫu.