بسم الله الرحمن الرحيم
تابع النماذج
في هذا الدرس ساندرس بالتفصيل بعض الاشكال بالتفصيل وهي اشكال الاختيار وهي ثلاثه انواع
Raddo , checkbox , drop-down select boxes
والان ناخذ كل وسم علي حده:
1- radio
وهو وسم خاص بالاختيار من متعدد ولكن يجب ان تكون الاجابه واحده فقط اي لن يكون هناك امكانيه اختيار اكثر من شيئ في نفس الوقت . نري في مثال
<form>
<input name=”programming” type=”radio” value=”c”>
لغه السي
<input name=”programming” type=”radio” value=”c++”>
لغه السي بلس بلس
<input name=”programming” type=”radio” value=”delphi”>
لغه الدلفي
<input name=”programming” type=”radio” value=”vb”>
لغه الفيجوال بيسك
</form>
لنري الكود سويا:
في البدايه تم تعريف وسم النموذج ثم وسم رسم الاشكال والوسم السائد هنا هو وسم الاختيار المفرد وقمنا بتسميتهم جميعا في الخاصيه
Name
باسم البرمجه حتي يسهل عليك عندما تستقبل انت تلك البيانات تعلم انها عن اي شيئ في موقعك ثم تم تعريف وسم الاختيار المفرد وهو
<input type=”radio”>
وقمنا باعطاء قيمه لكل من المدخلات السابقه وبقي ان نكتبها صريحه حتي يختار منها المستخدم
وسوف تلاحظ بعد كتابه الكود السابق انه ستظهر الاسماء وبجانبها ازرار دائريه وسوف تلاحظ ايضا انه لم يتم اختيار احداها افتراضيا ولعمل ذلك قم باختيار من هي التي تريدها ان تصبح افتراضيه وضع داخل الوسم الخاص بها الخاصيه
Checked
فيكون الوسم الكلي هو باعتبار انه اننا اخترنا لغه السي هلي الافتراضيه
<input name=”programming” type=”radio” value=”c” checked>
لغه السي
طبعا سوف تكمل بقيه الوسم
__________________________________________________ _____
2-checkbox
ويعني مربع الاختيار ويظهر علي صوره مربع وهناك اختلافات بينه وبين الوسم السابق هي:
انه باستطاعتك اختيار اكثر من حقل في نفس الوقت او حتي اختيارهم جميعا نري في مثال :
<form>
<input name=”acd” type=”checkbox” value=”agree”>
acd see
<input name=”ps” type=”checkbox” value=”agree”>
photoshop
<input name=”sw” type=”checkbox” value=”agree”>
switich
<input name=”psp” type=”checkbox” value=”agree”>
paint shop pro
</form>
في المثال السابق سيتم الاختيار بين مجموعه من البرامج المستخدمه في الصور. لنري الكود بالتفصيل
تم تعريف وسم مربع الاختيار وهو :
<input type=”checkbox”>
واعطاء كل حقل اسم مميز يدل علي اسم البرنامج المختار لان ارسال البيانات اليك سيكون معتمدا عليها وتم اعطاء جميع القيم الخاصيه
Value=”agree”
ومن الممكن ان تضع انت غير كلمه موافق وليتضح لك فائدتها لنقل انك اخترت اول برنامجين ستكون شكل المعلومات المرسله :
Acd=agree
Ps=agree
هل رايت لماذا تم توحيد قيمتها في جميع الحقول فجرب ان تضع قيما مختلفه ودع الزوار يختارون ولنري ان كنت ستفهم ما اختارونه او لا .
وهناك ايضا نفس الخاصيه المستخدمه مع الوسم
Radio
وهي لتحديد البرنامج الذي سيتم اختياره افتراضيا ولنقل هنا انه ايضا اول برنامج سيكون وسمه :
<input name=”acd” type=”checkbox” value=”agree” checked>
acd see
__________________________________________________ ____________
3-drop-down select boxes
وهو الوسم الخاص بالاختيار من قائمه منسدله وايضا تعني اختيار شيئ واحد فقط
هذا النوع مختلف عن النوعين السابقين من حيث تعريف اوسم حيث يتم استبدال وسم
Input
ونضع مكانه وسم
Select
وهو وسم تعريف القائمه اما الوسم المستخدم لتحديد كل عنصر في القائمه هو :
Option
مثال:
<form>
<select>
<option>acdesee
<option> photoshop
<option> paintshop pro
</select>
</form>
ومن المعتاد ان يوجد خصائص تتعلق بهذا الوسم فهناك ايضا الخاصيه المسئوله عن الاسم في وسم التعريف وخاصيه الحجم والارتفاع فمن الممكن ان يظهروا جميعا مره واحده بدون وجود سهم ويلزم ايضا اختيار شكل واحد فقط :
<form>
<select name=”select” size=”5”>
<option>acdesee
<option> photoshop
<option> paintshop pro
</select>
</form>
اما لجعل الاختيار ليس واحدا فقط نضع الخاصيه :
Multiple
اما الخائص المستخدمه مع الوسم
Option
هي اعطاء كل عنصر من عناصر القائمه قيمه معينه وهناك ايضا الخاصيه
Selected
وهي من البديهي انها تحدد العنصر الذي سيتم اختياره افتراضيا
<form>
<select name=”select” size=”5” multiple>
<option value=”acd” selected>acdesee
<option value=”ps”> photoshop
<option value=”psp”> paintshop pro
</select>
</form>
الحمد لله بهذا نكون قد انتهينا من اشكال الاختيار بجميع انواعها
اي سؤال لا تتردد