الدرس السادس: النماذج (2)

تعرفنا في الدرس السابق على النموذج وبعض عناصر الإدخال كإدخال نص وبعض الأزرار، وسنتعرف اليوم على بعض الإضافات الجديدة كإضافة مجموعة من الخيارات وعناصر التحديد وغيرها. وكما سنناقش اليوم بعض الوسوم الجديدة وسنتعرف على خصائص إضافية للوسم <input/> :


وسومنا الجديدة في هذا الدرس:وسم البداية <select> وسم النهاية </select> 
مهمته يستخدم لاختيار خيار واحد فقط من ضمن الخيارات المدرجة ضمن قائمة ( options)

وسم البداية <textarea> وسم النهاية </textarea> 
مهمته يستخدم لإدراج نطاق للنص بأبعاد محددة والكتابة ضمنه.

أما خصائص الوسم <input/> فهي:
الخاصية : "Type = "checkbox
مهمتها لادراج مربع اختيار (خيارات متعددة).
الخاصية : "Type = "radio
مهمتها لادراج مربع اختيار (خيار واحد فقط). 

لنا خد مثال عن القائمة المسدلة:
select name = "rating" >
< option selected = "selected">Amazing-- >
< option>5</option >
< option>4 >
< 3</option >
< option>2</option >
< option>1</option >
< /select >

حيث ينتج لدينا قائمة مسدلة من الخيارات المكتوبة (Amazing, 1, 2, 3, 4, 5) , والوسم<option> يستخدم لاضافه خيار جديد ضمن القائمة المسدلة.
 وكما نلاحظ وجود الخاصية "selected = "selected ضمن الخيار الأول، وهذا يعني أن القيمة الأولى (Amazing) ستكون هي القيمة الافتراضية.


- والآن لنأخذ مثالا عن إدراج نطاق بأبعاد محددة والكتابة ضمنه:

<textarea name = "comments" rows = "4" cols = "36">Enter comments
here.</textarea>
حيث تمثل الخاصياتنا cols & rows أبعاد هذا النطاق.

سنقوم الآن ببناء صفحتنا الثانية باستخدام ال Form:
<html>
<head>
<title>Form2</title>
</head>
<body>
<h1>IT4WEBS <br> Feedback :</h1>
<p>Please fill out this form to help us improve our website:</p>
<form method = "post" action = ""><p>
<strong>Things you liked in our web site:</strong><br />
<label>Site design
<input name = "thingsliked" type = "checkbox" value = "Design" /></label>
<label>Links
<input name = "thingsliked" type = "checkbox" value = "Links" /></label>
<label>Ease of use
<input name = "thingsliked" type = "checkbox" value = "Ease" /></label>
<label>Images
<input name = "thingsliked" type = "checkbox" value = "Images" /></label>
<label>Source code
<input name = "thingsliked" type = "checkbox" value = "Code" /></label>
</p>

<p>
<strong>How did you get to our site?:</strong><br />
<label>Search engine
<input name = "howtosite" type = "radio" value = "search engine" checked =
"checked" /></label>
<label>Links from another site
<input name = "howtosite" type = "radio" value = "link" /></label>
<label>from facebook
<input name = "howtosite" type = "radio" value = "facebook" /></label>
<label>Reference in a book
<input name = "howtosite" type = "radio" value = "book" /></label>
<label>Other
<input name = "howtosite" type = "radio" value = "other" /></label>
</p>

<p>
<label>Rate our site:
<select name = "rating">
<option selected = "selected">Amazing</option>
<option>5</option>
<option>4</option>
<option>3</option>
<option>2</option>
<option>1</option>
</select>
</label>
</p>

<p><label>Comments:<br />
<textarea name = "comments" rows = "4" cols = "36">Enter comments
here.</textarea>
</label></p>

<p>
<input type = "submit" value = "Submit" />
<input type = "reset" value = "Clear" />
</p>

</form>
</body>
</html>

وسيكون الخرج (ما يظهر للمستخدم عند فتح الصفحة) على النحو التالي:
ومهمتك هذه المرة:
إنشاء صفحة لمدرسة خاصة تقوم بتدريس كل المراحل (روضة - حلقة أولى - حلقة ثانية - ثانوي)، حيث يقوم الطالب باختيار إحدى هذه المراحل عن طريق radio ، ويختار المواد المفضلة لديه ( Arabic, Math, Science,… ) عن طريق Checkbox، مع إمكانية كتابة الملاحظات ضمن إطار خاص بهذا الغرض، وبالنهاية يجب أن نضيف زر لإرسال هذه المعلومات إلى إدارة المدرسة.

إرسال الوظائف:
ضع ملف الكود و الصور في ملجد ثم اضغطه باستخدام برنامج Winrar واحفظ الملف باسمك الكامل ثم ارسله الى الايميل التالي: اضغط هنا
او يمكنك نسخ الايميل من هنا "k-alhumsi@hotmail.com " ولصقه في المتصفح الخاص بك

الشهادة تعطى فقط للاشخاص الذين أتموا الوظائف بغض النظر اذا فيها أخطاء ام لا

أحدث أقدم

اعلان بداية المقال

اعلان اخر المقال