🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

[PHP สำหรับผู้เริ่มต้น] หัวใจของเว็บไซต์! วิธีรับข้อมูลจากฟอร์ม

"แบบฟอร์มติดต่อ" เป็นสิ่งที่ขาดไม่ได้สำหรับเว็บไซต์ มันคือหน้าต่างสำคัญที่เชื่อมต่อผู้ดูแลเว็บไซต์กับผู้เยี่ยมชม เพื่อรับคำถามและข้อเสนอแนะ เปรียบเสมือนหัวใจของเว็บไซต์เลยทีเดียว แต่หลายคนอาจจะรู้สึกว่า "อยากสร้างฟอร์มนะ แต่จะรับข้อมูลที่กรอกเข้ามายังไง?" ซึ่งอาจจะดูเป็นเรื่องยาก

บทความนี้จะอธิบายขั้นตอน "การรับข้อมูลจากฟอร์ม HTML ด้วย PHP และแสดงผลในหน้ายืนยัน" ซึ่งเป็นหัวใจสำคัญของกระบวนการนี้อย่างละเอียดและเข้าใจง่ายสำหรับผู้เริ่มต้น โดยครั้งนี้ เราจะใช้ฟอร์มอีเมลอย่างง่ายที่มี 3 ช่องคือ `name`, `email`, `message` เป็นตัวอย่าง เพื่อเรียนรู้วิธีสร้างทั้งฟอร์มสำหรับกรอกข้อมูลและหน้าจอยืนยันได้ในไฟล์เดียว เราได้เตรียมโค้ดที่สามารถคัดลอกไปใช้ได้ทันที ขอให้สนุกกับการทำให้ "โค้ดใช้งานได้จริง" นะครับ!

สำหรับการเตรียมตัวเพื่อรัน PHP (สภาพแวดล้อมการพัฒนา) หากคุณยังไม่ได้ติดตั้ง XAMPP โปรดอ้างอิงจาก [PHP สำหรับผู้เริ่มต้น] คู่มือฉบับสมบูรณ์เกี่ยวกับการดาวน์โหลดและติดตั้ง XAMPP! หลังจากติดตั้งแล้ว เพียงแค่วางไฟล์ PHP ของคุณในโฟลเดอร์ที่กำหนด (เช่น `htdocs`) ก็พร้อมใช้งานแล้วครับ!

1. กลไกของเว็บฟอร์ม: การทำงานร่วมกันระหว่าง HTML และ PHP

เว็บฟอร์มประกอบด้วยสองส่วนหลักๆ คือ:

  1. HTML: ส่วนของ "หน้าตา" ที่ให้ผู้ใช้กรอกข้อมูล
  2. PHP: ส่วน "เบื้องหลัง" ที่รับและประมวลผลข้อมูลที่ส่งมา

ก่อนอื่น มาดูแท็ก <form> ของ HTML กันก่อนครับ นี่คือตัวหลักของฟอร์ม

<!-- ระบุปลายทางที่จะส่งข้อมูล (action) และวิธีการส่ง (method) -->
<form action="receive.php" method="POST">
    <!-- แต่ละช่องกรอกข้อมูลต้องมี "ชื่อ (name)" เพื่อให้ PHP ใช้รับข้อมูล -->
    <p>ชื่อ: <input type="text" name="user_name"></p>
    <p>อีเมล: <input type="email" name="user_email"></p>
    <p><button type="submit">ส่ง</button></p>
</form>

สิ่งที่สำคัญคือ `method="POST"` และ `name` attribute ของแต่ละช่องกรอกข้อมูล `POST` เป็นวิธีการส่งข้อมูลอย่างปลอดภัยโดยไม่แสดงข้อมูลบน URL และนิยมใช้กับฟอร์มทั่วไป ส่วนชื่อที่กำหนดให้กับ `name` attribute จะกลายเป็น "กุญแจ" สำหรับฝั่ง PHP ในการรับข้อมูล

ฝั่ง PHP จะใช้ตัวแปรพิเศษที่ชื่อว่า `$_POST` (ตัวแปรซูเปอร์โกลบอล) ในการรับข้อมูล โดยการระบุ `name` attribute ของ HTML เป็นกุญแจ เช่น `$_POST['user_name']` ก็จะสามารถดึงค่าที่ผู้ใช้กรอกเข้ามาได้

<?php
// แสดงข้อมูลที่ส่งมาจากช่องกรอกที่ชื่อ "user_name"
echo $_POST['user_name'];

