يعتبر الوسم <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"
في حال كان نوع الوسم هو text - search - url - tel - email - date - month - week - time - datetime-local - number - range - color - password يمكن إضافتها له لتفعيل الإكمال التلقائي فيه.
يمكن إضافتها للوسم لإعلام المتصفح أنه عند فتح الصفحة سيتم إعتبار أن المستخدم يقف عنده. ملاحظة: لا يجب وضع هذه الخاصية لأكثر من مكوّن في نفس الصفحة لأنه لا يمكن الوقوف عند أكثر من مكّون في وقت واحد.
يمكن إضافتها للوسم لإلغاء تفعيله مما يعني أنه سيظهر في الصفحة بلون باهت و لن يكون بإمكان المستخدم النقر عليه أو تغيير قيمته.
ملاحظة: في حال كنت تريد تمرير قيمة له قبل جعله غير مفعّل قم بإضافة الخاصية autocomplete للوسم أيضاً لأن المتصفح قد لا يقبل تمرير قيمة له أو إرسال القيمة الموضوعة فيه في حال كان غير مفعلاً.
يمكن إضافتها للوسم لتحديد إلى أي نموذج هو تابع و هذا الأمر يمكنك فعله في حال كان الوسم موضوع خارج النموذج و تريد ربطه به.
يجب وضع id النموذج الذي يتبع له كقيمة للخاصية.
في حال كان الوسم نوعه submit أو image يمكن إضافتها له لتحديد الرابط الذي سيتم إرسال البيانات المدخلة في النموذج إليه.
يجب تمرير الرابط الذي سيتم إرسال البيانات المدخلة في النموذج له كقيمة لها.
في حال كان الوسم نوعه submit أو image يمكن إضافتها له لتحديد طريقة إرسال البيانات من النموذج إلى الموقع.
يجب تمرير القيمة get أو القيمة post لهذه الخاصية لتحديد الطريقة التي سيتم فيها إرسال البيانات.
في حال كان الوسم نوعه submit أو image يمكن إضافتها له لإعلام المتصفح بأن يرسل بيانات النموذج كما هي حتى و إن كانت البيانات المدخلة في حقول النموذج أنواعها غير صحيحة و المتصفح يظهر تحذيرات تفيد بأنها كذلك.
في حال كان الوسم نوعه text - search - url - tel - email - date - month - week - time - datetime-local - number - range - color يمكن إضافتها له لربط الوسم بقائمة خيارات ( <datalist> ) مهئية مسبقاً.
يجب تمرير id قائمة الخيارات كقيمة لهذه الخاصية.
مثال
<!-- مربع النص -->
<input="browsers">
<!-- قائمة الخيارات المربوط بها -->
<dataid="browsers">
...
</datalist>
في حال كان الوسم نوعه email يمكن إضافتها له لجعل المستخدم قادر على إدخال أكثر من بريد إلكتروني مع وضع فاصلة بينهم, و في حال كان نوعه file يمكن إضافتها له لجعل المستخدم قادر على اختيار أكثر من ملف.
يمكن إضافتها للوسم و على الأغلب يجب أن تفعل ذلك بهدف إعطائه إسم حتى يتم إرساله مع البيانات التي يتم إرسالها في النموذج.
يمكنك استخدام الخاصية value معها حتى تحدد القيمة الأولية التي ستكون فيها.
ملاحظة: لا تضع الكلمة "_charset_" أو الكلمة "isindexed" كقيمة لها.
في حال كان الوسم نوعه password - text - tel يمكن إضافتها له لتحديد كيف سيكون شكل ( Format ) القيمة التي يجب إدخالها فيه, عندها في حال كانت القيمة المدخلة لا توافق الشكل المطلوب فإنه لا يمكن للمستخدم النقر على زر إرسال البيانات.
في حال كان الوسم نوعه password - search - tel - text - url يمكن إضافتها له لإظهار نص مساعد بداخل الوسم حين يكون فارغاً.
يجب تمرير النص الذي سيظهر في حال كان فارغاً كقيمة لها.
مثال
<input type="text" placeholder="Enter First Name">
في حال كان الوسم نوعه text - search - url - tel - email - password - date - month - week - time - datetime-local - number يمكن إضافتها له لجعل قيمته غير قابلة للتغيير.
في حال كان الوسم نوعه text - search - url - tel - email - password - date - month - week - time - datetime-local - number - checkbox - radio - file يمكن إضافتها له لإجبار المستخدم على إدخال قيمة في المكوّن حتى يتمكن من إرسال بيانات النموذج.
في حال كان الوسم نوعه email - password - tel - text يمكن إضافتها له لتحديد كم حرف نريد أن يظهر بداخل المربع, أي كأننا تحدد حجمه نسبةً لعدد الأحرف التي يمكن أن تظهر فيه.
ملاحظة: إفتراضياً عدد الأحرف التي يمكن أن تظهر فيه هو 20, كما أن الرقم الذي تحدده بنفسك قد لا يطابق الحجم.
في حال كان الوسم نوعه number يمكن إضافتها له لتحديد كم ستزيد أو تنقص قيمته سواء عند النقر على أزراره الجانبية أو عند النقر على أسهم الحاسوب. و في حال كان الوسم نوعه range يمكن إضافتها له لتحديد كم ستزيد أو تنقص قيمته عند تحريك مؤشر الشريط. و في حال كان الوسم نوعه date - month - week - time - datetime-local يمكن إضافتها له لتحديد كم قيمة سيتم تجاوزها عند النقر على أسهم الحاسوب.
ملاحظة: إفتراضياً, قيمة هذا الوسم تكون مناسبة لنوع الوسم فمثلاً إذا كان نوعه number فإنها تكون number, و إذا كان month فإن كل نقرة تؤدي إلى إظهار الشهر الذي يليه أو يسبقه.
يمكن إضافتها للوسم بهدف إعطائه قيمة حتى يتم إرسالها مع البيانات التي يتم إرسالها في النموذج. ملاحظة: عند استخدام الخاصية value يجب استخدام الخاصية name معها حتى يتم إرسال القيمة مع إسمها.