1.1 Phần tử <form>
Form là một phần quan trọng trong việc tương tác của người dùng với các trang web. Thông qua form, người dùng có thể nhập dữ liệu,
sau đó gửi đến server để xử lý. Trong HTML, phần tử <form> được dùng để tạo form.
Thẻ <form> được dùng để tạo form trên trang web. Nó hoạt động như một container cho các phần tử
form khác nhau như text field, button, checkbox, v.v. Tất cả dữ liệu mà người dùng nhập vào có thể được gửi đến server để xử lý.
Ví dụ sử dụng:
<form action="/submit" method="post">
<label for="username">Tên người dùng:</label>
<input type="text" id="username" name="username" required>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br>
<button id="submit" type="submit">Gửi</button>
</form>
<script>
const userName = document.getElementById("username");
const userEmail = document.getElementById("email");
const submit = document.getElementById("submit");
submit.addEventListener("click", (e) => {
if (userName.validity.valid && userEmail.validity.valid) {
e.preventDefault();
alert(`Tên của bạn: ${userName.value}\n` + `Email của bạn: ${userEmail.value}`);
}
});
</script>
<form action="/submit" method="post">
<label for="username">Tên người dùng:</label>
<input type="text" id="username" name="username" required>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br>
<button type="submit">Gửi</button>
</form>
Thuộc tính của thẻ <form>
Thuộc tính action chỉ định URL nơi dữ liệu form sẽ được gửi đi sau khi nhấn nút gửi.
Nếu không chỉ định thuộc tính action, dữ liệu form sẽ được gửi tới URL hiện tại.
Ví dụ sử dụng thuộc tính action:
<form action="https://example.com/submit">
<!-- các phần tử form -->
</form>
Thuộc tính method chỉ định phương thức HTTP sử dụng để gửi dữ liệu form. Có hai giá trị: GET và POST.
- GET: dữ liệu form được đưa vào URL của yêu cầu dưới dạng tham số. Phương thức này phù hợp để gửi lượng nhỏ dữ liệu và không nên dùng để gửi thông tin nhạy cảm.
- POST: dữ liệu form được gửi trong phần thân của yêu cầu HTTP. Phương thức này phù hợp để gửi lượng lớn dữ liệu và thông tin nhạy cảm.
Ví dụ sử dụng thuộc tính method:
<form action="/submit" method="post">
<!-- các phần tử form -->
</form>
1.2 Phương thức gửi dữ liệu
Phương thức GET
Phương thức GET gửi dữ liệu form dưới dạng các tham số URL. Phương thức này được sử dụng mặc định nếu không chỉ định thuộc tính method.
Ví dụ sử dụng phương thức GET:
<form action="/search" method="get">
<label for="query">Tìm kiếm:</label>
<input type="text" id="query" name="query" required>
<button id="submit" type="submit">Tìm</button>
</form>
<script>
const searchField = document.getElementById("query");
const submit = document.getElementById("submit");
submit.addEventListener("click", (e) => {
if (searchField.validity.valid) {
e.preventDefault();
alert(`Bạn đã tìm: ${searchField.value}`);
}
});
</script>
<form action="/search" method="get">
<label for="query">Tìm kiếm:</label>
<input type="text" id="query" name="query">
<button type="submit">Tìm</button>
</form>
Đặc điểm của phương thức GET
- Dữ liệu form hiện hữu trong URL, khiển phương thức không phù hợp để truyền thông tin nhạy cảm
- Có giới hạn kích thước dữ liệu do độ dài URL bị hạn chế
- Dữ liệu có thể dễ dàng bị cache, và bookmark có thể lưu trữ trong trình duyệt
Phương thức POST
Phương thức POST gửi dữ liệu form trong phần thân của yêu cầu HTTP. Phương thức này được sử dụng để truyền lượng dữ liệu lớn và thông tin nhạy cảm.
Ví dụ sử dụng phương thức POST:
<form action="/submit" method="post">
<label for="username">Tên người dùng:</label>
<input type="text" id="username" name="username" required>
<br>
<label for="password">Mật khẩu:</label>
<input type="password" id="password" name="password" required>
<br>
<button id="submit" type="submit">Gửi</button>
</form>
<script>
const userName = document.getElementById("username");
const password = document.getElementById("password");
const submit = document.getElementById("submit");
submit.addEventListener("click", (e) => {
if (userName.validity.valid && password.validity.valid) {
e.preventDefault();
alert(`Chào mừng, ${userName.value}!`);
}
});
</script>
<form action="/submit" method="post">
<label for="username">Tên người dùng:</label>
<input type="text" id="username" name="username" required>
<br>
<label for="password">Mật khẩu:</label>
<input type="password" id="password" name="password" required>
<br>
<button type="submit">Gửi</button>
</form>
Đặc điểm của phương thức POST
- Dữ liệu form không hiện hữu trong URL, khiển phương thức phù hợp để truyền thông tin nhạy cảm
- Không có giới hạn kích thước dữ liệu do dữ liệu được truyền trong phần thân của yêu cầu
- Dữ liệu không được cache và không được lưu trong bookmark của trình duyệt
1.3 Các thuộc tính bổ sung
Thuộc tính enctype
Thuộc tính enctype được dùng để chỉ định cách mã hóa dữ liệu form khi gửi với phương thức POST. Giá trị
thường dùng nhất là multipart/form-data, cần thiết khi tải lên file.
Ví dụ sử dụng thuộc tính enctype:
<form action="/upload" method="post" enctype="multipart/form-data">
<label for="file">Tải lên file:</label>
<input type="file" id="file" name="file">
<button type="submit">Gửi</button>
</form>
Thuộc tính target
Thuộc tính target chỉ định nơi kết quả phản hồi từ server sẽ được hiển thị sau khi gửi form. Các giá trị có thể có:
_self(mặc định): trong cùng một cửa sổ hoặc tab_blank: trong một cửa sổ hoặc tab mới_parent: trong khung cha_top: trong khung trên cùng (nếu sử dụng khung)
Ví dụ sử dụng thuộc tính target:
<form action="/submit" method="post" target="_blank">
<!-- các phần tử form -->
</form>
Thuộc tính novalidate
Thuộc tính novalidate tắt tính năng kiểm tra form tích hợp trong trình duyệt.
Ví dụ sử dụng thuộc tính novalidate:
<form action="/submit" method="post" novalidate>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<button type="submit">Gửi</button>
</form>
1.4 Cách thức gửi dữ liệu
Gửi dữ liệu form được thực hiện thông qua nút gửi: <input type="submit"> hoặc <button type="submit">.
Khi người dùng nhấn vào nút này, trình duyệt gửi dữ liệu form đến server, sử dụng phương thức và URL chỉ định.
Đây là những cách chính để gửi dữ liệu form:
1. Nút gửi: đây là cách phổ biến nhất để gửi dữ liệu form. Nút gửi có thể được tạo
bằng phần tử <input> hoặc <button>.
Ví dụ với <input>:
<input type="submit" value="Gửi">
Ví dụ với <button>:
<button type="submit">Gửi</button>
2. Phím Enter: trong các text field của form, nhấn phím Enter cũng có thể kích hoạt gửi form.
3. JavaScript: form có thể được gửi theo lập trình bằng JavaScript. Điều này hữu ích khi cần thực hiện kiểm tra bổ sung hoặc các hành động khác trước khi gửi dữ liệu.
Ví dụ sử dụng JavaScript để gửi form:
<form id="myForm" action="/submit" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<br>
<button id="submit" type="submit">Gửi</button>
</form>
<script>
const userName = document.getElementById("username");
const password = document.getElementById("password");
const submit = document.getElementById("submit");
submit.addEventListener("click", (e) => {
if (userName.validity.valid && password.validity.valid) {
e.preventDefault();
alert("Đăng nhập thành công!\n" + "\n" + `Chào mừng, ${userName.value}!`);
}
});
</script>
<form id="myForm" action="/submit" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<br>
<button type="button" onclick="submitForm()">Gửi</button>
</form>
function submitForm() {
document.getElementById('myForm').submit();
}
GO TO FULL VERSION