شرح الوسم input في html

الوسم <input> في HTML

تعريف الوسم <input>

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

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

دعم المتصفحات الوسم <input>

الجدول التالي يظهر المتصفحات التي تدعم الوسم <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">.

مثال:    English

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

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

مثال:    English

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

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	غير مدعوم	مدعوم	مدعوم	مدعوم	مدعوم	مدعوم	مدعوم

خصائص الوسم <input>

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

الخاصية accept

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

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

• يمكن تحديد أنواع الملفات التي يمكنه اختيارها بشكل مباشر. مثال: type=".jpg,.pdf,.doc"

• يمكن تحديد أنه يمكنه اختيار ملف صوتي مهما كان نوعه على هذا النحو: type="audio/*"

• يمكن تحديد أنه يمكنه اختيار فيديو مهما كان نوعه على هذا النحو: type="video/*"

• يمكن تحديد أنه يمكنه اختيار صورة مهما كان نوعها على هذا النحو: type="image/*"

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

مثال

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

المخرجات:

الخاصية alt

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

مثال

	  <html>
	  <head>
	  </head>
	  <body>
	  
	  <input type="image" src="submit.PNG" alt="Save Changes">
	  </body>
	  </html>
	  
	

المخرجات:

الخاصية autocomplete

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

مثال

	  <html>
	  <head>
	  </head>
	  <body>
	  
	  <input type="text" name="username" autocomplete>
	  </body>
	  </html>
	  
	

المخرجات:

الخاصية autofocus

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

مثال

	  <html>
	  <head>
	  </head>
	  <body>
	  
	  <input type="submit" autofocus>
	  </body>
	  </html>
	  
	

المخرجات:

الخاصية capture

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

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

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

مثال

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

المخرجات:

الخاصية checked

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

مثال

	  <html>
	  <head>
	  </head>
	  <body>
	  
	  <input type="checkbox" name="option1" value="arabic" checked>
	  </body>
	  </html>
	  
	

المخرجات:

الخاصية disabled

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

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

مثال

	  <html>
	  <head>
	  </head>
	  <body>
	  
	  <input type="submit" value="Submit" disabled>
	  </body>
	  </html>
	  
	

المخرجات:

الخاصية form

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

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

مثال

	  <html>
	  <head>
	  </head>
	  <body>
	  
	  <form id="loginForm">
	  ..
	  </form>

	  
	  <input type="submit" value="Login" form="loginForm">
	  </body>
	  </html>
	  
	

المخرجات:

..

الخاصية formaction

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

مثال

	  <html>
	  <head>
	  </head>
	  <body>
	  
	  <input type="submit" formaction="view-email-and-password.php">
	  </body>
	  </html>
	  
	

المخرجات:

الخاصية formenctype

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

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

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

مثال

	  <html>
	  <head>
	  </head>
	  <body>
	  
	  <input type="submit" formenctype="text/plain">
	  </body>
	  </html>
	  
	

المخرجات:

الخاصية formmethod

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

مثال

	  <html>
	  <head>
	  </head>
	  <body>
	  
	  <input type="submit" formmethod="post">
	  </body>
	  </html>
	  
	

المخرجات:

الخاصية formtarget

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

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

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

مثال

	  <html>
	  <head>
	  </head>
	  <body>
	  
	  <input type="submit" formtarget="_self">
	  </body>
	  </html>
	  
	

المخرجات:

الخاصية formnovalidate

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

مثال

	  <html>
	  <head>
	  </head>
	  <body>
	  
	  <input type="submit" formnovalidate>
	  </body>
	  </html>
	  
	

المخرجات:

الخاصية height

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

مثال

	  <html>
	  <head>
	  </head>
	  <body>
	  
	  <input type="image" height="30">
	  </body>
	  </html>
	  
	

المخرجات:

الخاصية list

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

مثال

	  <html>
	  <head>
	  </head>
	  <body>
	  
	  <!-- مربع النص -->
	  <input list="fruits">

	  <!-- قائمة الخيارات المربوط بها -->
	  <datalist id="fruits">
	  ...
	  </datalist>
	  </body>
	  </html>
	  
	

المخرجات:

الخاصية max

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

مثال

	  <html>
	  <head>
	  </head>
	  <body>
	  
	  <input type="number" max="100">
	  </body>
	  </html>
	  
	

المخرجات:

الخاصية maxlength

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

مثال

	  <html>
	  <head>
	  </head>
	  <body>
	  
	  <input type="text" maxlength="25">
	  </body>
	  </html>
	  
	

المخرجات:

الخاصية min

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

مثال

	  <html>
	  <head>
	  </head>
	  <body>
	  
	  <input type="number" min="100">
	  </body>
	  </html>
	  
	

المخرجات:

الخاصية minlength

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

مثال

	  <html>
	  <head>
	  </head>
	  <body>
	  
	  <input type="text" minlength="1">
	  </body>
	  </html>
	  
	

المخرجات:

الخاصية multiple

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

مثال

	  <html>
	  <head>
	  </head>
	  <body>
	  
	  <input type="file" multiple>
	  </body>
	  </html>
	  
	

المخرجات:

الخاصية name

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

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

مثال

	  <html>
	  <head>
	  </head>
	  <body>
	  
	  <input type="text" name="username">
	  </body>
	  </html>
	  
	

المخرجات:

الخاصية pattern

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

مثال

	  <html>
	  <head>
	  </head>
	  <body>
	  
	  <input type="text" pattern="/[a-z]:\\/">
	  </body>
	  </html>
	  
	

المخرجات:

الخاصية placeholder

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

مثال

	  <html>
	  <head>
	  </head>
	  <body>
	  
	  <input type="text" placeholder="Enter First Name">
	  </body>
	  </html>
	  
	

المخرجات:

الخاصية readonly

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

مثال

	  <html>
	  <head>
	  </head>
	  <body>
	  
	  <input type="text" readonly>
	  </body>
	  </html>
	  
	

المخرجات:

الخاصية required

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

مثال

	  <html>
	  <head>
	  </head>
	  <body>
	  
	  <input type="text" required>
	  </body>
	  </html>
	  
	

المخرجات:

الخاصية size

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

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

مثال

	  <html>
	  <head>
	  </head>
	  <body>
	  
	  <input type="text" size="25">
	  </body>
	  </html>
	  
	

المخرجات:

الخاصية src

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

مثال

	  <html>
	  <head>
	  </head>
	  <body>
	  
	  <input type="image" src="sent-icon.PNG" alt="Send">
	  </body>
	  </html>
	  
	

المخرجات:

الخاصية step

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

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

مثال

	  <html>
	  <head>
	  </head>
	  <body>
	  
	  <input type="range" value="5" min="1" max="10" step="2">
	  </body>
	  </html>
	  
	

المخرجات:

الخاصية value

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

مثال

	  <html>
	  <head>
	  </head>
	  <body>
	  
	  <input type="text" name="user" value="saddam">
	  </body>
	  </html>
	  
	

المخرجات:

الخاصية width

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

مثال

	  <html>
	  <head>
	  </head>
	  <body>
	  
	  <input type="image" width="30">
	  </body>
	  </html>
	  
	

المخرجات:

التصميم الإفتراضي للوسم <input>

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

تعديل المقال