🔥CHỌN LỌC TOP NHỮNG KHOÁ HỌC LẬP TRÌNH ONLINE NHIỀU NGƯỜI THEO HOC TẠI ĐÂY🔥

Cafedev chia sẽ cho ace một số thuộc tính form của phần tử <input>

1. Thuộc tính Form

Thuộc tính form của đầu vào(input) chỉ định biểu mẫu(form) mà phần tử <input> thuộc form nào đó.

Giá trị của thuộc tính này phải bằng thuộc tính id của phần tử mà nó thuộc về.

Ví dụ: Trường nhập nằm bên ngoài biểu mẫu HTML (nhưng vẫn là một phần của biểu mẫu):

<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->

<form action="/action_page.php" id="form1">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="Submit">
</form>

<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" form="form1">

Copy and chạy code

2. Thuộc tinh formaction

Thuộc tính formaction của đầu vào xác định URL của file sẽ xử lý đầu vào 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 hoạt động với các loại đầu vào sau: gửi và hình ảnh.

Ví dụ: Một biểu mẫu HTML có hai nút gửi, với các hành động khác nhau:

 <form action="/action_page.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formaction="/action_page2.php" value="Submit as Admin">
</form>

Copy and chạy code

3. Thuộc tính formenctype

Thuộc tính formenctype đầu vào xác định cách mã hóa dữ liệu biểu mẫu khi được gửi (chỉ dành cho biểu mẫu có phương thức = “post”).

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

Thuộc tính formenctype hoạt động với các loại đầu vào sau: gửi và hình ảnh.

Ví dụ: Một hình thức với hai nút gửi. Đầu tiên gửi dữ liệu biểu mẫu với mã hóa mặc định, lần thứ hai gửi dữ liệu biểu mẫu được mã hóa thành “multipart/form-data”:

<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->

 <form action="/action_page_binary.asp" method="post">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formenctype="multipart/form-data"
  value="Submit as Multipart/form-data">
</form>

4. Thuộc tính formmethod

Thuộc tính formmethod đầu vào xác định phương thức HTTP để gửi dữ liệu biểu mẫu đến URL.

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 hoạt động với các loại đầu vào sau: gửi và hình ảnh.

Dữ liệu biểu mẫu có thể được gửi dưới dạng các biến URL (phương thức = “get”) hoặc dưới dạng giao dịch bài HTTP (phương thức = “post”).

Lưu ý về phương pháp “get”:

  • Phương pháp này nối dữ liệu biểu mẫu vào URL theo cặp giá trị là tên / giá trị
  • Phương pháp này hữu ích cho việc gửi biểu mẫu trong đó người dùng muốn đánh dấu kết quả
  • Có giới hạn về số lượng dữ liệu bạn có thể đặt trong một URL (khác nhau giữa các trình duyệt), do đó, bạn không thể chắc chắn rằng tất cả dữ liệu biểu mẫu sẽ được truyền chính xác
  • Không bao giờ sử dụng phương pháp “get” để truyền thông tin nhạy cảm! (mật khẩu hoặ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)

Ghi chú về phương pháp “post”:

  • Phương thức này gửi dữ liệu biểu mẫu dưới dạng HTTP post
  • Gửi mẫu với phương pháp “post” không thể được đánh dấu
  • Phương pháp “post” mạnh mẽ và an toàn hơn “get” và “post” không có giới hạn kích thước

Ví dụ: Một hình thức với hai nút gửi. Đầu tiên gửi dữ liệu biểu mẫu với phương thức = “get”. Thứ hai gửi dữ liệu biểu mẫu với phương thức = “post”:

<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->

 <form action="/action_page.php" method="get">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit using GET">
  <input type="submit" formmethod="post" value="Submit using POST">
</form>

Copy and chạy code

5. Thuộc tính formtarget

formtarget của đầu vào là một thuộc tính chỉ định tên hoặc từ khóa cho biết nơi hiển thị phản hồi nhận được 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 hoạt động với các loại đầu vào sau: gửi và hình ảnh.

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">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formtarget="_blank" value="Submit to a new window/tab">
</form>

6. Thuộc tính formnovalidate

Thuộc tính formnovalidate của đầu vào xác định rằng phần tử input không nên được xác nhận khi gửi.

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

Thuộc tính formnovalidate hoạt động với các loại đầu vào sau: submit.

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

 <form action="/action_page.php">
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formnovalidate="formnovalidate"
  value="Submit without validation">
</form>

7. Thuộc tính novalidate

Thuộc tính novalidate là thuộc tính của <form>.

Khi có mặt, novalidate chỉ định rằng tất cả dữ liệu biểu mẫu không được xác thực khi gửi.

Ví dụ: Chỉ định rằng không có dữ liệu biểu mẫu nào được xác nhận khi gửi:

 <form action="/action_page.php" novalidate>
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Submit">
</form>

Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:

Chào thân ái và quyết thắng!

Đăng ký kênh youtube để ủng hộ Cafedev nha các bạn, Thanks you!

BÀI VIẾT LIÊN QUANXEM THÊM