| تسجيل عضوية جديدة | استرجاع كلمة المرور ؟
Follow us on Twitter Follow us on Facebook Watch us on YouTube
النتائج 1 إلى 5 من 5

  1. #1

    الصورة الرمزية أبو آسر

    رقم العضوية : 129815

    تاريخ التسجيل : 29Sep2012

    المشاركات : 3,491

    النوع : ذكر

    الاقامة : Earth

    السيارة: Just one car

    السيارة[2]: Renault Logan 2013 Auto

    الحالة : أبو آسر غير متواجد حالياً

    Lightbulb دورة تصميم وتطوير مواقع الإنترنت للمبتدئين [html] (Forms & Input) م#11 - Facebook Twitter whatsapp انشر الموضوع فى :

    hasad">



    سنتعرف في درس اليوم على وسوم الـ Forms و Input وسيتم توضيح وظائفها في السطور التالية

    وسم Form
    <form>
    وهو وسم يستخدم لإنشاء حقول إدخال (Fields) أو أزرار اختيار (Buttons) لتمرير بعض البيانات إلى السيرفر المرتبط بالموقع لذلك فهو لابد وأن يرتبط بلغة برمجة مثل PHP أو ASP.NET حتى تتم عملية تمرير البيانات إلى السيرفر.
    وهذه الحقول والأزرار تحتوي على عدة أشكال ، فمنها ما يحتوي على حقل نصي (Text field) ومنها ما يحتوي على كلمة سر (Password) ومنها ما يحتوي على أزرار اختيار (Checkboxes) أو (Radio Buttons) ومنها ما يحتوي على قوائم للاختيار من بينها (Select lists) وغير ذلك.

    وسم Input
    <input>
    وهو الوسم الرئيسي داخل الـ Form - ويلاحظ أنه من الوسوم الفارغة التي تتكون من وسم واحد فقط للفتح والإغلاق - فإذا أردت كتابة كود لعمل حقل إدخال أو زر اختيار ؛ فيجب كتابة وسم <form> أولا ثم بداخله وسم <input> ثم تحدد نوع حقل الإدخال أو زر الاختيار المطلوب من خلال سمة النوع Type التي سنتناولها بالتفصيل كما يلي:

    الحقول النصية Text Fields
    وتستخدم لعمل حقل إدخال لنص معين مثل "الاسم الأول" و"الاسم الأخير" على سبيل المثال كما في المثال التالي:
    كود:
    <form>
    First name: <input type="text" name="firstname" />
    <br />
    Last name: <input type="text" name="lastname" />
    </form>
    النتيجة:


    يلاحظ في الكود السابق نوعين من الوسوم:
    type: ويستخدم لتحديد نوع حقل الإدخال أو زر الاختيار.
    name: ويستخدم لوصف الحقل أو الزر حتى يمكن العثور عليه بسهولة وتحديده بدقة في قاعدة البيانات المرتبطة بالسيرفر.

    حقول كلمة السر Password Fields
    وتستخدم لكتابة كلمة سر وعند كتابتها تظهر الحروف والأرقام على شكل نقاط سوداء مستديرة لحماية الخصوصية والسرية.
    كود:
    <form>
    Password: <input type="password" name="pwd" />
    </form>
    النتيجة:


    أزرار الاختيار Radio Buttons
    وتستخدم لتقديم عدة اختيارات يجب اختيار خيار واحد فقط من بينها.
    كود:
    <form>
    <input type="radio" name="sex" value="male" />Male
    <br />
    <input type="radio" name="sex" value="female" />Female
    </form>
    النتيجة:


    ويلاحظ وجود سمة إضافية (Attribute) وهي value

    صناديق الاختيار Checkboxes
    وهي على عكس Radio Buttons فهي تسمح باختيار أكثر من خيار في نفس الوقت وأحيانا عدم اختيار أي خيار.
    كود:
    <form>
    <input type="checkbox" name="vehicle" value="Bike" />Football
    <br />
    <input type="checkbox" name="vehicle" value="Car" />Running 
    <br />
    <input type="checkbox" name="vehicle" value="Car" />Bicycling
    <br />
    <input type="checkbox" name="vehicle" value="Car" />Swimming 
    </form>
    النتيجة:


    زر التقديم Submit Button
    ويستخدم لتقديم بيانات معينة إلى صفحة محددة يتم تعيينها من خلال أحد سمات وسم Form وهو action والتي تقوم بإرسال هذه البيانات إلى هذه الصفحة عند الضغط على زر submit
    كود:
    <form name="input" action="http://www.boraqsoft.com/" method="get" />
    Username: <input type="text" name="user" />
    <input type="submit" value="Submit" />
    </form>
    النتيجة:


    ويلاحظ أننا استخدمنا وسمي input أحدهما لحقل الإدخال والآخر لزر submit وذلك غير السمات الملحقة بوسم form ذاته وهي name و action و method

    وسم Select
    <select>
    وهو مشابه لوسم <input> ويستخدم عند الرغبة في إنشاء قائمة منسدلة لاختيار أحد الخيارات من بينها

    قائمة الاختيار Select list
    وهي قائمة مكونة من عدة اختيارات يقوم المستخدم باختيار أحدها ويندرج كل خيار منها تحت وسم <option> كما في المثال التالي:
    كود:
    <form action="">
    <select name="cars">
    <option value="renault">Renault</option>
    <option value="mercedes">Mercedes</option>
    <option value="toyota">Toyota</option>
    <option value="hyundai">Hyundai</option>
    </select>
    </form>
    النتيجة:


    هذه هي أهم وسوم الـ Forms الشائعة الاستخدام ، وتوجد وسوم أخرى لها استخدامات متعددة سنضرب أمثلة لها وسأترك لك فهم وظيفتها بنفسك !

    كود:
    <textarea rows="10" cols="30">
    Boraqsoft is a company that gives many web solutions.
    </textarea>

    كود:
    <form action="">
    <input type="button" value="Click Here !" />
    </form>

    كود:
    <form action="">
    <fieldset>
    <legend>Personal information:</legend>
    Name: <input type="text" size="30">
    <br />
    E-mail: <input type="text" size="30">
    <br />
    Date of birth: <input type="text" size="10">
    </fieldset>
    </form>

    كود:
    <form action="MAILTO:boraqsoft@gmail.com" method="post" enctype="text/plain">
    Name:
    <br />
    <input type="text" name="name" value="your name">
    <br />
    E-mail:
    <br />
    <input type="text" name="mail" value="your email">
    <br />
    Comment:
    <br />
    <input type="text" name="comment" value="your comment" size="50">
    <br />
    <input type="submit" value="Send">
    <input type="reset" value="Reset">
    </form>

    الدرس السابق
    http://www.nilemotors.net/Nile/41883...ocks-10-a.html

    Freelancer Web Designer & E-marketer
    ( --- جــمــيــــع مــوضــوعـــاتـي --- )


  2. #2

    الصورة الرمزية canner

    رقم العضوية : 24572

    تاريخ التسجيل : 09Nov2008

    المشاركات : 1,090

    النوع : ذكر

    الاقامة : World's Mother

    السيارة: NONE

    السيارة[2]: Nissan Sunny

    دراجة بخارية: NONE

    الحالة : canner غير متواجد حالياً

    افتراضي -

    جزاك الله خيرا و تم التطبيق

    سؤال ازاى اشيل الشرط اللى فى المستطيل الاحمر دى؟




  3. #3

    الصورة الرمزية أبو آسر

    رقم العضوية : 129815

    تاريخ التسجيل : 29Sep2012

    المشاركات : 3,491

    النوع : ذكر

    الاقامة : Earth

    السيارة: Just one car

    السيارة[2]: Renault Logan 2013 Auto

    الحالة : أبو آسر غير متواجد حالياً

    افتراضي -

    غريبة أوي موضوع الشرط دي
    انت متأكد إنك شغال على جوجل كروم ؟

    Freelancer Web Designer & E-marketer
    ( --- جــمــيــــع مــوضــوعـــاتـي --- )


  4. #4

    الصورة الرمزية canner

    رقم العضوية : 24572

    تاريخ التسجيل : 09Nov2008

    المشاركات : 1,090

    النوع : ذكر

    الاقامة : World's Mother

    السيارة: NONE

    السيارة[2]: Nissan Sunny

    دراجة بخارية: NONE

    الحالة : canner غير متواجد حالياً

    افتراضي -

    هى فى الصورة ببرنامج اسمه سبارك بس دلوقتى فتحتها بجوجل كروم و برضه الشرط موجودة


  5. #5

    الصورة الرمزية أبو آسر

    رقم العضوية : 129815

    تاريخ التسجيل : 29Sep2012

    المشاركات : 3,491

    النوع : ذكر

    الاقامة : Earth

    السيارة: Just one car

    السيارة[2]: Renault Logan 2013 Auto

    الحالة : أبو آسر غير متواجد حالياً

    افتراضي -

    hasad">

    اقتباس المشاركة الأصلية كتبت بواسطة canner مشاهدة المشاركة
    هى فى الصورة ببرنامج اسمه سبارك بس دلوقتى فتحتها بجوجل كروم و برضه الشرط موجودة
    غريبة أوي أكيد في حاجة غلط لأن الكروم مش بيظهر فيه الشرط دي خالص لأن مفيش أي أكواد أو شرط مكتوبة في الكود تطلع شرط
    غالبا في حاجة مش متظبطة عندك هي إيه مش عارف

    Freelancer Web Designer & E-marketer
    ( --- جــمــيــــع مــوضــوعـــاتـي --- )



 

