php نقل البيانات عبر الإستمارة

php أنواع الإستمارات

آخر تحيين: 09-01-2015

php المتغيرات الشاملة المحدّدة php معالجة و حماية البيانات


توجد أنواع عدة من إستمارات html، لتلبية حاجاتنا و تغطية جميع أنواع البيانات التي تريد إرسالها . طريقة إنشاءها تبقى كما هي ، و ذلك باستعمال وسم <form> . أما هذا التنوع فيشمل الحقول المستعملة . سنقوم بمراجعتها ، و نرى عبر أمثلة ، متى يمكن استعمال حقل بدل آخر ، و كيفية التعامل مع بياناتها .

أنواع حقول الإستمارة

type TEXT : منطقة إدخال النص

هذا النوع هو الأكثر ألفة و الأكثر استعمالا . نستعمل وسم <input> لإنشائه . ثم نعطي للصفة type قيمة نوع الحقل ، أي Text :

<form action="" method="post">
  <input type="text" name="pseudo"><br>
  <input type="submit" value="إرسال">
</form>

نستخدم هذا النوع عندما نريد إدخال كلمة أو عدة كلمات ،كإسم العضو مثلا أو عنوان مقال ... غالبا ما يجب ألا يتجاوز عدد الحروف 255 حرفا .

القيمة التلقائية value

يمكننا عرض قيمة تلقائية داخل منطقة إدخال النص ، وذلك باستعمال الصفة value . نحتاج لهذه القيمة في عدة حالات ، مثلا إذا كنتم تتوفرون على لوحة الإدارة في موقعكم حيث تتيح لكم تعديل عنوان المقالات مثلا ، نحتاج إلى عرض العنوان الحالي قبل السماح بتغييره . مثال :

<?php $title = 'اختناق كوكب الأرض' ?>
<form action="" method="post">
  <label> تعديل عنوان المقال  : </label>
  <input type="text" name="title" value="<?php echo htmlspecialchars($title) ?>">
  <input type="submit" value="إرسال">
</form>

عينة للإستمارة :

تحديد عرض الحقل

لتحديد عرض الحقل لدينا صفتان size و maxlenght :
size : تحديد عرض منطقة إدخال النص لأغراض تنظيمية
maxlenght : تحديد عرض النص . و هذا يساعد الزائر على عدم ارتكاب أخطاء أثناء ملأ الإستمارة . مثلا إذا حددتم مسبقا أن عدد حروف إسم المستخدم لا يجب أن يتجاوز 20 حرفا ، فمن المفيد للزائر الذي لم يقرأ التعليمات أن نردعه إذا حاول إدخال إسم أطول من ذلك :

<input type="text" name="pseudo" size="30" maxlength="20">
نستعمل size و maxlenght من باب مساعدة و تسهيل عملية ملأ الإستمارة على الزائر ، وهذه الشيفرات تُنفّذ على متصفحه . حيث يمكنه تغييرها إن كان متطفّلا . تذكّروا دائما ، لحماية بياناتكم و فرض الشروط التي تريدونها ، يجب فعل ذلك بلغة php و ليس html لقد رأينا مثالا سابقا يخص تحديد طول النص ، و ذلك عندما تحدّثنا عن الدالة ()strlen

type PASSWORD : حقل كلمة المرور

عند إدخال كلمة المرور ، يكون من الصعب كتابتها بالواضح و الناس يمرون خلفكم و بعضهم يسترق النظر ، لهذا تم توظيف هذا النوع من الحقول الخاص لإخفاءها . نستخدمه بنفس الطريقة الخاصة بالنوع TEXT لكن مع تغيير قيمة type إلى password

<input type="password" name="pass">

لا يجب بتاتا استعمال الطريقة GET في الإستمارة لإرسال هذا النوع من البيانات ، فكلمة المرور ستظهر واضحة في عنوان الويب . كذلك يجب عدم إعطاء قيمة تلقائية لهذا الحقل ، إذ يمكن للمتطفّل رؤيتها في منبع شيفرات html على المتصفح و ذلك بالنقر على زر " CTRL+U " في لوحة المفاتيح

TEXTAREA : حقل النصوص

غالبا ما نحتاج إلى حقل كبير لتحرير نصوص طويلة ، مثلا لكتابة مقال أو إضافة رد ... و نستعمل لذلك وسم <textarea> .

<form action="" method="post">
  <label> إضافة رد : </label><br>
  <textarea name="comment"></textarea>
</form>

تحديد عرض و طول حقل textarea

يمكنن تحديد طول و عرض الحقل باستعمال الصفتين cols و rows .

  • cols : لتحديد الطول
  • rows : لتحديد العرض
<textarea name="comment" cols="50" rows="12"></textarea>

textarea القيمة التلقائية

كما فعلنا في الحقل text يمكننا أيضا إضافة قيمة تلقائية للحقل و ذلك بوضعها بين و سم <textarea>

<textarea>القيمة التلقائية</textarea>
عندما تحررون نصا طويلا في حقل textarea في الكثير من الأحيان تريدون العودة إلى السطر و ذلك بالنقر على زر ok أو enter و هو بمثابة عمل <br> على لوحة مفاتيح حاسوبكم . لكن عندما ترسلون البيانات ستُعرض على متصفحكم دون رجوع إلى السطر .

