واحد من الناسـ
04-08-07, 05:24 PM
بسم الله الرحمن الرحيم
الحمد لله رب العالمين
والصلاة السلام على أشرف المرسلين
سيدنا محمد عليه أفضل الصلوات والتسليم
السلام عليكم ورحمة الله وبركاته
وإن شاء الله سنبدأ اليوم في شرح مربعات الإختيار المتعدد (Check Box) و أدوات الإختيار المنفردة (Radio Buttons) .
أتمنى من الله أن يكون سهل وبسيط في نفس الوقت
بسم الله ::
أولاً :: مربعات الإختيار المتعددة (Check Box) ::
تظهر فائدتها عندما تريد الإختيار من بين أشياء متعددة ، مثلاً إذا قمت بزيارة موقع للإشتراك في عدد من المجلات الألكترونية فيتم عرض هذه المجلات في صورة عدة إختيارات ويقوم المستخدم بالإختيار منها ، وعلى المطور معرفة إختيارات الزائر ، وفيما يلي الوسم القياسي لهذه الأداة ::
<input type="checkbox" name="[name]" value="[value]"
checked>
نلاحظ أنه تم تحديد نوع الأداة بعد الخاصية name التي يمكن عن طريقه الوصول إلى هذه الأداة ثم الخاصية value وهي القيمة التي سيتم تخزينها في متغير الأداة إذا قام المستخدم بإختيارها ، وأخيراً المعامل checked يحدد إذا كان صندوق الإختيار مختاراً إفتراضياً أم لا .
مثال ::
قم بفتح ملف **** عادي ثم أكتب الكود التالي ::
<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
نلاحظ تحميل الصفحة والإختيار الأول فعالاً إفتراضياً
قم أيضاً بتغيير الكود في الصفحة result01.php إلى الكود ::
<?
echo $_POST["mag"][0]."<br>";
echo $_POST["mag"][1]."<br>";
echo $_POST["mag"][2]."<br>";
echo $_POST["mag"][3];
?>
قم الآن بإختيار كل صناديق الإختيار وأضغط على المفتاح "إرسال" ستجد في صفحة result01.php أنه تم إستعراض كل قيم الصناديق ، وفيما يلي كيفية حدوث ذلك ::
قمنا في الصفحة الأولى بتسمية كل صناديق الإختيار بالإسم نفسه هو "mag[]" وهذا يعني الإعلان عن مصفوفة أي متغير يستطيع أن يحتوي على عدة قيم في آن واحد ، ويتم الوصول إلى كل قيمة عن طريق رقم ترتيبها في المصفوفة ، بحيث تبدء من الصفر ، وهذا ما تلاحظه في الصفحة التالية ::
توجد في الكود السابق مشكلة وهي إذا لم يقم المستخدم بإختيار صندوق فإن رقم المصفوفة لهذا الصندوق يصبح غير معرف ، وبالتالي فمحاولة الوصول أليه تؤدي إلى ظهور خطأ ، لذلك يجب إختبار المصفوفة أولاً ، ويتم ذلك عن طريق الدالة isset() التي قمنا بشرحها لاحقاً ، ويتم ذلك عن طريق العبارة الشرطية if بحيث يصبح الكود السابق كما يلي ::
<html dir="rtl">
<?
if (isset($_POST["mag"][0]))
echo $_POST["mag"][0]."<br>";
if (isset($_POST["mag"][1]))
echo $_POST["mag"][1]."<br>";
if (isset($_POST["mag"][2]))
echo $_POST["mag"][2]."<br>";
if (isset($_POST["mag"][3]))
echo $_POST["mag"][3]."<br>";
?>
</html>
لرؤية مثال حي أضغط هنا (http://www.eltayer.net/lesson/page01.htm)
بهذه الطريقة يتم إختبار ما إذا كان المتغير موجود أولاً أم لا ، وبنفس الطريقة يمكن التأكد من إدخال قيمة في خانة معينة قبل معالجة البيانات وهذا أمر شائع خصوصاً في النماذج الخاصة بالتسجيل والشراء ، فإذا لم يتحقق الشرط فمن المفروض أن يتم التوجيه إلى صفحة التسجيل مرة أخرى بحيث يقوم المستخدم بتصحيح بياناته .
ثانياً :: أدوات الإختيار المنفردة (Radio Buttons) ::
وهنا نجد أنه عكس الأداة Check Box ، فإن هذه الأداة لا تسمح إلا بإختيار واحد فقط من بين عدة إختيارات متاحة ، والصيغة القياسية لهذه الأداة هي ::
<input name="[name]" type="radio" value="[value]">
حيث الخاصية name تحدد إسم الأداة أو المتغير الخاص بالأداة ، والخاصية value تحتوي على القيمة 1 إذا تم إختيار الأداة
مثال ::
بدلاً من الكود السابق قم بكتابة الكود الآتي في الصفحة page01.htm وسنقوم بتسميتها page02.htm لنفرق بينها وبين المثال السابق وستكون بهذا الشكل ::
<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
لاحظ أن الإختيار الأول فعالاً ، حاول أيضاً الإختيار ولاحظ أنه يتم إختيار منفرد في كل مرة .
قم الآن بإستبدال الكود في الصفحة result02.php (لاحظ أننا هنا غيرنا الإسم للتفرقة بين هذا المثال والمثال السابق) بالكود الآتي ::
<html dir = "rtl">
<?
echo $_POST["radiobutton"];
?>
</html>
لرؤية مثال حي أضغط هنا (http://www.eltayer.net/lesson/page02.htm)
ملاحظـــات ::
في هذا المثال قمنا في الصفحة الأولي بالتأكد من أن كل أدوات الإختيار لها نفس الإسم radiobutton ولكن لكل منهم قيمة value مختلفة بحيث يمكن في الصفحة التالية أن نقوم بكتاية سطر واحد لعرض قيمة المتغير radiobutton ، وهنا لن يستطيع الزائر أن يقوم بإختيار أكثر من إختيار أو إلغاء كل الإختيارات في جميع الأحوال .
أسأل الله أن لا أكون أطلت عليكم وأن يكون الدرس بسيط وسهل
وأعذروني على التأخير
وإن شاء الله سنتعلم في الدرس القادم كيفية صنع القوائم المنسدلة والقوائم المتعددة الإختيارات والحقل الخفي وكيفية عمل نموذج إرسال بالبريد الإلكتروني
أخوك الطاير
منقول نصياً من الأخ الطاير جزاه الله كل خير
دُمتم بحفظ الله
الحمد لله رب العالمين
والصلاة السلام على أشرف المرسلين
سيدنا محمد عليه أفضل الصلوات والتسليم
السلام عليكم ورحمة الله وبركاته
وإن شاء الله سنبدأ اليوم في شرح مربعات الإختيار المتعدد (Check Box) و أدوات الإختيار المنفردة (Radio Buttons) .
أتمنى من الله أن يكون سهل وبسيط في نفس الوقت
بسم الله ::
أولاً :: مربعات الإختيار المتعددة (Check Box) ::
تظهر فائدتها عندما تريد الإختيار من بين أشياء متعددة ، مثلاً إذا قمت بزيارة موقع للإشتراك في عدد من المجلات الألكترونية فيتم عرض هذه المجلات في صورة عدة إختيارات ويقوم المستخدم بالإختيار منها ، وعلى المطور معرفة إختيارات الزائر ، وفيما يلي الوسم القياسي لهذه الأداة ::
<input type="checkbox" name="[name]" value="[value]"
checked>
نلاحظ أنه تم تحديد نوع الأداة بعد الخاصية name التي يمكن عن طريقه الوصول إلى هذه الأداة ثم الخاصية value وهي القيمة التي سيتم تخزينها في متغير الأداة إذا قام المستخدم بإختيارها ، وأخيراً المعامل checked يحدد إذا كان صندوق الإختيار مختاراً إفتراضياً أم لا .
مثال ::
قم بفتح ملف **** عادي ثم أكتب الكود التالي ::
<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
نلاحظ تحميل الصفحة والإختيار الأول فعالاً إفتراضياً
قم أيضاً بتغيير الكود في الصفحة result01.php إلى الكود ::
<?
echo $_POST["mag"][0]."<br>";
echo $_POST["mag"][1]."<br>";
echo $_POST["mag"][2]."<br>";
echo $_POST["mag"][3];
?>
قم الآن بإختيار كل صناديق الإختيار وأضغط على المفتاح "إرسال" ستجد في صفحة result01.php أنه تم إستعراض كل قيم الصناديق ، وفيما يلي كيفية حدوث ذلك ::
قمنا في الصفحة الأولى بتسمية كل صناديق الإختيار بالإسم نفسه هو "mag[]" وهذا يعني الإعلان عن مصفوفة أي متغير يستطيع أن يحتوي على عدة قيم في آن واحد ، ويتم الوصول إلى كل قيمة عن طريق رقم ترتيبها في المصفوفة ، بحيث تبدء من الصفر ، وهذا ما تلاحظه في الصفحة التالية ::
توجد في الكود السابق مشكلة وهي إذا لم يقم المستخدم بإختيار صندوق فإن رقم المصفوفة لهذا الصندوق يصبح غير معرف ، وبالتالي فمحاولة الوصول أليه تؤدي إلى ظهور خطأ ، لذلك يجب إختبار المصفوفة أولاً ، ويتم ذلك عن طريق الدالة isset() التي قمنا بشرحها لاحقاً ، ويتم ذلك عن طريق العبارة الشرطية if بحيث يصبح الكود السابق كما يلي ::
<html dir="rtl">
<?
if (isset($_POST["mag"][0]))
echo $_POST["mag"][0]."<br>";
if (isset($_POST["mag"][1]))
echo $_POST["mag"][1]."<br>";
if (isset($_POST["mag"][2]))
echo $_POST["mag"][2]."<br>";
if (isset($_POST["mag"][3]))
echo $_POST["mag"][3]."<br>";
?>
</html>
لرؤية مثال حي أضغط هنا (http://www.eltayer.net/lesson/page01.htm)
بهذه الطريقة يتم إختبار ما إذا كان المتغير موجود أولاً أم لا ، وبنفس الطريقة يمكن التأكد من إدخال قيمة في خانة معينة قبل معالجة البيانات وهذا أمر شائع خصوصاً في النماذج الخاصة بالتسجيل والشراء ، فإذا لم يتحقق الشرط فمن المفروض أن يتم التوجيه إلى صفحة التسجيل مرة أخرى بحيث يقوم المستخدم بتصحيح بياناته .
ثانياً :: أدوات الإختيار المنفردة (Radio Buttons) ::
وهنا نجد أنه عكس الأداة Check Box ، فإن هذه الأداة لا تسمح إلا بإختيار واحد فقط من بين عدة إختيارات متاحة ، والصيغة القياسية لهذه الأداة هي ::
<input name="[name]" type="radio" value="[value]">
حيث الخاصية name تحدد إسم الأداة أو المتغير الخاص بالأداة ، والخاصية value تحتوي على القيمة 1 إذا تم إختيار الأداة
مثال ::
بدلاً من الكود السابق قم بكتابة الكود الآتي في الصفحة page01.htm وسنقوم بتسميتها page02.htm لنفرق بينها وبين المثال السابق وستكون بهذا الشكل ::
<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
لاحظ أن الإختيار الأول فعالاً ، حاول أيضاً الإختيار ولاحظ أنه يتم إختيار منفرد في كل مرة .
قم الآن بإستبدال الكود في الصفحة result02.php (لاحظ أننا هنا غيرنا الإسم للتفرقة بين هذا المثال والمثال السابق) بالكود الآتي ::
<html dir = "rtl">
<?
echo $_POST["radiobutton"];
?>
</html>
لرؤية مثال حي أضغط هنا (http://www.eltayer.net/lesson/page02.htm)
ملاحظـــات ::
في هذا المثال قمنا في الصفحة الأولي بالتأكد من أن كل أدوات الإختيار لها نفس الإسم radiobutton ولكن لكل منهم قيمة value مختلفة بحيث يمكن في الصفحة التالية أن نقوم بكتاية سطر واحد لعرض قيمة المتغير radiobutton ، وهنا لن يستطيع الزائر أن يقوم بإختيار أكثر من إختيار أو إلغاء كل الإختيارات في جميع الأحوال .
أسأل الله أن لا أكون أطلت عليكم وأن يكون الدرس بسيط وسهل
وأعذروني على التأخير
وإن شاء الله سنتعلم في الدرس القادم كيفية صنع القوائم المنسدلة والقوائم المتعددة الإختيارات والحقل الخفي وكيفية عمل نموذج إرسال بالبريد الإلكتروني
أخوك الطاير
منقول نصياً من الأخ الطاير جزاه الله كل خير
دُمتم بحفظ الله