[الدرس مفصل الثاني عشر] مربعات الإختيار المتعددة وأدوات الإختيار المنفردة
http://www.dzbatna.com/images/icons/iconrote.gif [ط§ظ„ط¯ط±ط³ ط§ظ„ط«ط§ظ†ظٹ ط¹ط´ط±] ظ…ط±ط¨ط¹ط§طھ ط§ظ„ط¥ط®طھظٹط§ط± ط§ظ„ظ…طھط¹ط¯ط¯ط© ظˆط£ط¯ظˆط§طھ ط§ظ„ط¥ط®طھظٹط§ط± ط§ظ„ظ…ظ†ظپط±ط¯ط©
بسم الله الرحمن الرحيم
الحمد لله رب العالمين
والصلاة السلام على أشرف المرسلين
سيدنا محمد عليه أفضل الصلوات والتسليم
السلام عليكم ورحمة الله وبركاته
تحية طيبة لرواد القسم الجميل
كنا قد تابعنا سلسلة دروس ويفضل الرجوع أليها قبل الخوض في هذا الدرس مفصل
اقتباس
وإن شاء الله سنبدأ اليوم في شرح طريقة مربعات الإختيار المتعدد (Check Box) و أدوات الإختيار المنفردة (Radio Buttons) .
أتمنى من الله أن يكون سهل وبسيط في نفس الوقت
بسم الله ::
أولاً :: مربعات الإختيار المتعددة (Check Box) ::
تظهر فائدتها عندما تريد الإختيار من بين أشياء متعددة ، مثلاً إذا قمت بزيارة موقع للإشتراك في عدد من المجلات الألكترونية فيتم عرض هذه المجلات في صورة عدة إختيارات ويقوم المستخدم بالإختيار منها ، وعلى المطور معرفة إختيارات الزائر ، وفيما يلي الوسم القياسي لهذه الأداة ::
نلاحظ أنه تم تحديد نوع الأداة بعد الخاصية name التي يمكن عن طريقه الوصول إلى هذه الأداة ثم الخاصية value وهي القيمة التي سيتم تخزينها في متغير الأداة إذا قام المستخدم بإختيارها ، وأخيراً المعامل checked يحدد إذا كان صندوق الإختيار مختاراً إفتراضياً أم لا .
مثال ::
قم بفتح ملف Text عادي ثم أكتب الكود code التالي ::
رمز PHP:
<html dir="rtl">
<head>
<body>
<form name="form1" method="post"
action="result01.php">
<label>
<input type="checkbox" name="mag[]" value="m1"
checked>
الإختيار الأولlabel>
<p>
<label>
<input type="checkbox" name="mag[]" value="m2"
checked>
الإختيار الثانيlabel>
p>
<p>
<label>
<input type="checkbox" name="mag[]" value="m3"
checked>
الإختيار الثالثlabel>
p>
<p>
<label>
<input type="checkbox" name="mag[]" value="m1"
checked>
الإختيار الرابعlabel>
p>
<p>
<label>
<input type="submit" name="submit" value="إرسال">
label>
p>
form>
body>
html>
قم بحفظ الملف وغير إمتداده بدلاً من .txt إلى .htm وأطلق عليه page01.html ثم قم برفعه على موقعك وشاهد النتيجة ، وستكون كما في الصورة التالية ::
http://www.eltayer.net/lesson/33.gif
نلاحظ تحميل الصفحة والإختيار الأول فعالاً إفتراضياً
قم أيضاً بتغيير الكود code في الصفحة result01.php إلى الكود code ::
رمز PHP:
echo $_POST["mag"][0]."
";
echo $_POST["mag"][1]."
";
echo $_POST["mag"][2]."
";
echo $_POST["mag"][3];
?>
قم الآن بإختيار كل صناديق الإختيار وأضغط على المفتاح "إرسال" ستجد في صفحة result01.php أنه تم إستعراض كل قيم الصناديق ، وفيما يلي كيفية حدوث ذلك ::
قمنا في الصفحة الأولى بتسمية كل صناديق الإختيار بالإسم نفسه هو "mag[]" وهذا يعني الإعلان عن مصفوفة أي متغير يستطيع أن يحتوي على عدة قيم في آن واحد ، ويتم الوصول إلى كل قيمة عن طريق رقم ترتيبها في المصفوفة ، بحيث تبدء من الصفر ، وهذا ما تلاحظه في الصفحة التالية ::
توجد في الكود code السابق مشكلة وهي إذا لم يقم المستخدم بإختيار صندوق فإن رقم المصفوفة لهذا الصندوق يصبح غير معرف ، وبالتالي فمحاولة الوصول أليه تؤدي إلى ظهور خطأ ، لذلك يجب إختبار المصفوفة أولاً ، ويتم ذلك عن طريق الدالة isset() التي قمنا بشرح طريقةها لاحقاً ، ويتم ذلك عن طريق العبارة الشرطية if بحيث يصبح الكود code السابق كما يلي ::
رمز PHP:
if (isset($_POST["mag"][0]))
echo $_POST["mag"][0]."
";
if (isset($_POST["mag"][1]))
echo $_POST["mag"][1]."
";
if (isset($_POST["mag"][2]))
echo $_POST["mag"][2]."
";
if (isset($_POST["mag"][3]))
echo $_POST["mag"][3]."
";
?>
لرؤية مثال حي أضغط هنا
بهذه الطريقة يتم إختبار ما إذا كان المتغير موجود أولاً أم لا ، وبنفس الطريقة يمكن التأكد من إدخال قيمة في خانة معينة قبل معالجة البيانات وهذا أمر شائع خصوصاً في النماذج الخاصة بالتسجيل والشراء ، فإذا لم يتحقق الشرط فمن المفروض أن يتم التوجيه إلى صفحة التسجيل مرة أخرى بحيث يقوم المستخدم بتصحيح بياناته .
ثانياً :: أدوات الإختيار المنفردة (Radio Buttons) ::
وهنا نجد أنه عكس الأداة Check Box ، فإن هذه الأداة لا تسمح إلا بإختيار واحد فقط من بين عدة إختيارات متاحة ، والصيغة القياسية لهذه الأداة هي ::
رمز PHP:
<input name="[name]" type="radio" value="[value]">
حيث الخاصية name تحدد إسم الأداة أو المتغير الخاص بالأداة ، والخاصية value تحتوي على القيمة 1 إذا تم إختيار الأداة
مثال ::
بدلاً من الكود code السابق قم بكتابة الكود code الآتي في الصفحة page01.htm وسنقوم بتسميتها page02.htm لنفرق بينها وبين المثال السابق وستكون بهذا الشكل ::
رمز PHP:
<html dir="rtl">
<head>
<body>
<form name="form1" method="post"
action="result02.php">
<p>
<label>
<input name="radiobutton" type="radio" value="c1"
checked>
الإختيار الأولlabel>
p>
<p>
<label>
<input name="radiobutton" type="radio" value="c2"
checked>
الإختيار الثانيlabel>
p>
<p>
<label>
<input name="radiobutton" type="radio" value="c3"
checked>
الإختيار الثالثlabel>
p>
<p>
<label>
<input name="radiobutton" type="radio" value="c4"
checked>
الإختيار الرابعlabel>
p>
<p>
<label>
<input type="submit" name="submit" value="إرسال">
label>
p>
form>
body>
html>
وتكون النتيجة IE كما بالشكل التالي ::
http://www.eltayer.net/lesson/34.gif
لاحظ أن الإختيار الأول فعالاً ، حاول أيضاً الإختيار ولاحظ أنه يتم إختيار منفرد في كل مرة .
قم الآن بإستبدال الكود code في الصفحة result02.php (لاحظ أننا هنا غيرنا الإسم للتفرقة بين هذا المثال والمثال السابق) بالكود code الآتي ::
رمز PHP:
echo $_POST["radiobutton"];
?>
لرؤية مثال حي أضغط هنا
ملاحظـــات ::
في هذا المثال قمنا في الصفحة الأولي بالتأكد من أن كل أدوات الإختيار لها نفس الإسم radiobutton ولكن لكل منهم قيمة value مختلفة بحيث يمكن في الصفحة التالية أن نقوم بكتاية سطر واحد لعرض قيمة المتغير radiobutton ، وهنا لن يستطيع الزائر أن يقوم بإختيار أكثر من إختيار أو إلغاء كل الإختيارات في جميع الأحوال .
أسأل الله أن لا أكون أطلت عليكم وأن يكون الدرس مفصل بسيط وسهل
وأعذروني على التأخير
وإن شاء الله سنتعلم في الدرس مفصل القادم كيفية صنع القوائم المنسدلة والقوائم المتعددة الإختيارات والحقل الخفي وكيفية عمل نموذج إرسال بالبريد الإلكتروني
وأي إستفسار أنا في الخدمة إن شاء الله
أخوك الطاير http://www.dzbatna.com/images/smilies/icon26.gif
https://fbcdn-sphotos-d-a.akamaihd.n...93518507_n.png
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©
