الوسم <input>

تعريفه

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

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

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

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

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

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

1- النوع button

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

مثال:   

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

2- النوع checkbox

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

مثال:    English

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

3- النوع color

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

مثال:   

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

4- النوع date

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

مثال:   

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

5- النوع datetime-local

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

مثال:   

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

5- النوع email

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

مثال:   

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

5- النوع file

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

مثال:   

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

6- النوع hidden

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

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

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

7- النوع image

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

مثال:   

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

8- النوع month

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

مثال:   

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

9- النوع number

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

مثال:   

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

10- النوع password

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

مثال:   

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

11- النوع radio

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

مثال:    English

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

12- النوع range

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

مثال:   

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

13- النوع reset

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

مثال:   

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

14- النوع search

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

مثال:   

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

15- النوع submit

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

مثال:   

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

16- النوع tel

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

مثال:   

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

17- النوع text

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

مثال:   

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

18- النوع time

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

مثال:   

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

19- النوع url

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

مثال:   

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

20- النوع week

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

مثال:   

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

خصائصه

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

الخاصية 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 يمكن إضافتها له لتحديد أي كاميرا سيتم أو مايكروفون في جهازه سيتم اعمتادهم للحصول على الملف المطلوب.

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

<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 يمكن إضافتها له لتحديد نوع البيانات التي سيتم إرسالها من النموذج.

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

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

الخاصية formmethod

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

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

الخاصية formtarget

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

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

<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 list="browsers">

<!-- قائمة الخيارات المربوط بها -->
<datalist id="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">

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

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