// แสดงข้อมูลที่ส่งมาจากช่องกรอกที่ชื่อ "user_email"
echo $_POST['user_email'];

// ตรวจสอบข้อมูลทั้งหมดที่ส่งมาด้วย POST (สำหรับดีบัก)
print_r($_POST);
?>

การทำงานร่วมกันระหว่าง HTML และ PHP แบบนี้คือกลไกพื้นฐานของเว็บฟอร์มครับ

2. ภาคปฏิบัติ! สร้างฟอร์มกรอกข้อมูลและหน้าจอยืนยันในไฟล์เดียว

ต่อไป เรามาลองสร้างฟังก์ชันสำหรับฟอร์มกรอกข้อมูลและหน้าจอยืนยันในไฟล์ PHP ไฟล์เดียวกันดูครับ ข้อดีของวิธีนี้คือการจัดการไฟล์จะง่ายขึ้น โค้ดด้านล่างนี้เป็นตัวอย่างที่สมบูรณ์ซึ่งคุณสามารถคัดลอกและวางเพื่อตรวจสอบการทำงานบนเบราว์เซอร์ได้ทันที

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <title>แบบฟอร์มติดต่อ</title>
    <style>
        body { font-family: sans-serif; line-height: 1.7; padding: 20px; max-width: 600px; margin: auto; }
        .form-group { margin-bottom: 15px; }
        label { display: block; margin-bottom: 5px; font-weight: bold; }
        input[type="text"], input[type="email"], textarea {
            width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box;
        }
        textarea { height: 120px; }
        .confirmation-table { width: 100%; border-collapse: collapse; }
        .confirmation-table th, .confirmation-table td { border: 1px solid #ddd; padding: 12px; text-align: left; }
        .confirmation-table th { background-color: #f2f2f2; width: 30%; }
        button { padding: 10px 20px; border: none; background-color: #007bff; color: white; border-radius: 4px; cursor: pointer; }
        button:hover { background-color: #0056b3; }
    </style>
</head>
<body>

    <?php
    // แยกการประมวลผลตามว่ามีการร้องขอแบบ POST หรือไม่
    if ($_SERVER['REQUEST_METHOD'] === 'POST') {
        // --- แสดงหน้าจอยืนยัน ---
        $name = htmlspecialchars($_POST['name'], ENT_QUOTES, 'UTF-8');
        $email = htmlspecialchars($_POST['email'], ENT_QUOTES, 'UTF-8');
        $message = htmlspecialchars($_POST['message'], ENT_QUOTES, 'UTF-8');
    ?>
        <h1>ยืนยันข้อมูลที่กรอก</h1>
        <p>หากข้อมูลต่อไปนี้ถูกต้อง กรุณากดปุ่มส่ง</p>
        <table class="confirmation-table">
            <tr>
                <th>ชื่อ</th>
                <td><?php echo $name; ?></td>
            </tr>
            <tr>
                <th>อีเมล</th>
                <td><?php echo $email; ?></td>
            </tr>
            <tr>
                <th>เนื้อหาที่ต้องการติดต่อ</th>
                <td><?php echo nl2br($message); ?></td>
            </tr>
        </table>
        <p>*ในตัวอย่างนี้จะยังไม่มีการส่งอีเมลจริง*</p>

    <?php } else { ?>
        // --- แสดงฟอร์มสำหรับกรอกข้อมูล ---
        <h1>ติดต่อเรา</h1>
        <form action="" method="POST">
            <div class="form-group">
                <label for="name">ชื่อ</label>
                <input type="text" id="name" name="name" required>
            </div>
            <div class="form-group">
                <label for="email">อีเมล</label>
                <input type="email" id="email" name="email" required>
            </div>
            <div class="form-group">
                <label for="message">เนื้อหาที่ต้องการติดต่อ</label>
                <textarea id="message" name="message" required></textarea>
            </div>
            <button type="submit">ยืนยันข้อมูล</button>
        </form>
    <?php } ?>

</body>
</html>

จุดสำคัญที่สุดของโค้ดนี้คือเงื่อนไข `if ($_SERVER['REQUEST_METHOD'] === 'POST')` ครับ `$_SERVER['REQUEST_METHOD']` จะเก็บวิธีการเข้าถึงหน้าเว็บ (GET หรือ POST)

นอกจากนี้ การปล่อย `action` attribute ของฟอร์มให้ว่าง `action=""` จะทำให้ข้อมูลถูกส่งมายังไฟล์ตัวเอง ซึ่งช่วยให้เราสามารถสร้างสองหน้าจอในไฟล์เดียวได้ครับ

3. ข้อควรระวัง (การตรวจสอบความถูกต้องของข้อมูล)

ในเว็บไซต์จริง มีความเป็นไปได้ที่ผู้ใช้จะไม่กรอกข้อมูลอะไรเลย หรือส่งข้อมูลที่ไม่ถูกต้องเข้ามา ดังนั้น การตรวจสอบข้อมูลที่ได้รับว่าถูกต้องตามที่คาดหวังหรือไม่ หรือที่เรียกว่า **Validation** จึงเป็นสิ่งที่ขาดไม่ได้

ในที่นี้ เราจะเพิ่มการตรวจสอบง่ายๆ เพื่อเช็คว่าแต่ละช่องกรอกข้อมูลไม่ได้ว่างเปล่า

<?php
// การประมวลผลฝั่งหน้าจอยืนยัน (ภายใน if)
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $name = $_POST['name'];
    $email = $_POST['email'];
    $message = $_POST['message'];
    $errors = []; // อาร์เรย์สำหรับเก็บข้อความผิดพลาด

    // การตรวจสอบชื่อ
    if (empty($name)) {
        $errors[] = 'กรุณากรอกชื่อ';
    }

    // การตรวจสอบอีเมล
    if (empty($email)) {
        $errors[] = 'กรุณากรอกอีเมล';
    } elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $errors[] = 'รูปแบบอีเมลไม่ถูกต้อง';
    }

    // การตรวจสอบเนื้อหาที่ติดต่อ
    if (empty($message)) {
        $errors[] = 'กรุณากรอกเนื้อหาที่ต้องการติดต่อ';
    }

    // แยกการประมวลผลตามว่ามีข้อผิดพลาดหรือไม่
    if (!empty($errors)) {
        // กรณีมีข้อผิดพลาด: แสดงข้อความผิดพลาด
        echo '<h1>ข้อมูลที่กรอกไม่ถูกต้อง</h1>';
        echo '<ul style="color: red;">';
        foreach ($errors as $error) {
            echo '<li>' . htmlspecialchars($error) . '</li>';
        }
        echo '</ul>';
        echo '<a href="javascript:history.back();">กลับไปที่หน้ากรอกข้อมูล</a>';
    } else {
        // กรณีไม่มีข้อผิดพลาด: แสดงหน้าจอยืนยัน
        // ... (โค้ดแสดงหน้าจอยืนยันจากตัวอย่างก่อนหน้า) ...
    }
}
?>

ในตัวอย่างนี้ เราใช้ `empty()` เพื่อตรวจสอบว่าแต่ละช่องกรอกไม่ว่าง และใช้ฟังก์ชันที่มีประโยชน์อย่าง `filter_var()` เพื่อตรวจสอบว่ารูปแบบของอีเมลถูกต้องหรือไม่ ทำให้ขั้นตอนการทำงานเป็นจริงมากขึ้น คือถ้ามีข้อผิดพลาดก็จะแสดงข้อความแจ้งเตือน แต่ถ้าไม่มีก็จะไปยังหน้าจอยืนยันครับ

4. สรุปและขั้นตอนต่อไป

ครั้งนี้เราได้เรียนรู้กลไกพื้นฐานของเว็บฟอร์มและขั้นตอนทั้งหมดตั้งแต่การรับข้อมูลด้วย PHP ไปจนถึงการแสดงหน้าจอยืนยัน ตัวแปร `$_POST` และการแยกการประมวลผลด้วย `if` คือหัวใจหลักของการสร้างฟอร์มครับ แม้ว่าฟังก์ชันการส่งอีเมลจะซับซ้อนกว่าเล็กน้อยเพราะเกี่ยวข้องกับการตั้งค่าเซิร์ฟเวอร์ แต่ถ้าคุณเข้าใจขั้นตอนตั้งแต่การกรอกข้อมูลไปจนถึงการยืนยันแล้ว ก็จะสามารถนำไปประยุกต์ใช้กับฟอร์มแบบใดก็ได้

สำหรับขั้นตอนต่อไป ได้แก่:

เรื่องเหล่านี้เราจะมาอธิบายอย่างละเอียดในโอกาสต่อไปครับ สำหรับตอนนี้ ลองใช้โค้ดนี้เป็นพื้นฐานในการสร้างฟอร์มในแบบฉบับของคุณเองดูนะครับ!