Biểu mẫu nhập HTML * Các thuộc tính
Chương này mô tả các form*thuộc tính khác nhau cho phần tử HTML <input>.
Thuộc tính biểu mẫu
formThuộc tính đầu vào chỉ định hình thức mà <input>phần tử 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ề.
Thí 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">
Thuộc tính formaction
Thuộc tính đầu vào formactionchỉ đị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 đè
actionthuộc tính của <form>phần tử.
Thuộc formactiontính hoạt động với các loại đầu vào sau: gửi và hình ảnh.
Thí 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>
Thuộc tính formenctype
Thuộc tính đầu vào 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 <form>phần tử.
Thuộc formenctypetính hoạt động với các loại đầu vào sau: gửi và hình ảnh.
Thí 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 mã hóa mặc định, thứ hai gửi dữ liệu biểu mẫu được mã hóa dưới dạng "nhiều phần / biểu mẫu-dữ liệu":
<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>
Thuộc tính formmethod
Thuộc tính đầu vào formmethod xác định phương thức HTTP để gửi dữ liệu biểu mẫu đến URL hành động.
Lưu ý: Thuộc tính này ghi đè thuộc tính phương thức của <form>phần tử.
Thuộc formmethodtính 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 thức "get":
- Phương thức này nối dữ liệu biểu mẫu vào URL trong các cặp tên / giá trị
- 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 đá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 (thay đổi 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 một cách chính xác
- Không bao giờ sử dụng phương pháp "lấy" để chuyể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 đăng HTTP
- Không thể đánh dấu các bài gửi biểu mẫu bằng phương pháp "bài đăng"
- 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
Thí 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">
<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>
Thuộc tính mục tiêu biểu mẫu
Thuộc tính đầu vào formtargetchỉ định tên hoặc từ khóa cho biết vị trí 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 <form>phần tử.
Thuộc formtargettính hoạt động với các loại đầu vào sau: gửi và hình ảnh.
Thí 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>
Thuộc tính formnovalidate
Thuộc tính đầu vào formnovalidatechỉ định rằng phần tử <input> sẽ 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 <form>
phần tử.
Thuộc formnovalidatetính hoạt động với các loại đầu vào sau: submit.
Thí 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">
<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>
Thuộc tính không hợp lệ
Thuộc novalidatetính là một <form>thuộc tính.
Khi hiện tại, novalidate chỉ định rằng tất cả dữ liệu biểu mẫu sẽ không được xác thực khi được gửi.
Thí dụ
Chỉ định rằng không có dữ liệu biểu mẫu nào nên đượ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>
Các phần tử đầu vào và biểu mẫu HTML
| 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 .