المواضيع المتشابهه

  1. دورة تصميم وتطوير مواقع الإنترنت للمبتدئين [html] (وسوم الجداول) م#9
    بواسطة أبو آسر في المنتدى المنتــــــدى الاجتمــاعى
    مشاركات: 5
    آخر مشاركة: 28-04-2014, 06:26 PM
  2. دورة تصميم وتطوير مواقع الإنترنت للمبتدئين [html] (وسوم القوائم) م#8
    بواسطة أبو آسر في المنتدى المنتــــــدى الاجتمــاعى
    مشاركات: 5
    آخر مشاركة: 27-04-2014, 02:08 PM
  3. دورة تصميم وتطوير مواقع الإنترنت للمبتدئين [html] (وسم الروابط) م#7
    بواسطة أبو آسر في المنتدى المنتــــــدى الاجتمــاعى
    مشاركات: 8
    آخر مشاركة: 24-04-2014, 03:47 PM
  4. دورة تصميم وتطوير مواقع الإنترنت للمبتدئين [html] (الفرق بين HTML و XHTML)م#3
    بواسطة أبو آسر في المنتدى المنتــــــدى الاجتمــاعى
    مشاركات: 9
    آخر مشاركة: 17-04-2014, 08:45 PM
  5. دورة تصميم وتطوير مواقع الإنترنت للمبتدئين [html] (مقدمة) #2
    بواسطة أبو آسر في المنتدى المنتــــــدى الاجتمــاعى
    مشاركات: 20
    آخر مشاركة: 16-04-2014, 08:30 PM

الكلمات الدلالية لهذا الموضوع

المفضلات

المفضلات

ضوابط المشاركة

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •  

Content Relevant URLs by vBSEO 3.6.0 PL2