Tạo form nhiều bước (multi-step) trong PHP

BởiChu Minh Nam5 phút đọc361 lượt xem

Chia sẻ

Trong các ứng dụng web phức tạp, việc sử dụng một form duy nhất với quá nhiều trường nhập liệu có thể gây rối rắm, làm người dùng nản lòng và dễ bỏ qua. Để cải thiện trải nghiệm, giải pháp hiệu quả là chia form thành nhiều bước (multi-step form). Mỗi bước chỉ chứa một nhóm thông tin, giúp người dùng điền lần lượt theo tiến trình rõ ràng.

Nếu trước đây bạn đã áp dụng các kỹ thuật như giữ đăng nhập bằng Session trong PHP, tạo tính năng nhớ mật khẩu bằng Cookie hoặc hiển thị thông báo sau khi submit form, thì việc xây dựng multi-step form sẽ là một bước nâng cấp quan trọng. Nó kết hợp session để lưu dữ liệu giữa các bước và chỉ hoàn tất khi người dùng submit ở bước cuối cùng.

Cách hoạt động của multi-step form

Trước khi viết code, bạn cần hiểu rõ quy trình logic của multi-step form:

Người dùng điền thông tin bước 1 → dữ liệu lưu vào session → chuyển sang bước 2.
Tiếp tục điền thông tin bước 2 → session tiếp tục lưu → chuyển sang bước 3.
Khi hoàn thành tất cả các bước, session chứa toàn bộ dữ liệu → xử lý và lưu vào database.

Nhờ sử dụng session, người dùng có thể điền lần lượt từng phần mà không mất dữ liệu khi chuyển trang.

Form nhập thông tin cơ bản

Trước khi viết code, bạn cần xác định form nhiều bước sẽ gồm những trường nào. Ví dụ:

Bước 1: Thông tin cá nhân (tên, email).
Bước 2: Địa chỉ (tỉnh, thành phố, số nhà).
Bước 3: Xác nhận thông tin và submit.

Bắt đầu với bước đầu tiên:

<!-- step1.php -->
<form action="step2.php" method="post">
  <label for="name">Họ và tên:</label>
  <input type="text" name="name" required><br>

  <label for="email">Email:</label>
  <input type="email" name="email" required><br>

  <button type="submit">Tiếp tục</button>
</form>

Lưu dữ liệu vào session và hiển thị form tiếp theo

Trước khi viết code, bạn cần hiểu rằng khi người dùng gửi form từ bước 1, dữ liệu sẽ được lưu vào session. Điều này đảm bảo rằng dữ liệu không bị mất khi người dùng tiếp tục đến bước 2. Session chính là chìa khóa để kết nối dữ liệu của nhiều bước thành một tiến trình thống nhất.

Ở bước 2, bạn hiển thị form nhập địa chỉ:

<?php
// step2.php
session_start();

// Lưu dữ liệu bước 1
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $_SESSION['name'] = $_POST['name'];
    $_SESSION['email'] = $_POST['email'];
}
?>
<form action="step3.php" method="post">
  <label for="address">Địa chỉ:</label>
  <input type="text" name="address" required><br>

  <label for="city">Thành phố:</label>
  <input type="text" name="city" required><br>

  <button type="submit">Tiếp tục</button>
</form>

Xác nhận dữ liệu và submit cuối cùng

Trước khi viết code, bạn cần nhớ rằng bước xác nhận chính là nơi hiển thị lại toàn bộ dữ liệu từ session, cho phép người dùng kiểm tra trước khi gửi. Đây là bước quan trọng để giảm sai sót và tăng tính minh bạch cho quá trình nhập dữ liệu.

Ví dụ:

<?php
// step3.php
session_start();

// Lưu dữ liệu bước 2
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $_SESSION['address'] = $_POST['address'];
    $_SESSION['city'] = $_POST['city'];
}
?>
<h2>Xác nhận thông tin</h2>
<p>Họ và tên: <?php echo $_SESSION['name']; ?></p>
<p>Email: <?php echo $_SESSION['email']; ?></p>
<p>Địa chỉ: <?php echo $_SESSION['address']; ?>, <?php echo $_SESSION['city']; ?></p>

<form action="process.php" method="post">
  <button type="submit">Hoàn tất</button>
</form>

Xử lý dữ liệu ở bước cuối

Trước khi viết code, bạn cần biết rằng ở file xử lý cuối cùng (process.php), bạn sẽ lấy toàn bộ dữ liệu từ session và lưu vào database. Sau đó, session nên được xóa để tránh giữ dữ liệu không cần thiết.

<?php
// process.php
session_start();

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $name = $_SESSION['name'];
    $email = $_SESSION['email'];
    $address = $_SESSION['address'];
    $city = $_SESSION['city'];

    // Ví dụ: lưu vào DB bằng PDO
    require 'db.php';
    $stmt = $pdo->prepare("INSERT INTO users (name, email, address, city) VALUES (?, ?, ?, ?)");
    $stmt->execute([$name, $email, $address, $city]);

    // Xóa session
    session_destroy();

    echo "Đăng ký thành công!";
}

Cải tiến multi-step form

Trước khi viết code, bạn nên cân nhắc thêm một số cải tiến để form nhiều bước chuyên nghiệp hơn:

Thanh tiến trình (progress bar): Hiển thị % hoàn thành (ví dụ: “Bước 2/3”).
Nút quay lại: Cho phép người dùng trở về bước trước và chỉnh sửa thông tin.
Lưu tạm vào database: Với form dài, bạn có thể lưu dữ liệu từng bước vào bảng tạm để không bị mất khi trình duyệt tắt.
AJAX: Dùng AJAX để load bước tiếp theo mà không cần reload trang.

Ví dụ thêm progress bar trong step2.php:

<div style="width:100%; background:#eee;">
  <div style="width:66%; background:#4caf50; color:#fff; text-align:center;">
    Bước 2/3
  </div>
</div>

Kết luận

Form nhiều bước (multi-step form) trong PHP giúp cải thiện trải nghiệm người dùng, đặc biệt trong những trường hợp cần nhập lượng thông tin lớn. Với cách sử dụng session để lưu dữ liệu, bạn có thể chia form thành nhiều giai đoạn, đảm bảo dữ liệu không bị mất khi chuyển trang.

Tuy nhiên, để form đa bước trở nên chuyên nghiệp hơn, bạn nên kết hợp thêm các yếu tố như thanh tiến trình, nút quay lại, và xử lý AJAX. Khi tích hợp cùng với các kỹ thuật đã học trước đó như session, cookie và bảo mật với prepared statements, hệ thống form của bạn sẽ vừa tiện lợi vừa an toàn cho mọi ứng dụng web thực tế.