Bài học này mô tả các thuộc tính khác nhau của các trường <input> HTML
Thuộc tính form
Thuộc tính form của thẻ <input> xác định form mà phần tử <input> thuộc về.
Ví dụ:
Một thẻ <input> nằm bên ngoài form HTML (nhưng vẫn là một phần của form):
<form action="/action_page.php" id="form1"> <label for="fname">Tên:</label> <input type="text" id="fname" name="fname"><br><br> <input type="submit" value="Gửi"></form>
<label for="lname">Họ:</label><input type="text" id="lname" name="lname" form="form1">Thuộc tính formaction
Thuộc tính formaction của thẻ <input> xác định URL của tệp sẽ xử lý dữ liệu nhập khi form được gửi.
Ví dụ:
Một form HTML với hai nút gửi, với các hành động khác nhau:
<form action="/action_page.php"> <label for="fname">Tên:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">Họ:</label> <input type="text" id="lname" name="lname"><br><br> <input type="submit" value="Gửi"> <input type="submit" formaction="/action_page2.php" value="Gửi như Admin"></form>Thuộc tính formenctype
Thuộc tính formenctype của thẻ <input> xác định cách mã hóa dữ liệu form khi gửi (chỉ áp dụng cho form có method="post").
Ví dụ:
Một form với hai nút gửi. Nút đầu tiên gửi dữ liệu form với mã hóa mặc định, nút thứ hai gửi dữ liệu form được mã hóa dưới dạng "multipart/form-data":
<form action="/action_page_binary.asp" method="post"> <label for="fname">Tên:</label> <input type="text" id="fname" name="fname"><br><br> <input type="submit" value="Gửi"> <input type="submit" formenctype="multipart/form-data" value="Gửi dưới dạng Multipart/form-data"></form>Thuộc tính formmethod
Thuộc tính formmethod của thẻ <input> xác định phương thức HTTP để gửi dữ liệu form đến URL action.
Ví dụ:
Một form với hai nút gửi. Nút đầu tiên gửi dữ liệu form với method="get". Nút thứ hai gửi dữ liệu form với method="post":
<form action="/action_page.php" method="get"> <label for="fname">Tên:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">Họ:</label> <input type="text" id="lname" name="lname"><br><br> <input type="submit" value="Gửi bằng GET"> <input type="submit" formmethod="post" value="Gửi bằng POST"></form>Thuộc tính formtarget
Thuộc tính formtarget của thẻ <input> xác định tên hoặc một từ khóa chỉ ra nơi hiển thị phản hồi sau khi gửi form.
Ví dụ:
Một form với hai nút gửi, với cửa sổ đích khác nhau:
<form action="/action_page.php"> <label for="fname">Tên:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">Họ:</label> <input type="text" id="lname" name="lname"><br><br> <input type="submit" value="Gửi"> <input type="submit" formtarget="_blank" value="Gửi vào cửa sổ/tab mới"></form>Thuộc tính formnovalidate
Thuộc tính formnovalidate của thẻ <input> xác định rằng một phần tử <input> không nên được kiểm tra khi được gửi.
Ví dụ:
Một form với hai nút gửi (có và không có kiểm tra):
<form action="/action_page.php"> <label for="email">Nhập email của bạn:</label> <input type="email" id="email" name="email"><br><br> <input type="submit" value="Gửi"> <input type="submit" formnovalidate="formnovalidate" value="Gửi mà không kiểm tra"></form>Thuộc tính novalidate
Thuộc tính novalidate là một thuộc tính của <form>.
Khi sử dụng novalidate xác định rằng tất cả dữ liệu form không nên được kiểm tra khi gửi.
Ví dụ:
Xác định rằng không có dữ liệu form nào nên được kiểm tra khi gửi:
<form action="/action_page.php" novalidate> <label for="email">Nhập email của bạn:</label> <input type="email" id="email" name="email"><br><br> <input type="submit" value="Gửi"></form>Các phần tử form HTML và Trường <input>
Thẻ Mô tả
| <form> | Định nghĩa một form HTML cho đầu vào của người dùng |
| <input> | Định nghĩa điều khiển đầu vào |