كيفية استخدام الـ HTML Forms لإرسال البيانات إلى PHP

تمت الكتابة بواسطة: عبد الحكيم

تارخ آخر تحديث: 18 سبتمبر 2024

محتوى المقال

كيفية استخدام الـ HTML Forms لإرسال البيانات إلى PHP

في تطوير الويب، تُستخدم النماذج (Forms) لجمع البيانات من المستخدمين وإرسالها إلى خادم الويب لمعالجتها باستخدام لغات البرمجة مثل PHP. تعتبر HTML Forms أداة قوية وبسيطة لجمع بيانات المستخدم ومعالجتها في الخلفية باستخدام PHP. في هذا المقال، سنتعلم كيفية استخدام HTML Forms لإرسال البيانات إلى PHP، سواء عبر طريقة POST أو GET، وكيفية معالجتها.

مقدمة إلى HTML Forms

النماذج في HTML هي طريقة لجمع المدخلات من المستخدمين. تتكون النماذج من عناصر إدخال مثل الحقول النصية، أزرار الاختيار، القوائم المنسدلة، وغيرها. بعد أن يقوم المستخدم بإدخال البيانات في النموذج، يتم إرسال هذه البيانات إلى خادم الويب باستخدام طلب POST أو GET ليتم معالجتها بواسطة PHP أو أي لغة برمجة أخرى.

مثال بسيط لنموذج HTML

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <title>نموذج إرسال البيانات</title>
</head>
<body>

    <form action="process.php" method="post">
        <label for="name">الاسم:</label>
        <input type="text" id="name" name="name"><br>

        <label for="email">البريد الإلكتروني:</label>
        <input type="email" id="email" name="email"><br>

        <input type="submit" value="إرسال">
    </form>

</body>
</html>

في المثال أعلاه، تم إنشاء نموذج HTML بسيط يحتوي على حقلين: حقل النص لجمع الاسم، وحقل البريد الإلكتروني لجمع عنوان البريد الإلكتروني. بعد أن يقوم المستخدم بإدخال البيانات، يتم إرسالها إلى ملف PHP لمعالجتها.

إرسال البيانات إلى PHP باستخدام HTML Forms

عند إرسال البيانات من نموذج HTML إلى PHP، هناك طريقتان رئيسيتان لإرسال البيانات: GET وPOST. كلتا الطريقتين تُستخدم لإرسال البيانات إلى خادم الويب، لكنهما تختلفان في كيفية إرسال البيانات.

استخدام طريقة GET

عندما تُرسل البيانات باستخدام GET، يتم تضمين البيانات في عنوان URL. هذا يعني أن القيم المدخلة في النموذج ستكون ظاهرة في شريط العنوان بالمتصفح. إليك كيفية تعديل النموذج لاستخدام GET:

<form action="process.php" method="get">
    <label for="name">الاسم:</label>
    <input type="text" id="name" name="name"><br>

    <input type="submit" value="إرسال">
</form>

عند استخدام GET، سيتم إرسال البيانات إلى عنوان URL كجزء من الاستعلام. على سبيل المثال، إذا كان المستخدم قد أدخل الاسم "أحمد"، فسيكون الرابط كالتالي: process.php?name=أحمد.

استخدام طريقة POST

طريقة POST هي الأكثر شيوعًا عندما يتعلق الأمر بإرسال البيانات الحساسة أو الكبيرة. باستخدام POST، يتم إرسال البيانات في جسم الطلب (request body)، ولا تظهر في شريط العنوان. هذا يجعلها أكثر أمانًا. المثال التالي يوضح كيفية استخدام POST:

<form action="process.php" method="post">
    <label for="name">الاسم:</label>
    <input type="text" id="name" name="name"><br>

    <input type="submit" value="إرسال">
</form>

باستخدام POST، لا تظهر البيانات المُرسلة في عنوان URL، مما يجعلها أكثر أمانًا. البيانات تُرسل إلى الخادم لمعالجتها في الخلفية.

استقبال البيانات في PHP

عند استقبال البيانات في PHP، يتم استخدام المتغيرات الفائقة $_GET و$_POST بناءً على الطريقة المستخدمة لإرسال البيانات. إذا تم استخدام GET، فإن البيانات تُرسل عبر $_GET. وإذا تم استخدام POST، فإن البيانات تُرسل عبر $_POST.

