تحديث آخر نسخة 1.8.37

تقييم الموضوع :
  • 0 أصوات - بمعدل 0
  • 1
  • 2
  • 3
  • 4
  • 5
الدرس التاسع: انواع النماذج وطريقة كتابتها
#1
بسم الله الرحمن الرحيم
  • متطلبات قبل البدأ :
    • مراجعة الدرس السابق , مع محاولة القراءه عن النماذج وانواعها من مواقع اخرى.
  • اهداف الدرس:
    • انواع مدخلات النماذج
    • نوع الكتابه ( text )
    • نوع ازرار الاختيار ( radio )
    • نوع مربع الاختيار ( check box )
    • نوع حقل النصوص ( textarea )
    • نوع زر الارسال ( submit )
    • مثال تطبيقي
    • نوع كلمة المرور ( password )


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

[صورة: l9e1.gif]

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

  1. مربع كتابه ( text ) لتكتب به اسمك الاول
  2. قائمة اختيار ( select ) لتقوم بإختيار اللغه منها
  3. ازرار اختيار ( radio ) لتقم بإختيار الجنس
--------------------------

لنقم برؤية الانواع الاخرى ,

ازرار الاختيار :

[صورة: l9e2.gif]

حقل النصوص :

[صورة: l9e3.gif]

نوع الكتابه ( 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

مثال تطبيقي :

الان قم بحفظ الملف وقم بتشغيله , ولاحظ ان ناتجك سوف يكون التالي :

[صورة: l9e11.gif]

مثال حى

نوع كلمة المرور ( password ) :

ترى في كثير من المنتديات , او عندما تقوم بتسجيل الكتروني جديد , انه عندما تختار كلمة المرور , لا تظهر كلمة المرور , وانما تظهر على شكل كرات سوداء , اليس ذلك صحيحا ؟ فكيف نقوم بعمل هذا النوع ؟ الطريقه هي كالتالي :

[صورة: l9e12.gif]

فقط في نوع النموذج نكتب العباره password وسوف نحصل على حقل لكلمة المرور

  • سؤال على الدرس :
    1. قم بكتابة الكود السابق كاملا ( النموذج ) عن طريق دمجه مع لغة PHP , في الاعلى قمنا بكتابته ب كود HTML ومنفصلا عن PHP , حاول الان كتابته مع PHP ( راجع الدرس السابع )
  • الـــدرس الــقادم :
    • سوف نقوم في الدرس القادم بإرسال النموذج الذي قمنا بعمله هنا الى صفحة PHP , ومحاولة التحقق من المعلومات المدخلة والكثير من الاشياء الممتعه , هل تشوقت الى المعرفه ؟ فقط انتظر الدرس القادم Smile












الرد
شكر من طرف :


الردود في هذا الموضوع
الدرس التاسع: انواع النماذج وطريقة كتابتها - بواسطة Pepo - 2007-03-25, 07:33 AM

التنقل السريع :


يقوم بقرائة الموضوع: بالاضافة الى ( 1 ) ضيف كريم