إعلان
تعلم الآن

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">
		

جرب الكود

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

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

الدورات

أدوات مساعدة

أقسام الموقع

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