Lost City
عانقت جدران مدينتنا
عطر قدومك ... وتزيّنت
مساحاته بأعذب عبارات الود والترحيب
اذا كنت واحدا من سكانها فتفضل بالدخول اليها فهي بانتظارك
و ان كنت زائرا جديدا توجه نحو مكتب التسجيل و خذ مفاتيح بيتك
لتتعرف على جيرانك و اذا حصل و ضعت في مدينتنا الجا الى مكتب الاستعلامات
نرجو لك قضاء وقت ممتع
بمنتديات LOst ciTY

Lost City


 
الرئيسيةالرئيسية  س .و .جس .و .ج  بحـثبحـث  الأعضاءالأعضاء  المجموعاتالمجموعات  التسجيلالتسجيل  دخولدخول  

شاطر | 
 

 انواع النماذج وطريقة كتابتها

اذهب الى الأسفل 
كاتب الموضوعرسالة
Anneliese
عمدة المدينة
عمدة المدينة
avatar

الجنس الجنس : انثى
العمر العمر : 23
عدد المساهمات عدد المساهمات : 5370
نقاط نقاط : 20538

مُساهمةموضوع: انواع النماذج وطريقة كتابتها    السبت 10 يوليو - 6:30



بسم الله الرحمن الرحيم


  • متطلبات
    قبل البدأ :

    • مراجعة الدرس السابق , مع محاولة القراءه عن النماذج
      وانواعها من مواقع اخرى.
    </li>
  • اهداف الدرس:

    • انواع
      مدخلات النماذج
    • نوع الكتابه ( text )
    • نوع ازرار
      الاختيار ( radio )
    • نوع مربع الاختيار ( check box )
    • نوع
      حقل النصوص ( textarea )
    • نوع زر الارسال ( submit )
    • مثال
      تطبيقي
    • نوع كلمة المرور ( password )
    </li>


انواع مدخلات النماذج :



لنقم بمعرفة ما يحتويه النموذج السابق ,
تابع الارقام ولاحظ التالي :


  1. مربع كتابه ( text
    ) لتكتب به اسمك الاول
  2. قائمة اختيار ( select ) لتقوم بإختيار
    اللغه منها
  3. ازرار اختيار ( 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 وسوف نحصل على حقل لكلمة المرور


  • سؤال
    على الدرس :

    1. قم بكتابة الكود السابق كاملا (
      النموذج ) عن طريق دمجه مع لغة PHP , في الاعلى قمنا بكتابته ب كود HTML
      ومنفصلا عن PHP , حاول الان كتابته مع PHP ( راجع الدرس السابع )
    </li>
<li>الـــدرس
الــقادم :

  • سوف نقوم في الدرس القادم بإرسال النموذج الذي قمنا
    بعمله هنا الى صفحة PHP , ومحاولة التحقق من المعلومات المدخلة والكثير من
    الاشياء الممتعه , هل تشوقت الى المعرفه ؟ فقط انتظر الدرس القادم
</li>
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو http://chobits.tk
 
انواع النماذج وطريقة كتابتها
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
Lost City :: المكتبة الإلكترونية :: نقاش عام حول PHP و MYSQL-
انتقل الى: