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

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

تارخ آخر تحديث: 18 سبتمبر 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 لتحسين تجربة المستخدم من خلال التحقق من صحة البيانات على جانب العميل قبل إرسالها إلى الخادم.

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

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

كيفية إنشاء رسومات بيانية باستخدام HTML و JavaScript
ما هي الفرق بين HTML و PHP
إدارة الأذونات والصلاحيات للملفات في PHP
إنشاء API بسيط في PHP
كيفية تحويل البيانات من HTML إلى قاعدة بيانات MySQL باستخدام PHP

البرمجة

كيفية التعامل مع استثناءات الأخطاء في Python
التعرف على الوراثة في PHP وكيفية استخدامها
مقدمة إلى استخدام Composer في PHP
كيفية إرسال رسائل بريد إلكتروني باستخدام Python
كيفية إنشاء رسومات بيانية باستخدام HTML و JavaScript
التعامل مع المواعيد الزمنية باستخدام دالة datetime.datetime() في Python
كيفية التعامل مع الصور في PHP