بسم الله الرحمن الرحيم
- متطلبات قبل البدأ :
- مراجعة الدرس السابق , مع محاولة القراءه عن النماذج وانواعها من مواقع اخرى.
- اهداف الدرس:
- انواع مدخلات النماذج
- نوع الكتابه ( text )
- نوع ازرار الاختيار ( radio )
- نوع مربع الاختيار ( check box )
- نوع حقل النصوص ( textarea )
- نوع زر الارسال ( submit )
- مثال تطبيقي
- نوع كلمة المرور ( password )
انواع مدخلات النماذج :
لنقم بمعرفة ما يحتويه النموذج السابق , تابع الارقام ولاحظ التالي :
- مربع كتابه ( text ) لتكتب به اسمك الاول
- قائمة اختيار ( select ) لتقوم بإختيار اللغه منها
- ازرار اختيار ( radio ) لتقم بإختيار الجنس
--------------------------
لنقم برؤية الانواع الاخرى ,
ازرار الاختيار :
حقل النصوص :
نوع الكتابه ( text ) :
هذا النوع لكتابة النصوص القصيره , مثلما رأينا في الاعلى , الاسم , او البريد الالكتروني وغيرها , كيف نقوم بإنشاء هذا النوع , افتح محرر الاكواد وقم بكتابة التالي :
<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>
هذا النوع يكون لاختيار من بعض المعلومات المتوفره , مثلا الجنس , ذكر او انثى , ارجع الى محرر الاكواد واكتب التالي ( اكمل على الكود السابق ) :
<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 ) :
هذاالنوع يمكنك من اختيار اكثر من خيار في وقت واحد , مثل الهوايات , او مواصفات معينه تريدها في سيارتك المستقبليه , ارجع الى محرر الاكواد واكتب التالي ( اكمل على الكود السابق ) :
<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>
هنا , تستطيع اختيار شيئ , من اشياء موجوده مسبقا , مثل اللغه الافتراضيه , هل تريدها العربية او الانجليزية , ولدينا نوعان منها :
النوع الاول : اختيار شيء واحد فقط ( يمكن اختيار شيئ واحد فقط من الموجود ) , ارجع الى محرر الاكواد واكتب التالي ( اكمل على الكود السابق ) :
<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>
اختيار اكثر من شيئ في وقت واحد ( يمكن اختيار اكثر من شيئ واحد من الموجود ) , ارجع الى محرر الاكواد واكتب التالي ( اكمل على الكود السابق ) :
<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 ) :
في هذا النوع , نقوم بجعل المستخدم يقوم بكتابة كلمات كثيرة , مثل معلومات شخصيه عن نفسه , او رساله يحب ان يوجهها الى الموقع ( اذا كنت تكتب في منتديات فمكان كتابة محتوى الموضوع يعتبر حقل نصوص ) , ارجع الى محرر الاكواد وقم بكتابة التالي , ( اكمل على لكود السابق ) :
<tr>
<td width="107" align="center">معلومات عن نفسك</td>
<td width="181" align="right">
<textarea rows="5" name ="info" cols="20"></textarea></td>
</tr>
بعدما ينتهي المستخدم من تعبئة البيانات المتطلبه , يجب ان يكون هناك ازرار يقوم بالنقر عليه لكي نتحقق من صحة البيانات , او لنقوم بتسجيله لدينا او غير ذلك , ارجع الى محرر الاكواد وقم بكتابة التالي ( اكمل على الكود السابق ) :
<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 ( راجع الدرس السابع )
الـــدرس الــقادم :
- سوف نقوم في الدرس القادم بإرسال النموذج الذي قمنا بعمله هنا الى صفحة PHP , ومحاولة التحقق من المعلومات المدخلة والكثير من الاشياء الممتعه , هل تشوقت الى المعرفه ؟ فقط انتظر الدرس القادم
