Ví dụ đơn giản về form submit trong PHP

Kelvin Khanh
Ví dụ đơn giản về form submit trong PHP

Ví dụ 1:#

Dưới đây là một ví dụ đơn giản về cách tạo và xử lý biểu mẫu (form) với PHP:

1. Mã HTML và PHP cho Biểu Mẫu#

<?php
// Xử lý khi biểu mẫu được gửi
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $name = htmlspecialchars($_POST['name']); // Lấy giá trị từ input name và lọc để tránh XSS
    $email = htmlspecialchars($_POST['email']); // Lấy giá trị từ input email

    echo "<p><strong>Form Submitted!</strong></p>";
    echo "<p>Name: $name</p>";
    echo "<p>Email: $email</p>";
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple PHP Form</title>
</head>
<body>
    <!-- Biểu mẫu gửi POST dữ liệu đến chính trang này -->
    <form method="post" action="">
        <p>
            <label for="name">Name:</label>
            <input type="text" name="name" id="name" required>
        </p>
        <p>
            <label for="email">Email:</label>
            <input type="email" name="email" id="email" required>
        </p>
        <button type="submit">Submit</button>
    </form>
</body>
</html>

2. Giải Thích#

  1. Kiểm tra phương thức gửi:
    • if ($_SERVER['REQUEST_METHOD'] == 'POST'): Kiểm tra nếu biểu mẫu được gửi bằng phương thức POST.
  2. Thu thập dữ liệu từ biểu mẫu:
    • $_POST['name'] và $_POST['email'] để lấy dữ liệu từ các trường biểu mẫu.
    • Sử dụng htmlspecialchars() để lọc dữ liệu đầu vào, tránh mã độc XSS.
  3. Hiển thị dữ liệu sau khi xử lý:
    • Sử dụng echo để in dữ liệu được gửi từ biểu mẫu.
  4. HTML Biểu mẫu:
    • Thuộc tính method="post" để gửi dữ liệu bằng phương thức POST.
    • action="" để gửi biểu mẫu đến chính trang hiện tại.

3. Giao Diện Mẫu Kết Quả#

Khi biểu mẫu được gửi, trang sẽ hiển thị:
  • Thông báo đã gửi thành công.
  • Tên và email người dùng nhập.
Ví dụ: 
Form Submitted!
Name: John Doe
Email: john.doe@example.com

4. Tính Năng Mở Rộng#

  • Kiểm tra dữ liệu: Sử dụng filter_var để kiểm tra email.
  • CSS: Thêm kiểu dáng để biểu mẫu đẹp hơn.
  • Lưu dữ liệu: Lưu vào cơ sở dữ liệu nếu cần thiết.

Ví dụ 2:#

Dưới đây là một ví dụ biểu mẫu HTML khác với một menu thả xuống (select). Khi giá trị được thay đổi, nó sẽ tự động gửi biểu mẫu bằng JavaScript:

Mã HTML và PHP#

<?php
// Xử lý biểu mẫu khi được gửi
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $selectedOption = $_POST['options'] ?? '';
    echo "<p><strong>Form Submitted!</strong></p>";
    echo "<p>You selected: $selectedOption</p>";
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Auto Submit Form on Change</title>
</head>
<body>
    <form method="post" action="">
        <label for="options">Choose an option:</label>
        <select name="options" id="options" onchange="this.form.submit()">
            <option value="">-- Select --</option>
            <option value="Option 1" <?= (isset($selectedOption) && $selectedOption === 'Option 1') ? 'selected' : '' ?>>Option 1</option>
            <option value="Option 2" <?= (isset($selectedOption) && $selectedOption === 'Option 2') ? 'selected' : '' ?>>Option 2</option>
            <option value="Option 3" <?= (isset($selectedOption) && $selectedOption === 'Option 3') ? 'selected' : '' ?>>Option 3</option>
        </select>
    </form>
</body>
</html>

Giải Thích#

  1. Phần HTML:
    • Thẻ <select>:
      • onchange="this.form.submit()": Khi giá trị được thay đổi, biểu mẫu sẽ tự động được gửi.
    • Các tùy chọn <option>:
      • Gắn giá trị vào các tùy chọn.
      • Dùng PHP để giữ lại giá trị đã chọn khi trang tải lại (selected).
  2. Phần PHP:
    • Kiểm tra phương thức gửi là POST.
    • Lấy giá trị được chọn từ biểu mẫu bằng $_POST['options'].
    • Hiển thị giá trị đã chọn.

Kết Quả#

  1. Trang sẽ tải lại khi người dùng thay đổi tùy chọn.
  2. Kết quả hiển thị tùy chọn đã chọn ở phía dưới.

Cải Tiến#

  • Tránh gửi biểu mẫu nếu không chọn gì: Kiểm tra value của select trước khi gọi this.form.submit().
  • CSS: Thêm kiểu dáng cho biểu mẫu và select.
  • AJAX: Sử dụng JavaScript để gửi dữ liệu mà không cần tải lại trang.

Bài viết liên quan