بسم الله الرحمن الرحيم
- متطلبات
قبل البدأ :
- مراجعة الدرس السابق , مع محاولة القراءه عن النماذج
وانواعها من مواقع اخرى.
</li>
اهداف الدرس:
انواع
مدخلات النماذج
نوع الكتابه ( text )
نوع ازرار
الاختيار ( radio )
نوع مربع الاختيار ( check box )
نوع
حقل النصوص ( textarea )
نوع زر الارسال ( submit )
مثال
تطبيقي
نوع كلمة المرور ( password )
</li>
انواع مدخلات النماذج : لنقم بمعرفة ما يحتويه النموذج السابق ,
تابع الارقام ولاحظ التالي :
- مربع كتابه ( text
) لتكتب به اسمك الاول
- قائمة اختيار ( select ) لتقوم بإختيار
اللغه منها
- ازرار اختيار ( radio ) لتقم بإختيار الجنس
--------------------------
لنقم برؤية الانواع الاخرى , ازرار الاختيار :
حقل النصوص :
نوع الكتابه ( text
) : هذا النوع لكتابة النصوص القصيره , مثلما رأينا في
الاعلى , الاسم , او البريد الالكتروني وغيرها , كيف نقوم بإنشاء هذا النوع
, افتح محرر الاكواد وقم بكتابة التالي :
PHP كود :
<html dir="rtl">
<head>
<meta http-equiv="content-langauge" content="ar-sa">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256">
<title>بيناتك الشخصية</title>
</head>
<body>
<form method="Post" action="view.php">
<table border="1" width="304" hight="416" style="font-family: Tahoma; font-size: 8pt">
<tr>
<td width="107" align="center">الأسم الأول</td>
<td width="181" align="right">
<input type ="text" name ="fname" size ="20"></td>
</tr>
<tr>
<td width="107" align="center">اسم العائلة</td>
<td width="181" align="right">
<input type ="text" name="lname" size="20"></td>
</tr>
<tr>
<td width="107" align="center">البريد الألكترونى</td>
<td width="181" align="right">
<input type="text" name="email" size="20"></td>
</tr>
ازرار الاختيار ( radio ) : هذا النوع يكون لاختيار من بعض المعلومات المتوفره , مثلا الجنس , ذكر او
انثى , ارجع الى محرر الاكواد واكتب التالي ( اكمل على الكود السابق ) :
PHP كود :
<tr>
<td width="107" align="center">الجنس</td>
<td width="181" align="right">
<input type="radio" value="ذكر" cahked name="sex">
ذكر<br>
<input type="radio" name="sex" value="انثى">انثى</td>
</tr>
لاحظ في
استخدامنا للكود استخدمنا الكلمه ( checked ) , وهذا معناه انه عندما تقوم
برؤية الصفحه , سوف يكون هذا الاختيار معلم
نوع مربع الاختيار ( check box ) : هذاالنوع يمكنك من اختيار اكثر من خيار في وقت واحد , مثل الهوايات , او
مواصفات معينه تريدها في سيارتك المستقبليه , ارجع الى محرر الاكواد واكتب
التالي ( اكمل على الكود السابق ) :
PHP كود :
<tr>
<td width="107" align="center">الهوايات</td>
<td width="181" align="right">
<input type="checkbox" name ="read" value="القراءة">القراءة<br>
<input type="checkbox" name="write" value="الكتابة">الكتابة<br>
<input type="checkbox" name="draw" value="الرسم">الرسم<br>
<input type="checkbox" name="prog" value="البرمجة">البرمجة</td>
</tr>
نوع قائمة الاختيار ( select ) : هنا , تستطيع اختيار شيئ , من اشياء موجوده مسبقا , مثل اللغه الافتراضيه ,
هل تريدها العربية او الانجليزية , ولدينا نوعان منها :
النوع الاول : اختيار شيء واحد فقط (
يمكن اختيار شيئ واحد فقط من الموجود ) , ارجع الى محرر الاكواد واكتب
التالي ( اكمل على الكود السابق ) :
PHP كود :
<tr>
<td width="107" align="center">اللغة المفضلة</td>
<td width="181" align="right">
<select size="1" name="lang">
<option selected>العربية</option>
<option>الأنجليزية</option>
</select></td>
</tr>
النوع الثاني : اختيار اكثر من شيئ في
وقت واحد ( يمكن اختيار اكثر من شيئ واحد من الموجود ) , ارجع الى محرر
الاكواد واكتب التالي ( اكمل على الكود السابق ) :
PHP كود :
<tr>
<td width="107" align="center">المهارات</td>
<td width="181" align="right">
<select size="4" name="skill" multiple>
<option selected>البرمجة</option>
<option>التصميم</option>
<option>النحت</option>
<option>كرة القدم</option>
<option>السياحة</option>
</select></td>
</tr>
لاحظ هنا اننا جعلنا الاختيار يكون اكثر من واحد عن طريق الكلمه
( multiple ) نوع حقل النصوص ( textarea ) : في هذا النوع , نقوم بجعل المستخدم يقوم بكتابة كلمات كثيرة , مثل معلومات
شخصيه عن نفسه , او رساله يحب ان يوجهها الى الموقع ( اذا كنت تكتب في
منتديات فمكان كتابة محتوى الموضوع يعتبر حقل نصوص ) , ارجع الى محرر
الاكواد وقم بكتابة التالي , ( اكمل على لكود السابق ) :
PHP كود :
<tr>
<td width="107" align="center">معلومات عن نفسك</td>
<td width="181" align="right">
<textarea rows="5" name ="info" cols="20"></textarea></td>
</tr>
زر الارسال ( submit ) : بعدما ينتهي المستخدم من تعبئة البيانات المتطلبه , يجب ان يكون هناك
ازرار يقوم بالنقر عليه لكي نتحقق من صحة البيانات , او لنقوم بتسجيله
لدينا او غير ذلك , ارجع الى محرر الاكواد وقم بكتابة التالي ( اكمل على
الكود السابق ) :
PHP كود :
<tr>
<td width="288" align="center" colspan="2">
<input type="submit" value="ارسال" name="send"></td>
</tr>
</table>
</form>
</body>
</html>
مثال تطبيقي : الان قم بحفظ الملف وقم بتشغيله , ولاحظ ان ناتجك سوف يكون التالي :
مثال حى نوع كلمة المرور ( password ) : ترى في كثير من المنتديات , او عندما تقوم بتسجيل الكتروني جديد ,
انه عندما تختار كلمة المرور , لا تظهر كلمة المرور , وانما تظهر على شكل
كرات سوداء , اليس ذلك صحيحا ؟ فكيف نقوم بعمل هذا النوع ؟ الطريقه هي
كالتالي :
فقط في نوع النموذج
نكتب العباره password وسوف نحصل على حقل لكلمة المرور
- سؤال
على الدرس :
- قم بكتابة الكود السابق كاملا (
النموذج ) عن طريق دمجه مع لغة PHP , في الاعلى قمنا بكتابته ب كود HTML
ومنفصلا عن PHP , حاول الان كتابته مع PHP ( راجع الدرس السابع )
</li>
<li>الـــدرس
الــقادم :
- سوف نقوم في الدرس القادم بإرسال النموذج الذي قمنا
بعمله هنا الى صفحة PHP , ومحاولة التحقق من المعلومات المدخلة والكثير من
الاشياء الممتعه , هل تشوقت الى المعرفه ؟ فقط انتظر الدرس القادم
</li>