سيكون هذا الدرس هو التكملة لدرس السابق وفيه سنتعرف على جزئيات ثانية غير الوسم <input>
في بعض المواقع والخاصة بإرسال الرسائل تعتمد على وسم يقوم بصنع مساحة تمكن المستخدم من كتابة النصوص الوسم هو
<textarea></textarea>
هذا الوسم عند انشاءه يظهر في صفحة الويب بهذا الشكل
فهذا المستطيل يملأ بالكتابة ويمكنك داخله من المتصفح يعني يكون في الأصل فارغ او يمكنك كتابة نص جاهز يكتب عند البرمجة مثل هذا الشيء
<textarea>hello</textarea>
وتكون النتيجة مثل هكذا
و التحكم بهذا الجدول يكون بعدة اكواد ومنها هذا الكود
rows="هنا يكتب رقم"
هذا الكود هو يحدد كم سطر سيكون طول الجدول ولكن لا يغير محدودية الكتابة بل طول الجدول امامك وفي مكان الرقم يكتب رقم كم سطر تريدونه والكود يكتب داخل وسم البداية في textarea بهذا الشكل
rows="5"
الكود الثاني يحدد كم عامود في الجدول اي كم حرف يمكنك كتابته في نفس السطر اي يحدد عرض الجدول والكود هو
cols="هنا يكتب رقم"
وهذا الكود مثل الذي سبقه الرقم تضعه في الخانة الموضحة ويوضع بعد textarea في وسم البداية
الكود الثالث او الكلمة هي readonly هذه تكتب في وسم البداية من textarea حيث يصبح الجدول قابل للقراءة لا يكتب فيه من قبل المستخدم وتكتب بهذا الشكل
<textarea readonly>
ملاحظة : يمكن كتابة جميع الأكواد في وسم البداية textarea وراء بعضها , انا فقط كنت اشرح الأكواد لا اقصد ان لا يمكن كتابة غير كود واحد في textarea
الشيء الثاني في هذا الدرس هو ال select و ال option فمثلاً عند كتابة هذين الوسمين
<select></select>
فسوف تظهر هذه النتيجة
هذا الشيء هو زر اختيار من خلاله تظهر قائمة تختار منها عند الضغط عليها والخيارات هي الوسوم
<option>هنا يكتب خيار</option>
<option>هنا يكتب خيار</option>
<option>هنا يكتب خيار</option>
الوسوم السابقة بين الوسمين
<select></select>
فتكون النتيجة هكذا
عند الضغط عليها تصبح هكذا
هذه يمكن تنسيقها بعدة اكواد التنسيقات على وسوم select و option اذا اتجهنا للوسم <select> فيمكن كتابة فيه عدة اكواد فمثلاً الكود
name="هنا يكتب الاسم"
الأسم هو الذي يرسل لسرفر عند ارسال النموذج له من اجل تعريف هذه القائمة
الكود الثاني هو لجعل القائمة غير قابلة للضغط عليها من اجل ذلك سنتكتب كلمة disabled لتصبح النتيجة مثل هذا الشكل
مثل ما سبق اصبح زر الأختيار بهذا الشكل وغير قابل للضغط عليه
نأتي الأن لما داخل الوسمين
<select></select>
فيمكن تنسيق الوسوم
<option>car</option>
<option>Bicycle</option>
<option>Motorcycle</option>
بعدة طرق مثلاً يمكن جعل واحدة من الخيارات هي التي تظهر قبل الضغط على زر القائمة مثال الفرق بين هذين الصورتين
هذا الشيء يمكن عمله بوضع كلمة selected في الوسم <option> بعد كلمة option بهذا الشكل
<option selected>Bicycle</option>
ايضاً يوجد كود هو يميز كل وسم option وقت ارسال النموذج كاملاً لسرفر هذا الكود هو
value="هنا يكتب اسم او رقم"
والكود السابق يكتب بالوسم <option> بهذا الشكل
<option value="هنا يكتب اسم او رقم">car</option>
ايضاً يوجد كود يمكن وضعه في option من اجل تعطيله سأعطيكم مثال
كلمة motorcycle اصبحت باهتة في الصورة الثانية اي اصبحت غير قابلة للضغط او اختيارها ويمكن ذلك بإضافة كلمة disabled في الوسم <option> بهذا الشكل
<option disabled>Motorcycle</option>
الآن عند كتابة عدة option فيمكن جمع مجموعة خيارات او option تحت اسم واحد مثل هكذا
يمكنك ذلك بوضع كل مجموعة وسوم
<option></option>
بين وسمين
<optgroup label="هنا يضع اسم للمجموعة">
</optgroup>
قائمة الخيارات في الصورة السابقة كتبت بهذه الاكواد
<select>
<optgroup label="Means of transport">
<option>car</option>
<option>Bicycle</option>
<option>Motorcycle</option>
</optgroup>
<optgroup label="Electronic Devices">
<option>Computer</option>
<option>Mobile</option>
</optgroup>
</select>
وايضاً يمكن ان نجعل لمجموعة معينة من وسوم option ان تكون غير قابلة للأختيار كله يمكن ذلك بوضع كلمة disabled في الوسم <optgroup> بهذا الشكل
<optgroup disabled>
ويوجد شيء لم اتكلم عنه في الجزء الأول من النماذج وهو شيء يتعلق بالبرمجة بعيد عن لغة html وهو حقل ادخال مخفي لا يظهر للمستخدم العادي الوسم هو
<input type="hidden" value="هنا تضع قيمة معينة">
في نهاية الدرس سوف اتحدث عن ميزة التنسيق لكامل النموذج , مثال على التنسيق
الصورة السابقة اشرت بالأسهم على تنظيم النموذج من خلال وضع عناصر النموذج بمستطيلات وتسمية كل مستطيل بأسم معين
فعلت ذلك بوضع كل مجموعة عناصر من النموذج بين وسمين هما
<fieldset>
</fieldset>
وتحت وسم <fieldset> يكتب وسمين
<legend>هنا تكتب عنوان المستطيل</legend>
ليكون جميع الأكواد التي كتبتها لصناعة صفحة الويب في الصورة السابقة هي هذه الأكواد
<!DOCTYPE html>
<html>
<head>
<meta content=”text/html; charset=windows-1256″ http-equiv=”Content-Type” />
<meta content=”text/html; charset=windows-1256″ http-equiv=”Content-Type” />
<title>تجربة</title>
</head>
<body>
<form>
<fieldset>
<legend>personal information</legend>
<label>username</label>
<input type="text" maxlength="10">
<br>
<br>
<label>password</label>
<input type="password">
<br>
<br>
<br>
<label>Upload a Photo</label>
<br>
<input type="file">
<br>
<br>
<label>say something about yourself</label>
<br>
<textarea rows="5" cols="50" readonly></textarea>
<br>
</fieldset>
<br>
<fieldset>
<legend>other information</legend>
<label>Choose Browser</label>
<br>
<br>
<input type="radio" name="Browser" value="chrome"> chrome
<br>
<br>
<input type="radio" name="Browser" value="opera"> opera
<br>
<br>
<br>
<label>Why have</label>
<br>
<br>
<select>
<optgroup label="Means of transport">
<option>car</option>
<option selected>Bicycle</option>
<option disabled>Motorcycle</option>
</optgroup>
<optgroup disabled label="Electronic Devices">
<option>Computer</option>
<option>Mobile</option>
</optgroup>
<br>
</select>
<br>
<br>
</fieldset>
<fieldset>
<legend>Buttons singup</legend>
<input type="submit" value="singup">
<input type="reset">
<input type="checkbox">
</fieldset>
</form>
</body>
</html>
الذي باللون الأحمر و الأزرق هم الذين تكلمت عنهم الذين يضعون عناصر النموذج في جداول او مستطيلات
وبهذا اكون قد وصلت لنهاية الدرس ان شاء الله الدرس القادم هو خاتم هذه الدورة و السلام عليكم ورحمة الله وبركاته
الكاتب : OSAMA ALMOUSA
منشأ مواقع مهتم في جديد التقنية و المعلومات دارس عدة لغات برمجة ومن خلال هذا الموقع اقدم شروحات و دروس أتمنى ان تعجبكم
