JavaScript - Sự kiện Form: Hướng dẫn cho người mới bắt đầu

Xin chào các bạn đang học lập trình! Là một giáo viên khoa học máy tính với nhiều năm kinh nghiệm, tôi rất vui mừng được hướng dẫn các bạn vào thế giới thú vị của các sự kiện form trong JavaScript. Đừng lo lắng nếu bạn mới bắt đầu học lập trình - chúng ta sẽ bắt đầu từ cơ bản và dần dần nâng cao. Vậy, hãy lấy một cốc cà phê, ngồi thoải mái, và cùng nhau bắt đầu nhé!

什么是 Form Events?

Trước khi chúng ta đi vào chi tiết, hãy hiểu form events là gì. Trong phát triển web, các form giống như giấy tờ kỹ thuật số - chúng thu thập thông tin từ người dùng. Các sự kiện form là những xảy ra đặc biệt khi người dùng tương tác với các form này. Đó giống như khi bạn điền một mẫu đơn xin việc, và nhân viên tiếp tân nhận thấy mỗi lần bạn lifted hoặc đặt bút xuống - đó là những gì form events làm trong thế giới kỹ thuật số!

Các Sự kiện Form Thường Gặp

Hãy cùng nhìn vào một số sự kiện form phổ biến nhất mà bạn sẽ gặp:

Tên Sự Kiện	Mô Tả
submit	Được kích hoạt khi form được gửi
reset	Được kích hoạt khi form được đặt lại
focus	Được kích hoạt khi một phần tử nhận được focus
blur	Được kích hoạt khi một phần tử mất focus
change	Được kích hoạt khi giá trị của phần tử đầu vào thay đổi
input	Được kích hoạt khi giá trị của phần tử đầu vào thay đổi (mỗi lần gõ phím)

Bây giờ, hãy cùng khám phá từng sự kiện này với một số ví dụ thực tế!

Ví dụ về các Sự kiện Form trong Thực tế

1. Sự Kiện Submit

Sự kiện submit có lẽ là sự kiện form phổ biến nhất mà bạn sẽ sử dụng. Nó được kích hoạt khi người dùng cố gắng gửi form.

<form id="myForm">
<input type="text" id="name" placeholder="Nhập tên của bạn">
<button type="submit">Gửi</button>
</form>

<script>
document.getElementById("myForm").addEventListener("submit", function(event) {
event.preventDefault(); // Ngăn chặn form thực sự gửi đi
var name = document.getElementById("name").value;
alert("Xin chào, " + name + "! Mẫu của bạn đã được gửi.");
});
</script>

Trong ví dụ này, chúng ta đang lắng nghe sự kiện submit trên form của mình. Khi sự kiện xảy ra, chúng ta ngăn chặn hành vi mặc định (đó là gửi form thực sự), lấy giá trị từ input name, và hiển thị một thông báo chào mừng.

2. Sự Kiện Reset

Sự kiện reset xảy ra khi một form được đặt lại về giá trị mặc định. Đó giống như nhấn nút "undo" trên form của bạn!

<form id="myForm">
<input type="text" id="name" placeholder="Nhập tên của bạn">
<button type="reset">Đặt lại</button>
</form>

<script>
document.getElementById("myForm").addEventListener("reset", function(event) {
alert("Form đã được đặt lại!");
});
</script>

Ở đây, mỗi khi nút đặt lại được nhấn, một thông báo sẽ xuất hiện để cho bạn biết form đã được đặt lại.

3. Sự Kiện Focus và Blur

Sự kiện focus và blur giống như ánh sáng Spotlight của thế giới form. Focus xảy ra khi một phần tử nhận được ánh sáng, và blur là khi nó mất đi.

<input type="text" id="myInput" placeholder="Nhấp vào tôi!">

<script>
var input = document.getElementById("myInput");

input.addEventListener("focus", function() {
this.style.backgroundColor = "yellow";
});

input.addEventListener("blur", function() {
this.style.backgroundColor = "";
});
</script>

