Biểu mẫu nhập HTML* Thuộc tính
Chương này mô tả các thuộc tính form* khác nhau cho phần tử HTML <input> .
Thuộc tính biểu mẫu
Thuộc tính input form chỉ định dạng mà phần tử <input> thuộc về.
Giá trị của thuộc tính này phải bằng thuộc tính id của phần tử <form> mà nó thuộc về.
Ví dụ
Trường đầu vào 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):
<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">
Hãy tự mình thử »Thuộc tính hình thành
Thuộc tính input formaction chỉ định URL của tệp 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ụ
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> Hãy tự mình thử »Thuộc tính formenctype
Thuộc tính formenctype đầu vào chỉ định cách mã hóa dữ liệu biểu mẫu khi được gửi (chỉ đối với các 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ử <form> .
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 biểu mẫu có hai nút gửi. Cái đầu tiên gửi dữ liệu biểu mẫu với mã hóa mặc định, cái 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_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>
Hãy tự mình thử » Thuộc tính phương thức biểu mẫu
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 tới URL hành động.
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 biến URL (method="get") hoặc dưới dạng giao dịch bài đăng HTTP (method="post").
Lưu ý về phương pháp "get":
- Phương thức này nối dữ liệu biểu mẫu vào URL theo cặp tên/giá trị
- Phương pháp này 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ả
- Có giới hạn về 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 chuyển chính xác
- Đừng bao giờ sử dụng phương thức "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)
Lưu ý về phương pháp "đăng":
- Phương thức này gửi dữ liệu biểu mẫu dưới dạng giao dịch bài HTTP
- Không thể đánh dấu việc gửi biểu mẫu bằng phương thức "đăng"
- Phương thức "đăng" mạnh mẽ và an toàn hơn phương thức "get" và "đăng" 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 phương thức = "get". Cái thứ hai gửi dữ liệu biểu mẫu với phương thức = "post":
<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> Hãy tự mình thử »Thuộc tính formtarget
Thuộc tính formtarget đầu vào 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 đích 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ổ mục tiêu 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> Hãy tự mình thử »Thuộc tính formnovalidate
Thuộc tính formnovalidate đầu vào chỉ định rằng phần tử <input> không được xác thực khi 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 hoạt động với các loại đầu vào sau: gửi.
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> Hãy tự mình thử »Thuộc tính novalidate
Thuộc tính novalidate là thuộc tính <form> .
Khi xuất hiện, novalidate chỉ định rằng tất cả dữ liệu biểu mẫu sẽ 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 thực 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> Hãy tự mình thử »Biểu mẫu HTML và các phần tử đầu vào
| Tag | Description |
|---|---|
| <form> | Defines an HTML form for user input |
| <input> | Defines an input control |
Để có danh sách đầy đủ tất cả các thẻ HTML có sẵn, hãy truy cập Tham khảo thẻ HTML của chúng tôi.
