إعلان
دورة تطوير التطبيقات باستخدام لغة JavaScript في هذه الدورة ستتعلم لغة جافا سكريبت, استخدام مكتبة React.js, بناء API الموقع بواسطة Node.js, تطوير تطبيق جوال باستخدام React Native, و في نهاية الدورة ستتعلم تطوير تطبيق محادثة شبيه بتطبيق WhatsApp. تعلم الآن
دورة تطوير واجهات المستخدم في هذه الدورة ستتعلم لغة HTML و لغة CSS و لغة JavaScript. من ناحية التطبيق العملي ستتعلم طريقة بناء واجهة متجر إلكتروني مكون من ست صفحات, تحويل خمسة تصاميم PSD إلى صفحات ويب, بناء واجهة مستخدم تشبه موقع يوتيوب, بناء لوحة تحكم إحترافية. تعلم الآن
تطوير تطبيقات باستخدام لغة بايثون في هذه الدورة ستتعلم أساسيات البرمجة بلغة بايثون وصولاً إلى التعامل مع أشهر أطر العمل (Flask و Django) و ستتعلم كيف تبني متجر إلكتروني يمكن للمستخدمين البيع و الشراء من خلاله. تعلم الآن
دورة تطوير تطبيقات الويب باستخدام لغة PHP في هذه الدورة ستتعلم لغة PHP من الصفر, استخدام إطار العمل Laravel بشرح مفصّل و عملي, كيفية تطوير شبكة اجتماعية تشبه Instagram, بناء API لتطبيق جوال وفق أسلوب RESTful, تطوير موقع إعلانات مبوبة, تطوير نظام إدارة محتوى CMS كامل. تعلم الآن
دورة تطوير تطبيقات الويب باستخدام لغة Ruby في هذه الدورة ستتعلم البرمجة بلغة Ruby إنطلاقاً من أبسط المفاهيم وحتى بناء تطبيق حقيقي, إستخدام إطار العمل Ruby on Rails بشرح مفصّل و عملي, بناء تطبيق حقيقي عبارة عن شبكة اجتماعية تشبه تويتر, تطوير مجتمع الكتروني يشبه حسوب I/O. تعلم الآن
دورة علوم الحاسوب هذه الدورة معدة لتكون مدخل لعلوم الحاسوب و لغات البرمجة حيث ستتعرف فيها على أنظمة التشغيل و ستتعمق في نظام لينكس و في كيفية التعامل معه من خلال موجه الأوامر, بالإضافة إلى قواعد البيانات و أساسيات الشبكات و الخوادم و مبادئ الحماية والأمان في الويب. تعلم الآن

    HTML الوسم <input>

    تعريفه

    يعتبر الوسم <input> لعرض مكونات تفاعلية مثل مربع نص عادي, مربع نصي للبحث, مربع لإختيار تاريخ, مربع لإدخال رقم هاتف, زر عادي, زر إختيار, زر راديو, زر لاختيار لون و غيرها من الأشياء التي يمكن الحصول عليها بواسطته.

    أهم خاصية يجب إضافتها لهذا الوسم هي الخاصية type التي من خلالها يتم تحديد ما هو المكوّن الذي نريد الحصول عليه.
    بعد تحديد نوع المكون التي تريد الحصول عليها يصبج بإمكانك إضافة المزيد من الخصائص للمكوّن.

    دعم المتصفحات

    الجدول التالي يظهر المتصفحات التي تدعم الوسم <input>.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    مدعوم 12 1 مدعوم 1 1 مدعوم 4 مدعوم 1 مدعوم

    أنواع المكوّنات

    فيما يلي قمنا بذكر جميع أنواع المكوّنات ( Input Types ) التي يمكن الحصول عليها بواسطة الوسم <input>.


    1- النوع button

    للحصول على زر عادي بواسطة هذا الوسم نقوم بتحديد نوعه هكذا <input type="button">.

    مثال:   

    الجدول التالي يظهر المتصفحات التي تدعم هذا المكوّن.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    مدعوم 12 1 مدعوم 1 مدعوم 18 4 مدعوم مدعوم 1.0


    2- النوع checkbox

    للحصول على خانة إختيار بواسطة هذا الوسم نقوم بتحديد نوعه هكذا <input type="checkbox">.

    مثال:   

    الجدول التالي يظهر المتصفحات التي تدعم هذا المكوّن.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    مدعوم 12 مدعوم مدعوم مدعوم مدعوم مدعوم 4 مدعوم مدعوم مدعوم


    3- النوع color

    للحصول على زر مخصص لاختيار لون بواسطة هذا الوسم نقوم بتحديد نوعه هكذا <input type="color">.

    مثال:   

    الجدول التالي يظهر المتصفحات التي تدعم هذا المكوّن.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    20 14 29 12 12.1 4.4 25 27 12 12.2 1.5


    4- النوع date

    للحصول على خانة إختيار بواسطة هذا الوسم نقوم بتحديد نوعه هكذا <input type="date">.

    مثال:   

    الجدول التالي يظهر المتصفحات التي تدعم هذا المكوّن.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    20 12 57 11 غير مدعوم مدعوم مدعوم 57 11 5 مدعوم


    5- النوع datetime-local

    للحصول على حقل مخصص لاختيار التاريخ و الوقت بواسطة هذا الوسم نقوم بتحديد نوعه هكذا <input type="datetime-local">.

    مثال:   

    الجدول التالي يظهر المتصفحات التي تدعم هذا المكوّن.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    20 12 غير مدعوم 11 غير مدعوم مدعوم مدعوم مدعوم 11 مدعوم مدعوم


    5- النوع email

    للحصول على حقل مخصص لإدخال بريد إلكتروني بواسطة هذا الوسم نقوم بتحديد نوعه هكذا <input type="email">.

    مثال:   

    الجدول التالي يظهر المتصفحات التي تدعم هذا المكوّن.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    20 12 مدعوم 11 مدعوم ؟ ؟ 4 مدعوم 3.1 ؟


    5- النوع file

    للحصول على زر مخصص لاختيار ملف بواسطة هذا الوسم نقوم بتحديد نوعه هكذا <input type="file">.

    مثال:   

    الجدول التالي يظهر المتصفحات التي تدعم هذا المكوّن.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    1 12 1 11 1 مدعوم مدعوم 4 11 مدعوم مدعوم


    6- النوع hidden

    للحصول على حقل مخفي بواسطة هذا الوسم نقوم بتحديد نوعه هكذا <input type="hidden">.
    الفكرة هنا أن قيمة الوسم تكون غير ظاهرة و لكن يتم إرسالها للموقع عند النقر على زر إرسال البيانات.

    مثال:    هنا قمنا بعرض حقل و لكنه لا يظهر في الصفحة.

    الجدول التالي يظهر المتصفحات التي تدعم هذا المكوّن.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    1 12 1 2 1 مدعوم مدعوم 4 مدعوم مدعوم مدعوم


    7- النوع image

    للحصول على زر مخصص لإرسال البيانات يمكن إظهار صورة عليه بدل النص بواسطة هذا الوسم نقوم بتحديد نوعه هكذا <input type="image">.

    مثال:   

    الجدول التالي يظهر المتصفحات التي تدعم هذا المكوّن.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    مدعوم 12 مدعوم مدعوم مدعوم مدعوم ؟ مدعوم مدعوم مدعوم ؟


    8- النوع month

    للحصول على حقل مخصص لاختيار الشهر بواسطة هذا الوسم نقوم بتحديد نوعه هكذا <input type="month">.

    مثال:   

    الجدول التالي يظهر المتصفحات التي تدعم هذا المكوّن.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    20 12 غير مدعوم 11 غير مدعوم مدعوم مدعوم غير مدعوم مدعوم مدعوم مدعوم


    9- النوع number

    للحصول على حقل مخصص لإدخال عدد بواسطة هذا الوسم نقوم بتحديد نوعه هكذا <input type="number">.

    مثال:   

    الجدول التالي يظهر المتصفحات التي تدعم هذا المكوّن.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    مدعوم 12 مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم


    10- النوع password

    للحصول على حقل مخصص لإدخال كلمة مرور بواسطة هذا الوسم نقوم بتحديد نوعه هكذا <input type="password">.

    مثال:   

    الجدول التالي يظهر المتصفحات التي تدعم هذا المكوّن.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    1 12 1 2 1 ؟ مدعوم 4 مدعوم مدعوم مدعوم


    11- النوع radio

    للحصول على زر راديو بواسطة هذا الوسم نقوم بتحديد نوعه هكذا <input type="radio">.

    مثال:   

    الجدول التالي يظهر المتصفحات التي تدعم هذا المكوّن.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    مدعوم 12 مدعوم مدعوم مدعوم مدعوم مدعوم 4 مدعوم مدعوم مدعوم


    12- النوع range

    للحصول على شريط أفقي يتيح اختيار قيمة واحدة ضمن نطاق محدد بواسطة هذا الوسم نقوم بتحديد نوعه هكذا <input type="range">.

    مثال:   

    الجدول التالي يظهر المتصفحات التي تدعم هذا المكوّن.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    4 12 23 11 3.1 4.4 57 52 مدعوم 5.1 7.0


    13- النوع reset

    للحصول على زر مخصص لإعادة القيم الأولية في النموذج بواسطة هذا الوسم نقوم بتحديد نوعه هكذا <input type="reset">.

    مثال:   

    الجدول التالي يظهر المتصفحات التي تدعم هذا المكوّن.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    1 12 1 مدعوم 1 مدعوم مدعوم 4 مدعوم مدعوم مدعوم


    14- النوع search

    للحصول على زر مخصص للبحث (أي يظهر فيه خيار حذف كل النص المدخل دفعة واحدة عند البدء بالكتابة فيه) بواسطة هذا الوسم نقوم بتحديد نوعه هكذا <input type="search">.

    مثال:   

    الجدول التالي يظهر المتصفحات التي تدعم هذا المكوّن.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    5 12 4 10.6 5 مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم


    15- النوع submit

    للحصول على زر مخصص لإرسال بيانات النموذج بواسطة هذا الوسم نقوم بتحديد نوعه هكذا <input type="submit">.

    مثال:   

    الجدول التالي يظهر المتصفحات التي تدعم هذا المكوّن.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    1 12 1 مدعوم 1 مدعوم مدعوم 4 مدعوم مدعوم مدعوم


    16- النوع tel

    للحصول على حقل مخصص لإدخال رقم الهاتف بواسطة هذا الوسم مما يعني أن جهاز المستخدم (هاتفه) قد يظهر له لوحة الإدخال الخاصة بإدخال رقم هاتف عندما يحاول الكتابة فيه نقوم بتحديد نوعه هكذا <input type="tel">.

    مثال:   

    الجدول التالي يظهر المتصفحات التي تدعم هذا المكوّن.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    3 12 مدعوم 11 4 ≤37 18 مدعوم 11 3 1.0


    17- النوع text

    للحصول على حقل مخصص لإدخال نص عادي بواسطة هذا الوسم نقوم بتحديد نوعه هكذا <input type="text"> و هذا يعتبر النوع الإفتراضي للوسم في حال لم يتم تحديد نوعه.

    مثال:   

    الجدول التالي يظهر المتصفحات التي تدعم هذا المكوّن.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    1 12 1 مدعوم 1 مدعوم مدعوم 4 مدعوم مدعوم مدعوم


    18- النوع time

    للحصول على حقل مخصص لإدخال أو اختيار الوقت بواسطة هذا الوسم نقوم بتحديد نوعه هكذا <input type="time">.

    مثال:   

    الجدول التالي يظهر المتصفحات التي تدعم هذا المكوّن.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    20 12 57 10 غير مدعوم مدعوم 25 57 مدعوم مدعوم 1.5


    19- النوع url

    للحصول على حقل مخصص لإدخال رابط بواسطة هذا الوسم نقوم بتحديد نوعه هكذا <input type="url">.

    مثال:   

    الجدول التالي يظهر المتصفحات التي تدعم هذا المكوّن.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    1 12 مدعوم 11 مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم


    20- النوع week

    للحصول على حقل مخصص لإدخال أو اختيار الأسبوع بواسطة هذا الوسم نقوم بتحديد نوعه هكذا <input type="week">.

    مثال:   

    الجدول التالي يظهر المتصفحات التي تدعم هذا المكوّن.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    20 12 غير مدعوم 11 غير مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم

    خصائصه

    نود الإشارة إلى أننا سنذكر الخصائص المهمة و المستخدمة فعلياً و نتجاهل أي خصائص لا يوصى باستخدامها.


    الخاصية accept

    في حال كان نوع الوسم هو file يمكن إضافتها له لتحديد نوع الملفات التي يمكن للمستخدم أن يختارها في حاسوبه.
    عند ذكر نوع محدد من الملفات كقيمة للخاصية accept يجب وضع نقطة في أوله, و عند ذكر أكثر من نوع يجب وضع فاصلة بين كل نوعين.

    فيما يلي الطرق التي يمكن اتباعها لتحديد أنواع الملفات التي يمكن للمستخدم أن يختارها:

    • يمكن تحديد أنواع الملفات التي يمكنه اختيارها بشكل مباشر. مثال: accept=".jpg,.pdf,.doc"
    • يمكن تحديد أنه يمكنه اختيار ملف صوتي مهما كان نوعه على هذا النحو: accept="audio/*"
    • يمكن تحديد أنه يمكنه اختيار فيديو مهما كان نوعه على هذا النحو: accept="video/*"
    • يمكن تحديد أنه يمكنه اختيار صورة مهما كان نوعها على هذا النحو: accept="image/*"

    بالإضافة للطرق السابقة فإنه يمكن تحديد نوع عام و أنواع محددة أكثر.
    مثلاً يمكن السماح له باختيار صورة مهما كان نوعها أو ملف نوعه .pdf على هذا النحو accept="image/*, .pdf"

    مثال

    <input type="file" accept="image/*" value="Select Image">
    		

    جرب الكود



    الخاصية alt

    في حال كان نوع الوسم هو image يمكن إضافتها له لعرض نص في حال لم يستطع المتصفح عرض الصورة الموضوعة لأي سبب كان.

    مثال

    <input type="image" src="submit.PNG" alt="Save Changes">
    		

    جرب الكود



    الخاصية autocomplete

    في حال كان نوع الوسم هو text - search - url - tel - email - date - month - week - time - datetime-local - number - range - color - password يمكن إضافتها له لتفعيل الإكمال التلقائي فيه.

    مثال

    <input type="text" name="username" autocomplete>
    		

    جرب الكود



    الخاصية autofocus

    يمكن إضافتها للوسم لإعلام المتصفح أنه عند فتح الصفحة سيتم إعتبار أن المستخدم يقف عنده.
    ملاحظة: لا يجب وضع هذه الخاصية لأكثر من مكوّن في نفس الصفحة لأنه لا يمكن الوقوف عند أكثر من مكّون في وقت واحد.

    مثال

    <input type="submit" autofocus>
    		

    جرب الكود



    الخاصية capture

    في حال كان نوع الوسم هو file يمكن إضافتها له لتحديد أي كاميرا سيتم أو مايكروفون في جهازه سيتم اعمتادهم للحصول على الملف المطلوب.

    يجب تمرير إحدى القيم التالية لها لتحديد أي كاميرا أو مايكروفون سيتم إعتمادهم.

    القيمة معناها
    user للإشارة إلى الكاميرا أو المايكروفون الأمام.
    environment للإشارة إلى الكاميرا أو المايكروفون الخلفي.

    مثال

    <input type="file"  value="Select Video" accept="video/*" capture="environment">
    		

    جرب الكود



    الخاصية checked

    في حال كان نوع الوسم هو checkbox أو radio يمكن إضافتها له لجعله مختاراً بشكل إفتراضي.

    مثال

    <input type="checkbox" name="option1" value="arabic" checked>
    		

    جرب الكود



    الخاصية disabled

    يمكن إضافتها للوسم لإلغاء تفعيله مما يعني أنه سيظهر في الصفحة بلون باهت و لن يكون بإمكان المستخدم النقر عليه أو تغيير قيمته.

    ملاحظة: في حال كنت تريد تمرير قيمة له قبل جعله غير مفعّل قم بإضافة الخاصية autocomplete للوسم أيضاً لأن المتصفح قد لا يقبل تمرير قيمة له أو إرسال القيمة الموضوعة فيه في حال كان غير مفعلاً.

    مثال

    <input type="submit" value="Submit" disabled>
    		

    جرب الكود



    الخاصية form

    يمكن إضافتها للوسم لتحديد إلى أي نموذج هو تابع و هذا الأمر يمكنك فعله في حال كان الوسم موضوع خارج النموذج و تريد ربطه به.
    يجب وضع id النموذج الذي يتبع له كقيمة للخاصية.

    ملاحظة: الوسم يجب أن يكون تابع لنموذج واحد فقط.

    مثال

    <form id="loginForm">
    	..
    </form>
    
    
    <input type="submit" value="Login" form="loginForm">
    		

    جرب الكود



    الخاصية formaction

    في حال كان الوسم نوعه submit أو image يمكن إضافتها له لتحديد الرابط الذي سيتم إرسال البيانات المدخلة في النموذج إليه.
    يجب تمرير الرابط الذي سيتم إرسال البيانات المدخلة في النموذج له كقيمة لها.

    مثال

    <input type="submit" formaction="/tryit/submitted">
    		

    جرب الكود



    الخاصية formenctype

    في حال كان الوسم نوعه submit أو image يمكن إضافتها له لتحديد نوع البيانات التي سيتم إرسالها من النموذج.

    يجب تمرير إحدى القيم التالية المهيئة مسبقاً كقيمة لها لتحديد نوع البيانات التي سيتم إرسالها.

    القيمة معناها
    application/x-www-form-urlencoded هذه القيمة الإفتراضية التي توضع عنك في حال لم تستخدم هذه الخاصية.
    multipart/form-data في حال كان سيتم إرسال ملف (صورة مثلاً) من خلال النموذج.
    text/plain في حال كان سيتم إرسال نص عادي من خلال النموذج بهدف الإختبار و هذا أمر لا يجب فعله عند إرسال بيانات حقيقية.

    مثال

    <input type="submit" formenctype="application/x-www-form-urlencoded">
    		

    جرب الكود



    الخاصية formmethod

    في حال كان الوسم نوعه submit أو image يمكن إضافتها له لتحديد طريقة إرسال البيانات من النموذج إلى الموقع.
    يجب تمرير القيمة get أو القيمة post لهذه الخاصية لتحديد الطريقة التي سيتم فيها إرسال البيانات.

    مثال

    <input type="submit" formmethod="post">
    		

    جرب الكود



    الخاصية formtarget

    في حال كان الوسم نوعه submit أو image يمكن إضافتها له لتحديد أين سيتم فتح الصفحة التي ستتلقى البيانات المرسلة من النموذج.

    يجب تمرير إحدى القيم التالية المهيئة مسبقاً كقيمة لهذه الخاصية لتحديد أين سيتم فتح الرابط الذي يتم توجيه المستخدم إليه.

    القيمة معناها
    _self في حال أردت أن يتم فتح محتوى الرابط في نفس الصفحة المفتوحة حالياً (هذا الخيار الإفتراضي).
    _blank في حال أردت أن يتم فتح تبويب جديد في المتصفح و إظهار محتوى الرابط فيه.
    _top في حال أردت يتم فتح محتوى الرابط في نفس الصفحة مع إزالة أي صفحات متداخلة موضوعة في الصفحة الحالية.
    _parent في حال أردت يتم فتح محتوى الرابط مكان الصفحة الموجودة فيها الصفحة الحالية.

    مثال

    <input type="submit" formtarget="_top">
    		

    جرب الكود



    الخاصية formnovalidate

    في حال كان الوسم نوعه submit أو image يمكن إضافتها له لإعلام المتصفح بأن يرسل بيانات النموذج كما هي حتى و إن كانت البيانات المدخلة في حقول النموذج أنواعها غير صحيحة و المتصفح يظهر تحذيرات تفيد بأنها كذلك.

    مثال

    <input type="submit" formnovalidate>
    		

    جرب الكود



    الخاصية height

    في حال كان الوسم نوعه image يمكن إضافتها له لتحديد كم سيكون طوله بالبكسل.
    يجب تمرير الطول المراد وضعه له كقيمة.

    مثال

    <input type="image" height="30">
    		

    جرب الكود



    الخاصية list

    في حال كان الوسم نوعه text - search - url - tel - email - date - month - week - time - datetime-local - number - range - color يمكن إضافتها له لربط الوسم بقائمة خيارات ( <datalist> ) مهئية مسبقاً.
    يجب تمرير id قائمة الخيارات كقيمة لهذه الخاصية.

    مثال

    <!-- مربع النص -->
    <input="browsers">
    
    <!-- قائمة الخيارات المربوط بها -->
    <dataid="browsers">
    	...
    </datalist>
    		

    جرب الكود



    الخاصية max

    في حال كان الوسم نوعه date - month - week - time - datetime-local - number - range يمكن إضافتها له لتحديد أكبر عدد يمكن إدخاله فيه.

    مثال

    <input type="number" max="100">
    		

    جرب الكود



    الخاصية maxlength

    في حال كان الوسم نوعه text - search - url - tel - email - password يمكن إضافتها له لتحديد أكبر عدد أحرف يمكن إدخالها فيه.

    مثال

    <input type="text" maxlength="25">
    		

    جرب الكود



    الخاصية min

    في حال كان الوسم نوعه date - month - week - time - datetime-local - number - range يمكن إضافتها له لتحديد أصغر عدد يمكن إدخاله فيه.

    مثال

    <input type="number" min="100">
    		

    جرب الكود



    الخاصية minlength

    في حال كان الوسم نوعه text - search - url - tel - email - password يمكن إضافتها له لتحديد أقل عدد أحرف يمكن إدخالها فيه.

    مثال

    <input type="text" minlength="1">
    		

    جرب الكود



    الخاصية multiple

    في حال كان الوسم نوعه email يمكن إضافتها له لجعل المستخدم قادر على إدخال أكثر من بريد إلكتروني مع وضع فاصلة بينهم, و في حال كان نوعه file يمكن إضافتها له لجعل المستخدم قادر على اختيار أكثر من ملف.

    مثال

    <input type="file" multiple>
    		

    جرب الكود



    الخاصية name

    يمكن إضافتها للوسم و على الأغلب يجب أن تفعل ذلك بهدف إعطائه إسم حتى يتم إرساله مع البيانات التي يتم إرسالها في النموذج.
    يمكنك استخدام الخاصية value معها حتى تحدد القيمة الأولية التي ستكون فيها.

    ملاحظة: لا تضع الكلمة "_charset_" أو الكلمة "isindexed" كقيمة لها.

    مثال

    <input type="text" name="username">
    		

    جرب الكود



    الخاصية pattern

    في حال كان الوسم نوعه password - text - tel يمكن إضافتها له لتحديد كيف سيكون شكل ( Format ) القيمة التي يجب إدخالها فيه, عندها في حال كانت القيمة المدخلة لا توافق الشكل المطلوب فإنه لا يمكن للمستخدم النقر على زر إرسال البيانات.

    مثال

    <input type="text" pattern="[a-z]*">
    		

    جرب الكود



    الخاصية placeholder

    في حال كان الوسم نوعه password - search - tel - text - url يمكن إضافتها له لإظهار نص مساعد بداخل الوسم حين يكون فارغاً.
    يجب تمرير النص الذي سيظهر في حال كان فارغاً كقيمة لها.

    مثال

    <input type="text" placeholder="Enter First Name">
    		

    جرب الكود



    الخاصية readonly

    في حال كان الوسم نوعه text - search - url - tel - email - password - date - month - week - time - datetime-local - number يمكن إضافتها له لجعل قيمته غير قابلة للتغيير.

    مثال

    <input type="text" readonly>
    		

    جرب الكود



    الخاصية required

    في حال كان الوسم نوعه text - search - url - tel - email - password - date - month - week - time - datetime-local - number - checkbox - radio - file يمكن إضافتها له لإجبار المستخدم على إدخال قيمة في المكوّن حتى يتمكن من إرسال بيانات النموذج.

    مثال

    <input type="text" required>
    		

    جرب الكود



    الخاصية size

    في حال كان الوسم نوعه email - password - tel - text يمكن إضافتها له لتحديد كم حرف نريد أن يظهر بداخل المربع, أي كأننا تحدد حجمه نسبةً لعدد الأحرف التي يمكن أن تظهر فيه.

    ملاحظة: إفتراضياً عدد الأحرف التي يمكن أن تظهر فيه هو 20, كما أن الرقم الذي تحدده بنفسك قد لا يطابق الحجم.

    مثال

    <input type="text" size="25">
    		

    جرب الكود



    الخاصية src

    في حال كان الوسم نوعه image يمكن إضافتها له لتحديد مسار الصورة التي ستظهر عليه و التي ستكون بمثابة زر يمكن النقر عليه.

    مثال

    <input type="image" src="sent-icon.PNG" alt="Send">
    		

    جرب الكود



    الخاصية step

    في حال كان الوسم نوعه number يمكن إضافتها له لتحديد كم ستزيد أو تنقص قيمته سواء عند النقر على أزراره الجانبية أو عند النقر على أسهم الحاسوب. و في حال كان الوسم نوعه range يمكن إضافتها له لتحديد كم ستزيد أو تنقص قيمته عند تحريك مؤشر الشريط. و في حال كان الوسم نوعه date - month - week - time - datetime-local يمكن إضافتها له لتحديد كم قيمة سيتم تجاوزها عند النقر على أسهم الحاسوب.

    ملاحظة: إفتراضياً, قيمة هذا الوسم تكون مناسبة لنوع الوسم فمثلاً إذا كان نوعه number فإنها تكون number, و إذا كان month فإن كل نقرة تؤدي إلى إظهار الشهر الذي يليه أو يسبقه.

    مثال

    <input type="range" value="4" min="0" max="10" step="2">
    		

    جرب الكود



    الخاصية value

    يمكن إضافتها للوسم بهدف إعطائه قيمة حتى يتم إرسالها مع البيانات التي يتم إرسالها في النموذج.
    ملاحظة: عند استخدام الخاصية value يجب استخدام الخاصية name معها حتى يتم إرسال القيمة مع إسمها.

    مثال

    <input type="text" name="username" value="mhamad">
    		

    جرب الكود



    الخاصية width

    في حال كان الوسم نوعه image يمكن إضافتها له لتحديد كم سيكون عرضه بالبكسل.
    يجب تمرير العرض المراد وضعه له كقيمة.

    مثال

    <input type="image" width="30">
    		

    جرب الكود

    تصميمه الإفتراضي

    لا يوجد تصميم إفتراضي له حيث أن كل متصفح يعرض الأشياء التي يمكن الحصول عليها بواسطته بطريقة مختلفة.

    إعلان

    Eqla3Tech.com

    شروحات مكتوبة حول لغات البرمجة و تقنية المعلومات باللغة العربية مقدمة من إقلاع تك.

    لغة جافا لغة ++C قواعد البيانات نظام ويندوز نظام لينكس الشبكات تقنية المعلومات

    الدورات

    أدوات مساعدة

    الأقسام

    دورات
    مقالات أسئلة مشاريع كتب