Trong ví dụ này, khi bạn nhấp vào (focus) vào input, nó sẽ chuyển thành vàng. Khi bạn nhấp ra (blur), nó sẽ trở lại bình thường. Đó giống như input là một người nhút nhát và blush khi bạn chú ý đến nó!

4. Sự Kiện Change

Sự kiện change được kích hoạt khi giá trị của phần tử đầu vào thay đổi và mất focus.

<select id="colorSelect">
<option value="">Chọn một màu</option>
<option value="red">Đỏ</option>
<option value="blue">Xanh</option>
<option value="green">Xanh lá</option>
</select>

<script>
document.getElementById("colorSelect").addEventListener("change", function() {
document.body.style.backgroundColor = this.value;
});
</script>

Ví dụ này thay đổi màu nền của trang dựa trên lựa chọn của bạn. Đó giống như có một cây c这支 wand ma thuật có thể sơn toàn bộ căn phòng!

5. Sự Kiện Input

Sự kiện input tương tự như sự kiện change, nhưng nó bắn ngay sau khi giá trị thay đổi.

<input type="text" id="textInput" placeholder="Gõ些什么...">
<p id="output"></p>

<script>
var input = document.getElementById("textInput");
var output = document.getElementById("output");

input.addEventListener("input", function() {
output.textContent = "Bạn đã gõ: " + this.value;
});
</script>

Ví dụ này hiển thị phản hồi theo từng thời điểm khi bạn gõ. Đó giống như có một echo thân thiện lặp lại những gì bạn nói, nhưng dưới dạng văn bản!

Kết Hợp Tất Cả

Bây giờ chúng ta đã thấy các sự kiện này trong hành động, hãy tạo một ví dụ phức tạp hơn sử dụng nhiều sự kiện:

<form id="registrationForm">
<input type="text" id="username" placeholder="Tên người dùng">
<input type="password" id="password" placeholder="Mật khẩu">
<input type="email" id="email" placeholder="Email">
<button type="submit">Đăng ký</button>
<button type="reset">Xóa</button>
</form>

<script>
var form = document.getElementById("registrationForm");
var username = document.getElementById("username");
var password = document.getElementById("password");
var email = document.getElementById("email");

// Sự kiện Submit
form.addEventListener("submit", function(event) {
event.preventDefault();
alert("Đăng ký đã được gửi cho " + username.value);
});

// Sự kiện Reset
form.addEventListener("reset", function() {
alert("Form đã được xóa!");
});

// Sự kiện Focus
[username, password, email].forEach(function(element) {
element.addEventListener("focus", function() {
this.style.backgroundColor = "#e6f3ff";
});
});

// Sự kiện Blur
[username, password, email].forEach(function(element) {
element.addEventListener("blur", function() {
this.style.backgroundColor = "";
});
});

// Sự kiện Input
email.addEventListener("input", function() {
if (this.value.includes("@")) {
this.style.borderColor = "green";
} else {
this.style.borderColor = "red";
}
});
</script>

Form đăng ký này展示了 tất cả các sự kiện chúng ta đã học:

• Sự kiện submit ngăn chặn form thực sự gửi đi và hiển thị một thông báo thay thế.
• Sự kiện reset thông báo khi form được xóa.
• Sự kiện focus và blur thay đổi màu nền của các input khi được chọn.
• Sự kiện input trên trường email thay đổi màu viền dựa trên việc liệu input có chứa "@" hay không.

Kết Luận

Xin chúc mừng! Bạn vừa mới bước những bước đầu tiên vào thế giới các sự kiện form trong JavaScript. Nhớ rằng, các sự kiện này giống như giác quan của trang web của bạn - chúng giúp mã của bạn "thấy" và "cảm nhận" những gì người dùng đang làm. Với sự luyện tập, bạn sẽ có thể tạo ra các form tương tác và phản hồi tốt hơn, giúp trang web của bạn sống động hơn.

Tiếp tục thử nghiệm, tiếp tục lập trình, và quan trọng nhất, hãy vui vẻ! Hành trình của ngàn dặm bắt đầu từ một bước, và bạn vừa mới bước một bước lớn. Chúc các bạn may mắn, các nhà phát triển tương lai!

Credits: Image by storyset