Thuộc tính biểu mẫu HTML
Chương này mô tả các thuộc tính khác nhau cho phần tử HTML <form> .
Thuộc tính hành động
Thuộc tính action xác định hành động sẽ được thực hiện khi biểu mẫu được gửi.
Thông thường, dữ liệu biểu mẫu được gửi đến một tệp trên máy chủ khi người dùng nhấp vào nút gửi.
Trong ví dụ bên dưới, 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 tập lệnh phía máy chủ xử lý dữ liệu biểu mẫu:
Ví dụ
Khi gửi, hãy gửi dữ liệu biểu mẫu tới "action_page.php":
<form action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" name="fname"
value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
Hãy tự mình thử » Mẹo: Nếu thuộc tính action bị bỏ qua, hành động đó sẽ được đặt thành trang hiện tại.
Thuộc tính mục tiêu
target tính đích chỉ định nơi hiển thị phản hồi nhận được sau khi gửi biểu mẫu.
Thuộc tính target có thể có một trong các giá trị sau:
| Value | Description |
|---|---|
| _blank | The response is displayed in a new window or tab |
| _self | The response is displayed in the current window |
| _parent | The response is displayed in the parent frame |
| _top | The response is displayed in the full body of the window |
| framename | The response is displayed in a named iframe |
Giá trị mặc định là _self có nghĩa là phản hồi sẽ mở trong cửa sổ hiện tại.
Ví dụ
Tại đây, kết quả đã gửi sẽ mở trong tab trình duyệt mới:
<form action="/action_page.php" target="_blank"> Hãy tự mình thử »Thuộc tính phương thức
Thuộc tính method chỉ định phương thức HTTP sẽ được sử dụng khi gửi dữ liệu biểu mẫu.
Dữ liệu biểu mẫu có thể được gửi dưới dạng biến URL (với method="get" ) hoặc dưới dạng giao dịch bài đăng HTTP (với method="post" ).
Phương thức HTTP mặc định khi gửi dữ liệu biểu mẫu là GET.
Ví dụ
Ví dụ này sử dụng phương thức GET khi gửi dữ liệu biểu mẫu:
<form action="/action_page.php" method="get"> Hãy tự mình thử »Ví dụ
Ví dụ này sử dụng phương thức POST khi gửi dữ liệu biểu mẫu:
<form action="/action_page.php" method="post"> Hãy tự mình thử »Lưu ý về GET:
- Nối dữ liệu biểu mẫu vào URL, theo cặp tên/giá trị
- KHÔNG BAO GIỜ sử dụng GET để gửi dữ liệu nhạy cảm! (dữ liệu biểu mẫu đã gửi sẽ hiển thị trong URL!)
- Độ dài của URL bị giới hạn (2048 ký tự)
- Hữu ích cho việc gửi biểu mẫu khi người dùng muốn đánh dấu kết quả
- GET phù hợp với dữ liệu không an toàn, như chuỗi truy vấn trong Google
Lưu ý về POST:
- Nối dữ liệu biểu mẫu bên trong nội dung của yêu cầu HTTP (dữ liệu biểu mẫu đã gửi không được hiển thị trong URL)
- POST không có giới hạn về kích thước và có thể được sử dụng để gửi lượng lớn dữ liệu.
- Việc gửi biểu mẫu bằng POST không thể được đánh dấu
Mẹo: Luôn sử dụng POST nếu dữ liệu biểu mẫu chứa thông tin cá nhân hoặc nhạy cảm!
Thuộc tính tự động hoàn thành
Thuộc tính autocomplete chỉ định xem biểu mẫu có nên bật hay tắt tính năng tự động hoàn thành hay không.
Khi bật tính năng tự động hoàn thành, trình duyệt sẽ tự động hoàn thành các giá trị dựa trên các giá trị mà người dùng đã nhập trước đó.
Ví dụ
Một biểu mẫu có tính năng tự động hoàn thành trên:
<form action="/action_page.php" autocomplete="on"> Hãy tự mình thử »Thuộc tính Novalidate
Thuộc tính novalidate là thuộc tính boolean.
Khi xuất hiện, nó chỉ định rằng dữ liệu biểu mẫu (đầu vào) sẽ không được xác thực khi gửi.
Ví dụ
Một biểu mẫu có thuộc tính novalidate:
<form action="/action_page.php" novalidate> Hãy tự mình thử »Bài tập HTML
Danh sách tất cả các thuộc tính <form>
| Thuộc tính | Sự miêu tả |
|---|---|
| bộ ký tự chấp nhận | Chỉ định mã hóa ký tự được sử dụng để gửi biểu mẫu |
| hoạt động | Chỉ định nơi gửi dữ liệu biểu mẫu khi biểu mẫu được gửi |
| tự động hoàn thành | Chỉ định xem một biểu mẫu có nên bật hay tắt tính năng tự động hoàn thành hay không |
| kiểu mã hóa | Chỉ định cách mã hóa dữ liệu biểu mẫu khi gửi nó đến máy chủ (chỉ dành cho phương thức = "bài") |
| phương pháp | Chỉ định phương thức HTTP sẽ sử dụng khi gửi dữ liệu biểu mẫu |
| tên | Chỉ định tên của biểu mẫu |
| xác nhận mới | Chỉ định rằng biểu mẫu không được xác thực khi gửi |
| liên quan | Chỉ định mối quan hệ giữa tài nguyên được liên kết và tài liệu hiện tại |
| mục tiêu | Chỉ định nơi hiển thị phản hồi nhận được sau khi gửi biểu mẫu |