مثال على استقبال البيانات باستخدام POST

إليك مثال على كيفية استقبال البيانات المرسلة باستخدام POST في ملف PHP:

<?php
    $name = $_POST['name'];
    $email = $_POST['email'];

    echo 'الاسم: ' . $name . '<br>';
    echo 'البريد الإلكتروني: ' . $email . '<br>';
?>

في هذا المثال، البيانات التي أدخلها المستخدم (الاسم والبريد الإلكتروني) يتم استقبالها باستخدام $_POST ثم طباعتها على الصفحة.

مثال على استقبال البيانات باستخدام GET

إذا كنت تستخدم GET لإرسال البيانات، يمكنك استقبالها على النحو التالي:

<?php
    $name = $_GET['name'];

    echo 'الاسم: ' . $name . '<br>';
?>

في هذا المثال، يتم استخدام المتغير الفائق $_GET لاستقبال البيانات المُرسلة عبر عنوان URL.

أهمية التحقق من صحة البيانات

عند التعامل مع بيانات المستخدم، من الضروري التحقق من صحة البيانات للتأكد من أنها آمنة وصحيحة قبل معالجتها. في PHP، يمكنك استخدام دوال مثل htmlspecialchars لحماية البيانات من هجمات XSS أو استخدام filter_var للتحقق من صحة البيانات، مثل التحقق من صحة عنوان البريد الإلكتروني.

استخدام htmlspecialchars لحماية البيانات

استخدام htmlspecialchars يمكن أن يساعد في تحويل الأحرف الخاصة (مثل < و>) إلى رموز HTML آمنة:

$name = htmlspecialchars($_POST['name']);

هذا يمنع المستخدمين من إدخال أكواد ضارة ضمن بيانات النموذج.

التحقق من صحة البريد الإلكتروني

للتحقق من صحة البريد الإلكتروني، يمكنك استخدام filter_var كما في المثال التالي:

$email = $_POST['email'];
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
    echo 'البريد الإلكتروني غير صحيح';
}

إضافة التحقق من صحة البيانات باستخدام JavaScript

على الرغم من أن التحقق من صحة البيانات في الخادم أمر أساسي، يمكنك أيضًا إضافة التحقق من البيانات على جانب العميل باستخدام JavaScript لتحسين تجربة المستخدم. على سبيل المثال، يمكنك التحقق من أن حقل الاسم ليس فارغًا:

<script>
    function validateForm() {
        let name = document.forms['myForm']['name'].value;
        if (name == "") {
            alert('الاسم مطلوب');
            return false;
        }
    }
</script>

الخلاصة

باستخدام HTML Forms و PHP، يمكنك بسهولة جمع بيانات المستخدم ومعالجتها بطريقة تفاعلية وديناميكية. سواء كنت تستخدم GET أو POST، فإن الطريقة التي تختارها تعتمد على نوع البيانات ومدى حساسية تلك البيانات. التحقق من صحة البيانات سواء على جانب العميل باستخدام JavaScript أو على جانب الخادم باستخدام PHP هو خطوة أساسية لضمان أمان وسلامة البيانات المُرسلة. باستخدام الأدوات والمفاهيم التي تناولناها في هذا المقال، يمكنك الآن بناء نماذج تفاعلية في تطبيقاتك وتعلم كيفية معالجة البيانات بشكل آمن.

طور مهاراتك: مقالات يجب قراءتها في البرمجة

مقالات ذات صلة

دليل المبتدئين لتعلم HTML
مقدمة إلى البرمجة الكائنية التوجه في PHP
كيفية بناء موقع متعدد اللغات باستخدام PHP و HTML
كيفية التعامل مع الجداول في قواعد البيانات باستخدام PHP
الفروقات بين المتغيرات المحلية والعالمية في PHP

البرمجة

التعامل مع بيانات JSON في PHP
كيفية استخدام عبارات IF و ELSE في PHP
شرح تركيب أكواد PHP داخل HTML
كيفية التعامل مع ملفات XML باستخدام PHP
كيفية استخدام دالة getattr() للوصول إلى خصائص الكائنات في Python
كيفية تثبيت واستخدام حزم PHP باستخدام Composer
كيفية إنشاء قائمة منسدلة متعددة المستويات (Multi-Level Dropdown) باستخدام HTML و CSS