أحدث المواضيع

تابعني على يوتيوب

إجمالي مرات مشاهدة الصفحة

خبراتي فى لغات البرمجه

85% HTML
90% CSS
85% Web-Design

الجمعة، 10 مارس 2017

الدرس (20) تعلم html : النماذج / form (الجزء الثاني)

النماذج / form
 بسم الله الرحمن الرحيم

سيكون هذا الدرس هو التكملة لدرس السابق وفيه سنتعرف على جزئيات ثانية غير الوسم <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” />
        <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>
الذي باللون الأحمر و الأزرق هم الذين تكلمت عنهم الذين يضعون عناصر النموذج في جداول او مستطيلات
وبهذا اكون قد وصلت لنهاية الدرس ان شاء الله الدرس القادم هو خاتم هذه الدورة و السلام عليكم ورحمة الله وبركاته
الدرس (20) تعلم html : النماذج / form (الجزء الثاني)

الدرس (20) تعلم html : النماذج / form (الجزء الثاني)





ليست هناك تعليقات:

إرسال تعليق

Translate

للمتابعة على مواقع التواصل الاجتماعي

تطبيق راسلني

جميع الحقوق محفوظة © أسامة الموسى