Nút gửi
Thuộc phần JavaScript trong thực tế trong hành trình HTML của Coddy. Bài học 7 trên 27.
Các nút gửi là thành phần thiết yếu trong biểu mẫu HTML, cho phép người dùng gửi dữ liệu biểu mẫu đến máy chủ để xử lý.
Tạo một biểu mẫu HTML cơ bản có nút gửi:
<form id="myForm">
<input type="text" placeholder="Enter your name">
<button type="submit">Submit</button>
</form>Thuộc tính type="submit" chỉ định rằng nút sẽ gửi biểu mẫu khi được nhấp.
Bạn cũng có thể dùng JavaScript để xử lý việc gửi biểu mẫu:
const form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
event.preventDefault(); // Ngăn biểu mẫu gửi đi theo cách mặc định
console.log('Form submitted!'); // In một thông báo ra bảng điều khiển
});Phương thức preventDefault() ngăn biểu mẫu gửi theo cách truyền thống, cho phép bạn xử lý việc gửi biểu mẫu bằng JavaScript.
Thử thách
DễNhiệm vụ của bạn:
- Thêm nút Nộp bài vào biểu mẫu với
type="submit" - Bên trong trình lắng nghe sự kiện submit, dùng biến
messageđể đặt nội dung văn bản thành "Submitted successfully"
Tự làm thử
<!DOCTYPE html>
<html>
<head>
<title>Submit buttons</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form id="myForm">
<h2>Sign Up</h2>
<input type="text" id="email" placeholder="Enter your email">
<p id="emailMessage" class="message"></p>
</form>
<script src="script.js"></script>
</body>
</html>
Tự kiểm traBài học này có một bài trắc nghiệm ngắn. Bắt đầu bài học để trả lời và theo dõi tiến độ.
Tất cả bài học trong JavaScript trong thực tế
Tự luyện tập: Playground Web