إنشاء نماذج تفاعلية باستخدام PHP و HTML

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

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

محتوى المقال

إنشاء نماذج تفاعلية باستخدام PHP و HTML

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

مقدمة إلى نماذج HTML

النماذج في HTML تُستخدم لجمع البيانات من المستخدمين. تتكون النماذج عادة من عناصر إدخال مثل النصوص، الأزرار، القوائم المنسدلة، وأزرار الاختيار. عند إرسال النموذج، يتم إرسال البيانات إلى خادم الويب لمعالجتها باستخدام 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>

النموذج في المثال أعلاه يحتوي على حقلين لإدخال الاسم والبريد الإلكتروني، وزر إرسال. يتم إرسال البيانات إلى ملف PHP لمعالجتها عند النقر على زر "إرسال".

طرق إرسال البيانات في HTML

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

  • GET: تُرسل البيانات عبر عنوان URL، وتُستخدم عند الرغبة في رؤية البيانات المُرسلة كجزء من الرابط. ولكن لها قيود من حيث حجم البيانات.
  • POST: تُرسل البيانات في جسم الطلب، وهي الطريقة الأكثر أمانًا وملائمة لإرسال البيانات الحساسة أو الكبيرة.

استخدام GET لإرسال البيانات

يمكنك استخدام طريقة GET لإرسال البيانات عبر عنوان URL كما يلي:

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

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

في هذا المثال، عند إرسال البيانات، ستظهر القيم المُرسلة في شريط العنوان. على سبيل المثال، إذا أدخل المستخدم الاسم "أحمد"، سيكون الرابط بعد الإرسال مشابهًا لهذا: process.php?name=أحمد.

استخدام POST لإرسال البيانات

إرسال البيانات باستخدام POST هو الأكثر شيوعًا. لنقم بإعادة استخدام نفس النموذج ولكن باستخدام POST بدلاً من GET.

<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

بعد إرسال النموذج باستخدام إما GET أو POST، يمكن استقبال البيانات في PHP باستخدام المتغيرات الفائقة $_GET أو $_POST. هنا مثال على كيفية استقبال البيانات ومعالجتها.

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

في ملف process.php، يمكننا استقبال البيانات المرسلة باستخدام POST كما يلي:

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

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

عند إرسال النموذج، سيتم طباعة القيم التي تم إدخالها في صفحة process.php.

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

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

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

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

ستظهر البيانات في شريط العنوان عند إرسال النموذج باستخدام GET.

إضافة التحقق من البيانات

عند استقبال بيانات المستخدم، من الضروري التأكد من أن البيانات المُدخلة صحيحة وآمنة. يمكن استخدام التحقق من البيانات لضمان عدم وجود بيانات ضارة أو غير صالحة.

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

لحماية البيانات المُدخلة من المستخدمين من هجمات XSS، يجب استخدام htmlspecialchars لتحويل الأحرف الخاصة إلى كود HTML آمن:

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

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

للتحقق من أن البريد الإلكتروني الذي أدخله المستخدم صالح، يمكنك استخدام filter_var مع FILTER_VALIDATE_EMAIL:

$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>

الخلاصة

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

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

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

كيفية التعامل مع تواريخ وأوقات باستخدام مكتبة datetime في Python
كيفية إنشاء صفحات متعددة اللغات باستخدام PHP
تحسين الأداء باستخدام الحلقات في PHP
ما هو DOM وكيف يمكن استخدامه مع HTML؟
تطبيقات عملية للبرمجة الشرطية في PHP

البرمجة

كيفية إرسال البيانات إلى صفحة أخرى باستخدام PHP
فهم دالة items() للوصول إلى أزواج المفتاح والقيمة في القواميس في Python
كيفية إرسال رسائل بريد إلكتروني باستخدام Python
كيفية تمرير المعاملات إلى الدوال في PHP
كيفية كتابة سكربت للتعامل مع API RESTful باستخدام مكتبة requests في Python
كيفية استخدام الوسوم الوصفية (Meta Tags) في HTML لتحسين SEO
تحويل الأرقام إلى نصوص سداسية عشرية باستخدام دالة hex() في Python