رقم العضوية : 129815
تاريخ التسجيل : 29Sep2012
المشاركات : 3,491
النوع : ذكر
الاقامة : Earth
السيارة: Just one car
السيارة[2]: Renault Logan 2013 Auto
الحالة :
سنتعرف في درس اليوم على وسوم الـ 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
( --- جــمــيــــع مــوضــوعـــاتـي --- )
رقم العضوية : 24572
تاريخ التسجيل : 09Nov2008
المشاركات : 1,090
النوع : ذكر
الاقامة : World's Mother
السيارة: NONE
السيارة[2]: Nissan Sunny
دراجة بخارية: NONE
الحالة :
رقم العضوية : 129815
تاريخ التسجيل : 29Sep2012
المشاركات : 3,491
النوع : ذكر
الاقامة : Earth
السيارة: Just one car
السيارة[2]: Renault Logan 2013 Auto
الحالة :
غريبة أوي موضوع الشرط دي
انت متأكد إنك شغال على جوجل كروم ؟
Freelancer Web Designer & E-marketer
( --- جــمــيــــع مــوضــوعـــاتـي --- )
رقم العضوية : 24572
تاريخ التسجيل : 09Nov2008
المشاركات : 1,090
النوع : ذكر
الاقامة : World's Mother
السيارة: NONE
السيارة[2]: Nissan Sunny
دراجة بخارية: NONE
الحالة :
هى فى الصورة ببرنامج اسمه سبارك بس دلوقتى فتحتها بجوجل كروم و برضه الشرط موجودة
رقم العضوية : 129815
تاريخ التسجيل : 29Sep2012
المشاركات : 3,491
النوع : ذكر
الاقامة : Earth
السيارة: Just one car
السيارة[2]: Renault Logan 2013 Auto
الحالة :
المفضلات