و لتفعيل هذا الرجوع إلى السطر الذي نقرتموه أثناء استقبال البيانات و عرضها ، نستعمل دالة من دوال php الجاهزة ()nl2br.
()nl2br هي اختزال لثلا كلمات :
nl : new line : سطر جديد .
2 : to : إلى .
br : وسم br
إذا جمعناها فهي تعني : تحويل السطر الجديد إلى وسم <br>
تقوم الدالة إذاً بتحويل نقركم في الحقل إلى وسوم <br> أثناء العرض . قوما بتجربة المثال التالي على حاسوبكم . حاولوا كتابة نص طويل مع الرجوع إلى السطر في بعض الأماكن . ثم قوموا بإرسال و عرض بياناتكم في الحالة الأولى دون استعمال nl2br و في الحالة الثانية باستعمالها .

<!-- form.php -->
<form action="validate.php" method="post">
  <textarea name="comment"></textarea>
  <input type="submit">
</form>
<?php
// validate.php
if (isset($_POST['comment'])) 
{
   $comment = htmlspecialchars($_POST['comment']);

   echo nl2br($comment);
}
?>

checkbox : خانات الإختيار

عبارة عن خانات تمكننا من التفاعل الجزئي مع الزائر . جزئي لأنه نحن من يتحكم بالخيارات أما الزائر فيقوم فقط بالإختيار . تستعمل هذه الخانات مثلا في اختيار جواب واحد أو عدة أجوبة من بين مجموعة من الأجوبة ...
لإنشاء الخانة نستعمل وسم <input> ثم نعطي قيمة checkbox لصفة type

<input type="checkbox" name="value1">
<input type="checkbox" name="value2">
<form action="" method="post">
  <b> ماهي رياضاتك المفضلة ؟  </b><br>
  <input type="checkbox" name="athletisme"><br>
  <input type="checkbox" name="swiming"><br>
  <input type="checkbox" name="foot"><br>
  <input type="checkbox" name="basket"><br>
  <input type="submit" value="إرسال">
</form>



الخيارات التي لم نقم بتحديدها ، عند إرسال الإستمارة ، سيعتبرها php كأنها غير موجودة في الإستمارة .
يمكننا إعطاء قيمة مبدئية للخانة أي اختيارها و تحديدها مسبقا ، باستعمال الصفة checked

<input type="checkbox" name="foot" checked>

radio : اختيار خانة واحدة من بين مجموعة

نستخدمها بنفس طريقة checked . لكن بالنسبة ل radio لا نسمح للزائر إلا بتحديد خانة واحدة فقط

<form action="" method="post">
      <b> اختر مدة الإشتراك ! </b><br>             
       <input type="radio" name="abonnement" value="1-mounth"><br>
       <input type="radio" name="abonnement" value="6-mounth"><br>
       <input type="radio" name="abonnement" value="1-year"><br>
	   <input type="submit" value="إرسال">
    </form>

هنا للقيام بخيار واحد فقط ، يجب أن نعطي نفس القيمة ل name . ثم نعتمد على الصفة value للتّمييز بين الخيارات .

Select اللوائح المنسدلة

تكون اللوائح المنسدلة ذات جدوى ، عندما نريد اختيار عنصر واحد من مجموعة طويلة . في هذه الحالة نستستعمل وسوما جديدة . الوسم الأول <select> يدلّنا على بداية و نهاية اللاّئحة المنسدلة ، و نعطيها صفة name كما عهدنا أن نفعل . داخل الوسم <select></select> سنضيف عناصر لائحتنا باستعمال وسم آخر <option></option> . و لكي نميز كل عنصر عن الآخر ، نضيف صفة value مختلفة

<form action="" method="post">
    <label>اختر بلدك</label>
    <select name="pays">
        <option value="maroc"> المغرب</option>
        <option value="palestine"> فلسطين </option>
        <option value="tunisie"> تونس </option>
        <option value="algérie"> الجزائر</option>
        <option value="lybie"> ليبيا </option>
        <option value="egypt"> مصر </option>
        <option value="mauritanie"> موريتانيا </option>
        <option value="arabie-saudite"> السعودية </option>
        <option value="yemen"> اليمن </option>
        <option value="qatar"> قطر </option>
    </select>
   <input type="submit" value="إرسال">
</form>

يمكننا أيضا اختيار أكثر من قيمة واحدة ، و ذلك بإضافة صفة جديدة للوسم select و هي multiple . بهذه الطريقة ، للقيام بأكثر من اختيار واحد ، يجب على الزائر ترك أصبعه على زر CTRL في لوحة المفاتيح .

hidden : الحقول المخفية

نستعمل الحقول المخفية ، لإرسال بيانات لا يمكن للزائر رؤيتها على المتصفح . و يمكن دائما رؤيتها في منبع شيفرة html .

<input type="hidden" name="token" value="12tg43k7z">

رفع الملفات : file

يمكننا السماح للزوار برفع ملفاتهم كالصور و الفيديو و ملفات pdf إلخ .
بخلاف ما رأيناه سابقا ، يجب الآن إضافة صفة جديدة في وسم form ، تسمح لنا بذلك . و هي صفة enctype و تأخذ قيمة multipart/form-data
و نعطي لصفة type قيمة file

<form action="" method="post" enctype="multipart/form-data">
  <input type="file" name="myimage">
  <input type="submit" value="رفع الصورة">
</form>

نظرا لأهمية هذا الحقل و خطورته ، للثغرات التي يتيحها إذا لم نقم بالتعامل معه بحذر . سأخصص خصصت له درسا خاصا تجدونه هنا

لا تستعملوا أبدا الطريقة GET لإرسال البيانات الحساسة ، ككلمة السر أو رقم بطاقة تأمين أو الملفات ...
لا تعطوا أبدا قيمة تلقائية للحقول التي تحمل بيانات حساسة . إذا أخطأ المُستخدم في ملأ الإستمارة ، يجب عليه إدخال البيانات الحساسة مُجدّدا.