في الواقع أن أدوات التحكم عبارة عن مربعات النصوص العاديه (التي يدخل فيها المستخدم اسمه وعنوانه ) وازرار الراديو ( والتي يقوم المستخدم فيها باختيا شي معين (مثل الوجبه المفضلة لديه او المشروب المفضل اليه ) ومربعات الاختيار (التي تتيح للمستخدم أن يختار مايشتهي ويحب من الخيارات المعروضة )
وأيضا القوائم التي تساعدك على اختيار أكثر من شي أو شي واحد .
في أغلب هذه الاشياء يتم استعمال الوسم
<INPUT>
وتلخيص تفصيله كالتالي :
<INPUT TYPE= type NAME= name VALUE= value other attribute>
الشرح :
1 - TYPE= type
نحدد نوع الكائن إذا كان زر راديو أو مربع نص عادي أو مربعات الاختيار .
2 - NAME= name
تقوم فيها بإعطاء اسم لمتغير يتم حفظ القيمة فيه .
3 - VALUE= value
سيتضح وظيفته أكثر عندما ندرج عليه أمثله إذ أن عمله يختلف من أداة إلى أخرى .
تطبيقات عمليه
سنقوم في هذه التطبيقات بصنع برامج بسيطة تتكون من ملفين ، الملف الاول يحتوي على كود HTML يقوم بتكوين النموذج والملف الثاني يقوم بإستقبال النتائج وطباعتها .
مربعات النصوص (TEXT Box) :
نقوم بعمل ذلك كالتالى :
1 - قم بتشغيل محرر النصوص لديك .
2 - اكتب الكود التالي :
<html dir =”rtl”>
<FORM METHOD = “GET” ACTION = “textbox.php”>
ماهي وجبتك المفضلة في الصباح ؟
<br>
<INPUT TYPE =”text” NAME = “food” value=”جبنة ومربي”>
<br>
<INPUT TYPE= submit VALUE=”إرسال”>
<INPUT TYPE= reset VALUE=”مسح”>
</form>
</html>
3 - قم بحفظ الملف كصفحة HTML . وقم بتسميته (textbox.html) .
4 - افتح محرر النصوص إذا كنت أغلقته .
5 - اكتب الكود التالي :
<?
Echo “وجبتك المفضله والى تموت في حبها هي” . “ “ . $food ;
?>
6 - قم بحفظ الملف كـ php . وقم بتسميته textbox.php .
7 - الآن قم بأخذ الملفين وضعهما في مجلد السيرفر لديك .
8-قم بتشغيل السيرفر واكتب في مستعرض الانترنت لديك
http://localhost/textbox.html
9 - قم بكتابة وجبتك المفضلة واضغط زر إرسال .
10- ستظهر النتيجة .
لاحظ كيف ظهر العنوان :
http://localhost/textbox.php?food=%C...E6%E3%D1%C8%ED
الشرح
لقد قمنا في البداية بعمل صفحة تتكون من نص و مربع نص وزر يقوم بعملية إرسال البيانات
قمنا بصناعة بداية النموذج بواسطة الوسم <FORM> وقمنا بتحديد المكان الذي سيتم ارسال البيانات إليه بواسطة
ACTION=”textbox.php”
وقمنا بصنع مربع النص بواسطه الوسم INPUT واخترنا الـ
TYPE=”text”
كما قمنا بوضع القيمة الإفتراضية فيه بواسطة القيمة
Value= “جبنه ومربي”
وقمنا بوضع الناتج الذي يضعه المستخدم في مربع النص في المتغير food .
(لاحظ ان تسميه المتغيرات حساسه لحاله الاحرف في PHP واننا لم نقم بوضع $ في صفحه المتغير في كود الـhtml ).
وأيضا لقد قمنا بإضافه زر بواسطة
TYPE=SUBMIT
وقمنا بوضع كلمة على الزر وهي كلمة (إرسال)
VALUE = “إرسال”
أيضا قمنا بصنع زر آخر
Type =reset
وقمنا بجعل العبارة التي عليه (مسح)
Value=”مسح”
هناك نوعين من الازرار هي SUBMIT وRESET
1- الـsubmit يقوم بإرسال المعلومات .
2- الـreset يقوم بمسح البيانات في جميع الأدوات في النموذج لإعاده إدخالها من جديد .
بعد ماقمنا بادخال البيانات وضغط زر الارسال قام النموذج بارسال البيانات إلى الصفحة المحددة في الخاصية ACTION وقامت الصفحة المحددة بإستقبال النتائج الموجودة في النموذج وهي نتيجة واحدة في مربع نصوص تم حفظ قيمته في المتغير food .
وقامت بطباعتها بواسطة الدالة echo .
نظرا لاننا استخدمنا الاسلوب GET فقد تم اعطاءنا عنوان الصفحه بالاضافه الى (?) وايضا المعلومات المسجله في المتغيرات والتي تم استخدام الURL ENCODING فيها لانها تستخدم حروف عربيه .
مربعات النصوص الكبيره (text area) طلبات اكبر للطعام الشهي !
إذا كنت تريد أن تكتب رسالة متعددة الأسطر فإنك تحتاج إلى أداة تحكم تختلف تماماً عن مربع النص العادي وهي مربعات النصوص الكبيرة التي يمكنك فيها من إدخال نصوص كبيرة الحجم ومتعددة الاسطر .
تستخدم هذه الأداة وسم فتح ووسم إغلاق
<TEXTAREA>
</TEXTAREA>
ويمكنك تحديد حجمها بواسطه تحديد الصفوف بالخاصية rows والأعمدة بالخاصية cols .
تمرين عملي
1- قم بفتح محرر النصوص لديك
2- قم بكتابة الكود التالي :
<html dir=”rtl” >
<FORM ACTION = “TAREA.PHP” METHOD=”POST”>
ما هي وجبتك المفضلة ؟
<br>
<TEXTAREA NAME = “food” ROWS=”10” COLS =”50” >
جبنة
مربي
مكرونة
بيف برغر
سمبوسة
معصوب
مطبق
ماشادونا
ماخلص لو قعدت اكتب هاها
</TEXTAREA>
<br>
<INPUT TYPE = SUBMIT VALUE =”قم بإرسال الطلبات إلى الجرسون”>
</FORM>
</html>
3- قم بحفظ الملف باسم TAREA.html .
4- الآن قم بفتح ملف جديد في محرر النصوص .
5- قم بكتابة الكود التالي :
<html dir=”rtl”>
وجبتك المفضلة هي :
<br>
<?
Echo $food;
?>
</html>
6- قم بحفظ الملف باسم tarea.php
7- قم بوضعهما في مجلد السيرفر لديك .
8- قم بتشغيل البرنامج .
http://localhost/tarea.html
9- قم بضغط الزر لارسال البيانات .
10- شاهد النتيجه.
الشرح
لانضيف شيئاً على قولنا هنا سوى أننا نريدك أن تلاحظ كيف جهزنا القيمة الإفتراضية بكتابة نصوص بين وسومات الـtextarea وأيضا أننا استخدمنا الأسلوب POST في ارسال البيانات مما جعلها لاتظهر في شريط العنوان .
وأن الـNAME تحدد اسم المتغير التي ستذهب إليه القيمة واسم المتغير في الكود لايحتوى على $ لأنه كود HTML وليس PHP .
مربعات الاختيار (Check Box) اكثر من خيار في وقت واحد !
في الواقع قد نرى مربعات الاختيار في صفحات الويب عندما نريد الاشتراك في موقع معين لرؤيه محتوياته أو عندما نريد تسجيل بريد إلكتروني أو حجز مساحة عند موقع .
وفائدتها هي إتاحه فرصة للمستخدم لتحديد أنواع الأشياء التي يريد أن يشترك فيها مثلاً أو إتاحه فرصة له لقبول إتفاقية أو غير ذلك أو رفض الجميع أو قبول الجميع .
يمكننا صنع مربع العلامة بواسطه الوسم INPUT
<INPUT TYPE = ”CHECKBOX” NAME = “swalif” value= ”سوالف” checked>
نقوم بتحديد نوع الأداة بأنها مربع علامة في هذا الجزء
TYPE = ”CHECKBOX”
نقوم بتحديد اسم المتغير في هذا الجزء
NAME = “swalif”
ونقوم بتحديد القيمه التي يتم وضعها في المتغير اذا قام المستخدم باختيار مربع العلامه في هذا الجزء :
value= ”سوالف”
اذا لم تقم بوضع الخيار value فستكون القيمه الافتراضيه هي on عند اختيار المستخدم مربع العلامه وستكون فراغ اذا لم يقم المستخدم باختيار المربع.
ونقوم بوضع القيمه الإفتراضية بإضافه الكلمة checked فإذا تم وضع هذه الكلمة يكون مربع العلامة مختار تلقائياً أما إذا لم نتكبها فسيكون بدون علامة الاختيار .
Checked
تطبيق عملي (1) :
1- قم بفتح المفكرة وقم بكتابة الكود التالي :
<html dir=”rtl”>
<FORM ACTION=”CHECK.PHP” METHOD = “POST”>
مالذي تريد أن تفعله في الحياة ؟ (يمكنك اختيار أكثر من إجابه )
<br>
<INPUT TYPE=”CHECKBOX” NAME = “WIFE” CHECKED>
الذي أريد أن أفعله في الحياة هو أني أتزوج وأخلص وافتك من الزهق.
<br>
<input type= submit value = “إرسال”>
</FORM>
</html>
2- قم بحفظ الملف باسم check.html .
3- قم بفتح ملف جديد في المفكرة وقم بكتابة التالى :
<?
Echo $WIFE ;
?>
4- قم بحفظ الملف باسم check.php .
5- قم بنقل الملفين الى مجلد السيرفر .
6- اكتب في المتصفح
http://localhost/check.html
7- النتيجه
تطبيق عملي (2) :
1- افتح المفكرة واكتب الكود التالي وقم بحفظه في ملف جديد باسم check2.html
<html dir=”rtl”>
<FORM ACTION=”CHECK2.PHP” METHOD = “POST”>
مالذي تريد أن تفعله في الحياة ؟ (يمكنك إختيار أكثر من إجابة )
<br>
<INPUT TYPE=”CHECKBOX” NAME = “WIFE” value= “زوجة” CHECKED>
الذي أريد أن أفعله في الحياة هو أني أتزوج وأخلص وافتك من الزهق.
<br>
<INPUT TYPE=”CHECKBOX” NAME = “jihad” value= “جهاد” >
أبغى أروح الجهاد واخمع رؤوس الكفرة والمشركين
<br>
<INPUT TYPE=”CHECKBOX” NAME = “qran” value= “قران” CHECKED>
والله لو ألتحق بتحفيظ قرآن واحفظ القران كامل وأطبقه في عملي وحياتي حرتاح في حياتي كثير
<br>
<input type= submit value = “إرسال”>
</FORM>
</html>
2- قم بفتح ملف جديد وقم بوضع الكود التالى فيه :
<html dir = “rtl”>
<?
Echo $WIFE . “ “ . $jihad . “ “ . $qran ;
?>
</html>
3- قم بحفظه باسم check2.php
4- قم بتشغيل الملف .
5- النتيجه
تطبيق عملي (3)
1- افتح محرر النصوص واكتب الكود التالي :
<html dir=”rtl”>
<FORM ACTION=”CHECK3.PHP” METHOD = “POST”>
مالذي تريد أن تفعله في الحياة ؟ (يمكنك إختيار أكثر من إجابة )
<br>
<INPUT TYPE=”CHECKBOX” NAME = “alswalif[]” value= “زوجة” CHECKED>
الذي أريد أن أفعله في الحياة هو أني أتزوج وأخلص وافتك من الزهق.
<br>
<INPUT TYPE=”CHECKBOX” NAME = “alswalif[]” value= “جهاد” >
أبغى أروح الجهاد واخمع رؤوس الكفرة والمشركين
<br>
<INPUT TYPE=”CHECKBOX” NAME = “alswalif[]” value= “قران” CHECKED>
والله لو ألتحق بتحفيظ قرآن واحفظ القران كامل وأطبقه في عملي وحياتي حرتاح في حياتي كثير
<br>
<input type= submit value = “إرسال”>
</FORM>
</html>
2- قم بحفظه باسم check3.html وافتح محرر النصوص من جديد واكتب الكود التالي :
<html dir=”rtl”>
<?
Echo “$alswalif[0] <br>” ;
Echo “$alswalif[1] <br>” ;
Echo “$alswalif[2] <br>” ;
?>
</html>
3- قم بحفظه باسم check3.php وقم بنقلهما الى ملف السيرفر .
4- قم بتشغيل البرنامج
http://localhost/check.html
5- قم بضغط زر ارسال وانظر للنتيجه
الشرح
في الواقع لقد قمنا بتطبيق ثلاث تمارين التمرين الاول أردنا لفت النظر إلى أننا قمنا بعدم استخدام value للمتغير وتم إعطاء القيمة on عند اختيار المستخدم مربع العلامة بالإضافة أن مربع العلامة كان مختاراً بسبب وضعنا الخاصية CHECKED ولكن التمرين غير عملي وغير جيد بدون وضع قيم VALUE عند وضعنا لأكثر من مربع اختيار لذلك فقد قمنا باضافه قيم يتم وضعها في المتغيرات عند اختيار المستخدم لها كما في التمرين الثاني وأردنا لفت النظر في التمرين الى شي يسمي بالمصفوفات فإذا أردنا مثلا أن نجعل اسم المتغير متشابها واجراء عمليات تكون أسرع عليه نستخدم المصفوفات ولن نتطرق إلى المصفوفات حالياً ولكن أردنا لفت نظرك فقط وسنقوم بالتكلم عن المصفوفات بالتفصيل في الدروس القادمه باذن الله هي والتكرارات بعد التكلم عن العبارات الشرطية في الـPHP .