Thuộc tính input Form* html

Trong bài đọc này, chúng ta sẽ mô tả các thuộc tính form* khác nhau cho phần tử HTML <input>.

Thuộc tính Form


Thuộc tính input form chỉ định mối liên hệ của một phần tử <input> với phần tử <form>.

Giá trị của thuộc tính form này phải bằng giá trị thuộc tính id của phần tử <form> mà nó giữ mối liên hệ.

Ví dụ

<form action="action_page.php" id="form1">
...
</form>
<input type="text" id="lname" name="lname" form="form1">.

Xem kết quả

Thuộc tính Formaction


Thuộc tính input formaction chỉ định URL của file sẽ xử lý dữ liệu khi biểu mẫu được gửi.

Lưu ý: Thuộc tính này ghi đè thuộc tính action của phần tử <form>.

Thuộc tính formaction được sử dụng cùng với các thuộc tính type input như sau: submitimage.

Ví dụ

<form action="/action_page.php">
  ...
  <input type="submit" formaction="action_page.php" value="Submit as Admin">
</form>

Xem kết quả

Thuộc tính Formenctype


Thuộc tính input formenctype chỉ định cách mã hóa dữ liệu biểu mẫu khi gửi (chỉ dành cho biểu mẫu có method="post").

Lưu ý: Thuộc tính này ghi đè thuộc tính enctype của phần tử <input>.

Thuộc tính formenctype được sử dụng cùng với các thuộc tính type input như sau: submitimage.

Ví dụ: Một biểu mẫu có hai nút gửi. Thao tác đầu tiên gửi dữ liệu biểu mẫu với mã hóa mặc định, thao tác thứ hai gửi dữ liệu biểu mẫu được mã hóa dưới dạng "Multipart/form-data".

<form action="action_page.php" method="post">
  ...
  <input type="submit" formenctype="multipart/form-data" 
  value="Submit as Multipart/form-data">
</form>

Xem kết quả

Thuộc tính Formmethod


Thuộc tính input formmethod xác định phương thức HTTP để gửi dữ liệu biểu mẫu đến file xử lý.

Lưu ý: Thuộc tính này ghi đè thuộc tính phương thức của phần tử <form>.

Thuộc tính formmethod được sử dụng cùng với các thuộc tính type input như sau: submitimage.

Dữ liệu biểu mẫu có thể được gửi dưới dạng URL (method="get") hoặc dưới dạng HTTP (method="post").

Lưu ý về phương thức "get":

  • Phương thức này nối dữ liệu biểu mẫu gửi vào thanh URL trong các cặp name/value
  • Phương pháp này hữu ích cho các lần gửi biểu mẫu mà người dùng muốn sử dụng các cặp name/value trên thanh URL để thực hiện các truy vấn khác
  • Có giới hạn về số lượng dữ liệu bạn có thể đặt trong một thanh URL (thay đổi giữa các trình duyệt), và do đó, chúng ta không thể chắc chắn rằng tất cả dữ liệu biểu mẫu sẽ được gửi một cách đầy đủ và chính xác
  • Không bao giờ sử dụng phương pháp "get" để gửi thông tin nhạy cảm! (mật khẩu hoặc các thông tin nhạy cảm khác sẽ hiển thị trên thanh địa chỉ của trình duyệt)

Lưu ý về phương thức "post":

  • Phương thức này gửi dữ liệu biểu mẫu dưới dạng một phương thức HTTP
  • Không thể lấy dữ liệu từ biểu mẫu để thực hiện các truy vấn khác bằng phương pháp "post"
  • Phương thức "post" mạnh mẽ và an toàn hơn "get" và "post" không có giới hạn về kích thước

Ví dụ: Một biểu mẫu có hai nút gửi. Đầu tiên gửi dữ liệu biểu mẫu với method="get". Thứ hai gửi dữ liệu biểu mẫu với method="post".

<form action="action_page.php" method="get" target="_blank">
  ...
  <input type="submit" formmethod="post" value="Submit using POST">
</form>

Xem kết quả

Thuộc tính Formtarget


Thuộc tính input formtarget xác định nơi sẽ hiển thị kết quả phản hồi xử lý dữ liệu của máy chủ sau khi gửi biểu mẫu.

Lưu ý: Thuộc tính này ghi đè thuộc tính target của phần tử <form>.

Thuộc tính formtarget được sử dụng cùng với các thuộc tính type input như sau: submitimage.

Ví dụ: Một biểu mẫu có hai nút gửi, với các cửa sổ target khác nhau.

<form action="action_page.php">
  ...
  <input type="submit" formtarget="_blank" value="Submit to a new window/tab">
</form>

Xem kết quả

Thuộc tính Formnovalidate


Thuộc tính input formnovalidate chỉ định dữ liệu của phần tử <input> không được xác thực khi được gửi.

Lưu ý: Thuộc tính này ghi đè thuộc tính novalidate của phần tử <form>.

Thuộc tính formnovalidate được sử dụng cùng với các thuộc tính type input như sau: submit.

Ví dụ: Một biểu mẫu có hai nút gửi (có và không có xác thực).

<form action="action_page.php">
  ...
  <input type="submit" formnovalidate="formnovalidate" value="Submit without validation">
</form>

Xem kết quả

Thuộc tính Novalidate


Thuộc tính novalidate là một thuộc tính của phần tử HTML <form>.

Thuộc tính novalidate chỉ định tất cả các dữ liệu biểu mẫu sẽ không được xác thực khi được gửi.

Ví dụ: Không có dữ liệu biểu mẫu nào được xác thực khi gửi.

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

Xem kết quả