العنصر <input>

يُستخدَم العنصر <input> لإنشاء عناصر تفاعلية للنماذج في صفحات الويب التي تقبل معطيات من المستخدم، ثم تُرسَل إلى الخادوم.

لتأخذ فكرة عن طريقة عمل (وشكل) مختلف أنواع العنصر <input>، فجرّب تعديل قيمة الخاصية type في المثال الحي الآتي، وسترى الناتج يُحدَّث أثناء كتابتك. وستُمثِّل القيمة الابتدائية (text) حقل إدخال نصيّ عادي، لكنك يمكنك تجربة قيم أخرى مثل number و color و checkbox و radio و date و file و month و password و range و time.

مثال عن حقل نصي text بسيط نموذجي:

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

مثال عن نموذج <form> مع حقل نصي text وزر إرسال submit:

<form action="" method="get">
  <label for="name">الاسم:</label>
  <input id="name" type="text" name="name">
  <input type="submit" value="أرسل">
</form>

ستجد عدِّة أمثلة عن استخدام العنصر <input> في الصفحات التي تشرح كل نوع من أنواعه.

دورة تطوير واجهات المستخدم

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

اشترك الآن

بطاقة العنصر

تصنيفات المحتوى	عنصر تنظيمي وعنصر عادي وعنصر مرتبط بالنماذج.
المحتوى المسموح	لا يوجد، فهو عنصرٌ فارغ.
الوسم المختصر	يجب أن يكون وسم البداية موجودًا، ويجب أن يُحذَف وسم النهاية.
العناصر الأب	أي عنصر يقبل المحتوى العادي.
واجهة DOM	HTMLInputElement

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

Chrome	Firefox	Edge	Safari	Opera
مدعوم	مدعوم	مدعوم	مدعوم	مدعوم

أنواع العنصر <input>

طريقة عمل العنصر <input> تختلف اختلافًا كبيرًا اعتمادًا على قيمة الخاصية type، لاحظ أنَّ أنواع العنصر <input> ستُشرَح في صفحات منفصلة خاصة بها، وسنوردها هنا بإيجاز.

button

زر قابل للضغط ليس له سلوك افتراضي.

<input type="button" value="اضغط هنا">

checkbox

صندوق تأشير يسمح أن تكون قيمته مختارة أو غير مختارة.

<label for="checkbox">صندوق تأشير</label>
<input type="checkbox" name="checkbox" id="checkbox">

color

حقل لاختيار لون ما، أضيف هذا الحقل في HTML5.

<input type="color" name="color">

date

حقل لاختيار التاريخ (السنة والشهر واليوم، لكن دون الوقت)، أضيف هذا الحقل في HTML5.

<input type="date" name="date">

datetime-local

حقل لاختيار التاريخ والوقت، لكن دون المنطقة الزمنية؛ أضيف هذا الحقل في HTML5.

<input type="datetime-local" name="datetime">

email

حقل لإدخال عنوان بريد إلكتروني، وأضيف هذا الحقل في HTML5.

<input type="email" name="email">

file

حقل يسمح للمستخدم باختيار ملف لرفعه. استخدم الخاصية accept لتحديد أنواع الملفات التي يمكن اختيارها.

<input type="file" id="file">

hidden

حقل مخفي لكن قيمته ستُرسَل إلى الخادم.

<input type="hidden" id="hidden_prop" name="hidden_prop" value="قيمة ما">

image

زر قابل للضغط فيه صورة. عليك استخدام الخاصية src لتحديد مصدر الصورة، والخاصية alt لتحديد نص بديل، يمكنك أيضًا استخدام الخاصيات height و width لتحديد أبعاد الصورة بالبكسل.

<input type="image" name="image" width="30" height="30" alt="أرسل" src="send.svg">

month

حقل لإدخال الشهر والسنة، أضيف هذا الحقل في HTML5.

<input type="month" name="month">

number

حقل لإدخال رقم، أضيف هذا الحقل في HTML5.

<input type="number" name="number">

password

حقل نصي ذو سطرٍ وحيد لا تُعرَض قيمته النصية للمستخدم. استخدم الخاصية maxlength لتحديد الطول الأقصى للقيمة التي يمكن أن يدخلها المستخدم.

<input type="password" name="password">

radio

زر انتقاء، يسمح باختيار قيمة من مجموعة خيارات.

<label for="radio">زر انتقاء</label>
<input type="radio" name="radio" id="radio">

range

حقل لتحديد قيمة عددية ضمن مجال معيّن، أضيف هذا الحقل في HTML5.

<input type="range" name="range">

reset

زر يُعيد ضبط حقول النموذج إلى قيمها الإبتدائية.

<input type="reset" name="reset">

search

حقل نصي ذو سطر وحيد لإدخال عبارات البحث، وستُحذَف الأسطر الجديدة فيه تلقائيًا. أضيف هذا الحقل في HTML5.

<input type="search" name="search">

submit

زر يؤدي إلى إرسال النموذج.

<input type="submit" value="أرسل">

tel

حقل لإدخال رقم هاتف، وستُحذَف الأسطر الجديدة تلقائيًا من المدخلات، لكن لا توجد صيغة مُحدَّدة لأرقام الهواتف. يمكن استخدام خاصيات مثل pattern و maxlength لفرض قيود على القيم المُدخَلة في هذا الحقل. أضيف هذا الحقل في HTML5.

<input type="tel" name="tel">

text

حقل نصي ذو سطر وحيد، وستحدف الأسطر الجديدة فيه تلقائيًا.

time

حقل لإدخال قيمة للوقت دون منطقة زمنية، أضيف هذا العنصر في HTML5.

<input type="time" name="time">

url

حقل لإدخال رابط URL، ويجب أن تكون قيمة هذا الحقل رابط URL صالح، ويمكن استخدام خاصيات مثل pattern و maxlength لفرض قيود على القيم المُدخَلة في هذا الحقل. أضيف هذا الحقل في HTML5.

<input type="url" name="url">

week

حقل لإدخال تاريخ يحتوي على السنة ورقم الأسبوع.

<input type="week" name="week">

datetime

حقل لإدخال تاريخ ووقت (بالساعات والدقائق والثواني وأجزاء الثانية) اعتمادًا على المنطقة الزمنية UTC. هذا النوع من الحقول قد حُذِف من مواصفة WHATWG.

الخاصيات

خاصيات العنصر <input> العامة

يحتوي هذا القسم على قائمة بالخاصيات المتاحة إلى جميع أنواع حقول <input>، أما الخاصيات غير العامة والخاصيات العامة التابعة للعنصر <input> التي يختلف سلوكها اعتمادًا على نوع الحقل، فستذكر في صفحة ذلك النوع.

يجدر بالذكر أنَّه يمكن استخدام الخاصيات العامة المتاحة لجميع العناصر في هذا العنصر.

type

نوع العنصر <input>، راجع القسم السابق من هذه الصفحة لمزيدٍ من المعلومات عن القيم المتاحة وروابط إلى صفحاتها.

accept

إذا كانت قيمة الخاصية type هي file، فستُشير هذه الخاصية إلى أنواع الملفات التي يقبلها الخادوم، وبقية الأنواع سيتجاهلها المتصفح، يجب أن تكون قيمة هذه الخاصية هي قائمة مفصولة بفاصلة لمُحدِّدات أنواع الملفات. راجع صفحة الحقل file للتفاصيل.

<input type="file" name="profile_pic" accept=".jpg, .jpeg, .png">

autocomplete

تُشير هذه الخاصية إن كانت قيمة الحقل يمكن إكمالها تلقائيًا عبر المتصفح. القيم الممكنة لهذه الخاصية هي:

• off: يجب أن يُدخِل المستخدم القيم يدويًا في كل حقل في كل مرة، أو كانت الصفحة تُوفِّر طريقة للإكمال التلقائي للمدخلات بمعزل عن المتصفح، أي أنَّ المتصفح لا يتدخل بموضوع الإكمال التلقائي.
• on: يمكن للمتصفح إكمال القيم المُدخَلة من المستخدم تلقائيًا اعتمادًا على القيم التي أدخلها المستخدم في المرات السابقة.
• email.
• username.
• new-password: كلمة مرور جديدة (مثلًا: عند إنشاء حساب جديد أو تغيير كلمة المرور).
• current-password.
• language: اللغة المُفضَّلة، راجع قائمة BCP47.
• tel: رقم الهاتف الكامل، بما فيه رمز الاتصال الدولي.
  • قيم فرعية أخرى: tel-country-code و tel-national و tel-area-code و tel-local و tel-local-prefix و tel-local-suffix و tel-extension.
• url: الصفحة الرئيسية أو صفحة ويب أخرى ترتبط بالشركة أو الشخص أو العنوان أو معلومات الاتصال الأخرى الموجودة في الحقول الأخرى المرتبطة مع هذا الحقل.
• photo: صورة أو أيقونة ترتبط بالشركة أو الشخص أو العنوان أو معلومات الاتصال الأخرى الموجودة في الحقول الأخرى المرتبطة مع هذا الحقل.

راجع معيار WHATWG لقائمة كاملة بالقيم المسموحة ولمزيدٍ من المعلومات.

إذا لم تُحدَّد قيمة للخاصية autocomplete على العنصر فسيستخدم المتصفح الخاصية autocomplete للنموذج الذي ينتمي إليه هذا العنصر، وهو إما أن يكون العنصر <form> الأب لهذا العنصر أو العنصر<form> الذي استخدمنا قيمة الخاصية id التابعة لها في خاصية form في هذا العنصر.

في أغلبية المتصفحات الحديثة (بما في ذلك Firefox 38+‎ و Chrome 34+‎ و IE 11+‎) لن يؤدي ضبط الخاصية autocomplete إلى منع مدير كلمات المرور الخاص بالمتصفح من سؤال المستخدم إن كان يريد تخزين معلومات الدخول (اسم المستخدم وكلمة المرور)، إذا سمح المستخدم بذلك فستُملأ معلومات الدخول في المرة القادمة التي يزور فيها المستخدم الصفحة تلقائيًا.

يجدر بالذكر أنَّ هذه الخاصية أضيفت إلى HTML5، ولم تكن موجودةً فيما سبق.

autofocus

تسمح لنا هذه الخاصية المنطقية (Boolean) بتحدد أنَّنا نريد أن ينتقل التركيز (focus) إلى هذا العنصر عند تحميل الصفحة ما لم يغيّره المستخدم (مثل الكتابة في عنصر إدخال مختلف).

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

يجدر بالذكر أنَّ هذه الخاصية أضيفت إلى HTML5، ولم تكن موجودةً فيما سبق.

<input type="text" autofocus>

capture

عندما تكون قيمة الخاصية type تساوي file، فإنَّ وجود هذه الخاصية المنطقية (Boolean) يعني أنَّ من المفضِّل التقاط الوسائط مباشرةً عبر جهاز المستخدم باستخدام آلية media capture.

checked

عندما تكون قيمة الخاصية type تساوي radio أو checkbox فإنَّ وجود هذه الخاصية المنطقية يُشير إلى أنَّ الحقل مُختار افتراضيًا، فيما عدا ذلك فستكون هذه الخاصية مهملة.

<label for="checkbox">صندوق تأشير</label>
<input type="checkbox" name="checkbox" id="checkbox" checked>

disabled

تُشير هذه الخاصية المنطقية (Boolean) إلى أنَّ المستخدم لا يستطيع التفاعل مع هذا العنصر، وإذا لم تُحدَّد قيمة لهذه الخاصية فسترث قيمتها من العنصر الحاوي لها مثل العنصر <fieldset>، وإذا لم يكن هنالك عنصرٌ حاوٍ لهذا العنصر له الخاصية disabled، فسيكون هذا العنصر مفعّلًا.

<input type="text" disabled>

form

تُحدِّد هذه الخاصية ما هو النموذج الذي ينتمي العنصر <input> إليه، ويجب أن تكون قيمة هذه الخاصية هي مُعرِّف id لعنصر <form> في المستند نفسه.

تسمح لك هذه الخاصية بربط عناصر <input> إلى عناصر <form> الموجودة في أي مكان في المستند، لكن لا يجوز أن يرتبط عنصر <input> موجود ضمن عنصر <form> إلى عنصر <form> آخر.

يجدر بالذكر أنَّ هذه الخاصية أضيفت إلى HTML5، ولم تكن موجودةً فيما سبق.

<form action="action_page.php" id="form1">
  الاسم: <input type="text" name="username">
</form>
<input type="submit" form="form1">

formaction

رابط URI للبرنامج الذي يُعالِج المعلومات المُرسَلة عبر هذا الزر.

إذا حُدِّدَت قيمة لهذه الخاصية فستتجاوز القيمة الموجودة في الخاصية actionللنموذج الذي يتبع هذا الزر له.

يجدر بالذكر أنَّ هذه الخاصية أضيفت إلى HTML5، ولم تكن موجودةً فيما سبق.

<form action="action_page.php">
  الاسم: <input type="text" name="username">
  <input type="submit" formaction="action_page2.php">
</form>

formenctype

إذا كان هذا العنصر هو زر الإرسال (submit button) فستُحدِّد هذه الخاصية ما هو نوع المحتوى التي سيُستخدَم لإرسال بيانات النموذج إلى الخادوم. القيم الممكنة هي:

• application/x-www-form-urlencoded: القيمة الافتراضية إن لم تُحدَّد قيمة لهذه الخاصية.
• multipart/form-data: استخدم هذه القيمة إن كنتَ تستعمل العنصر <input> في النموذج وضبطتَ الخاصية type إلى file.
• text/plain.

إذا حُدِّدَت قيمة لهذه الخاصية فستتجاوز القيمة الموجودة في الخاصية enctype للنموذج الذي يتبع هذا الزر له.

يجدر بالذكر أنَّ هذه الخاصية أضيفت إلى HTML5، ولم تكن موجودةً فيما سبق.

formmethod

إذا كان هذا العنصر هو زر الإرسال (submit button) فستُحدِّد هذه الخاصية ما هي طريقة الإرسال عبر HTTP (أي HTTP method) التي يجب أن يستعملها المتصفح لإرسال النموذج. القيم الممكنة هي:

• post: إرسال بيانات النموذج ضمن جسم طلبية HTTP.
• get: إسناد بيانات النموذج إلى رابط URI للهدف، مع استعمال الرمز ? لفصل اسم الصفحة عن البيانات، ثم إرسال رابط URI الناتج إلى الخادوم. استخدم هذه الطريقة إن لم تكن هنالك تأثيرات جانبية لنموذجك وكان يحتوي على محارف ASCII فقط.

إذا حُدِّدَت هذه الخاصية فستتجاوز القيمة الموجودة في الخاصية method للنموذج الذي يتبع له هذا الرز.

يجدر بالذكر أنَّ هذه الخاصية أضيفت إلى HTML5، ولم تكن موجودةً فيما سبق.

<form action="action_page.php" method="post">
  الاسم: <input type="text" name="username">
  <input type="submit" formmethod="get">
</form>

formnovalidate

إذا كان هذا العنصر هو زر الإرسال (submit button) فستُشير هذه الخاصية المنطقية إلى أنَّ على المتصفح ألّا يتحقق من حقول النموذج عند إرساله.

إذا حُدِّدَت هذه الخاصية فستتجاوز القيمة الموجودة في الخاصية novalidate للنموذج الذي يتبع له هذا الرز.

يجدر بالذكر أنَّ هذه الخاصية أضيفت إلى HTML5، ولم تكن موجودةً فيما سبق.

<form action="action_page.php">
  الاسم: <input type="text" name="username">
  <input type="submit" formnovalidate>
</form>

formtarget

إذا كان هذا العنصر هو زر الإرسال (submit button) فهذه الخاصية تشير إلى المكان الافتراضي لعرض الناتج عندما تُسبِّب الروابط أو عناصر النماذج بالانتقال إلى صفحةٍ أخرى.

الكلمات المحجوزة التالية لها معانٍ خاصة:

• ‎__self: عرض النتيجة مكان الصفحة الحالية. هذه هي القيمة الافتراضية إذا لم تُحدَّد قيمةٌ أخرى.
• ‎__blank: عرض الصفحة في نافذة جديدة.
• ‎__parent: ستعرض الصفحة مكان الصفحة الأب التي ينتمي إليها iframe، وإذا لم تكن هنالك صفحة أب فستسلك هذه القيمة سلوك القيمة ‎__selfنفسه.
• ‎__top: عرض الصفحة مكان أعلى صفحة في الهيكلية (أي الصفحة التي تكون من الآباء المباشرين أو غير المباشرين للصفحة الحالية وليس لها صفحة أب). إذا لم تكن هنالك صفحة أب فستسلك هذه القيمة سلوك القيمة ‎__self نفسه.

يجدر بالذكر أنَّ هذه الخاصية أضيفت إلى HTML5، ولم تكن موجودةً فيما سبق.

height

إذا كانت قيمة الخاصية type هي image، فهذه الخاصية تُحدِّد ارتفاع الصورة المعروضة في الزر.

يجدر بالذكر أنَّ هذه الخاصية أضيفت إلى HTML5، ولم تكن موجودةً فيما سبق.

<input type="image" name="image" width="30" height="30" alt="أرسل" src="send.svg">

inputmode

تلميحة تقول للمتصفح أيّ نوع من أنواع لوحة المفاتيح يفضَّل عرضه، يمكن استخدام هذه الخاصية إذا كانت قيمة الخاصية type هي text أو password أو email أو url. القيم الممكنة هي:

• verbatim: المحتوى النصي غير التعبيري، مثل اسم المستخدم وكلمة المرور.
• latin: لوحة المفاتيح العادية والتي تكون فيها وظائف مساعدة في الكتابة مثل التنبوء النصي، وتستخدم للتواصل البشري مع الحاسوب مثل حقول البحث.
• latin-name: كما القيمة latin، لكن لأسماء الأشخاص.
• latin-prose: كما القيمة latin، لكن مع وظائف مساعدة في الكتابة أخرى، وتستخدم للتواصل البشري مع البشر مثل برامج المحادة الفورية أو البريد الإلكتروني.
• numeric: إدخال الأرقام، الذي يتضمن الأرقام من 0 إلى 9، والفاصلة العشرية، ورمز الإشارة السالبة. الغرض من هذا النوع هو لإدخال الأكواد الرقمية (مثل أرقام البطاقة الإئتمانية)، أما للأرقام العادي فاستخدام العنصر <input> مع ضبط الخاصية type إلى number.
• tel: إدخال أرقام الهاتف، بما في ذلك زر النجمة والمربع، حاول استخدام العنصر <input> مع ضبط الخاصية type إلى tel إن أمكنك ذلك.
• email: إدخال عناوين البريد الإلكتروني، حاول استخدام العنصر <input> مع ضبط الخاصية type إلى email إن أمكنك ذلك.
• url: إدخال عناوين URL، حاول استخدام العنصر <input> مع ضبط الخاصية type إلى url إن أمكنك ذلك.

يجدر بالذكر أنَّ هذه الخاصية أضيفت إلى HTML5، ولم تكن موجودةً فيما سبق.

list

تحديد قائمة خيارات معرّفة مسبقًا لاقتراح عناصرها على المستخدم، يجب أن تكون قيمة هذه الخاصية تساوي قيمة مُعرِّف id لعنصر <datalist> في المستند نفسه.

لن يعرض المتصفح إلا الخيارات الصالح لنوع الإدخال المستخدم، سيتم تجاهل هذه الخاصية إن كانت قيمة الخاصية type تساوي hidden أو checkbox أو radio أو file أو button.

يجدر بالذكر أنَّ هذه الخاصية أضيفت إلى HTML5، ولم تكن موجودةً فيما سبق.

<label>اختر متصفحك من القائمة:
<input type="text" list="browsers" name="myBrowser"></label>
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
  <option value="Microsoft Edge">
</datalist>

max

تحديد القيمة القصوى (أرقام أو تاريخ ووقت) لهذا العنصر، والتي لا يُسمَح أن تكون أقل من القيمة الدنيا (الخاصية min).

يجدر بالذكر أنَّ هذه الخاصية أضيفت إلى HTML5، ولم تكن موجودةً فيما سبق.

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

maxlength

إذا كانت قيمة الخاصية type في هذا العنصر مساويةً إلى text أو email أو search أو password أو tel أو url فستُحدِّد هذه الخاصية العدد الأقصى من المحارف التي يمكن أن يُدخِلها المستخدم، وسيتم تجاهلها إذا ضُبِطَت على أنواع الحقول الأخرى.

يمكن لقيمة هذه الخاصية أن تتجاوز قيمة الخاصية size.

إن لم تُحدَّد قيمة لهذه الخاصية، فيمكن أن يُدخِل المستخدم عددًا لا نهائيًا من المحارف، وتحديد رقم سالب سيؤدي إلى تفعيل السلوك الافتراضي (أي أن يستطيع المستخدم إدخال أي عدد يريده من المحارف).

<input type="search" maxlength="8">

min

تحديد القيمة الدنيا (أرقام أو تاريخ ووقت) لهذا العنصر، والتي لا يُسمَح أن تكون أكبر من القيمة القصوى (الخاصية max).

يجدر بالذكر أنَّ هذه الخاصية أضيفت إلى HTML5، ولم تكن موجودةً فيما سبق.

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

minlength

إذا كانت قيمة الخاصية type في هذا العنصر مساويةً إلى text أو email أو search أو password أو tel أو url فستُحدِّد هذه الخاصية العدد الأدنى من المحارف التي يجب أن يُدخِلها المستخدم، وسيتم تجاهلها إذا ضُبِطَت على أنواع الحقول الأخرى.

يجدر بالذكر أنَّ هذه الخاصية أضيفت إلى HTML5، ولم تكن موجودةً فيما سبق.

<input type="search" minlength="4">

mutliple

هذه القيمة المنطقية تُشير إذا كان مسموحًا للمستخدم أن يدخل أكثر من قيمة، وهذه الخاصية ستأخذ مفعولها إن ضُبِطَت الخاصية type إلى email أو file، وإلا فسيتم تجاهلها.

يجدر بالذكر أنَّ هذه الخاصية أضيفت إلى HTML5، ولم تكن موجودةً فيما سبق.

<input type="email" multiple>

name

اسم الحقل، والذي سيُرسَل مع بيانات النموذج إلى الخادوم.

pattern

تعبير نمطي يجب أن تُحقِّقَه قيمة الحقل التي أدخلها المستخدم، ويجب أن يُطابِق النمط كامل القيمة وليس جزءًا منها.

استخدم الخاصية title لشرح ما الذي يفعله النمط إلى المستخدم.

سيكون لهذه الخاصية أثرٌ إن كانت قيمة الخاصية type تساوي text أو search أو tel أو url أو email أو password وإلا فسيتم تجاهلها.

صياغة كتابة التعابير النمطية هي خوارزمية RegExp المستخدمة في JavaScript، مع القدرة على استخدام المعامل 'u' الذي سيعامل النمط على أنه سلسلة من أكواد يونيكود. لا يُحاط النمط بخطوط مائلة /.

يجدر بالذكر أنَّ هذه الخاصية أضيفت إلى HTML5، ولم تكن موجودةً فيما سبق.

<input type="email" pattern=".+@hsoub.com">

placeholder

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

ملاحظة: لا تستخدم الخاصية placeholder بدلًا من العنصر <label>، فالغرض منهما مختلف. إذ إنَّ العنصر <label> يشرح ما هو دور الحقل (أي يشير إلى نوع المعلومات المتوقع إدخالها) بينما الخاصية placeholder هي تلميحة عن صيغة المحتوى الذي يجب إدخاله في الحقل. لاحظ أنَّ هنالك حالات لا تُعرَض فيها الخاصية placeholder إلى المستخدم، لذا يجب أن يكون النموذج قابلًا للفهم دونها.

يجدر بالذكر أنَّ هذه الخاصية أضيفت إلى HTML5، ولم تكن موجودةً فيما سبق.

<input type="email" pattern=".+@hsoub.com" placeholder="user@hsoub.com">

readonly

تُشير هذه الخاصية إلى أنَّ المستخدم لا يستطيع تعديل قيمة الحقل (ولن يكون لقيمة هذه الخاصية أيّ أهمية) أي لو أردتَ القراءة والكتابة إلى الحقل فلا تضف الخاصية readonly من الأساس.

سيتم تجاهل هذه الخاصية إن كانت قيمة الخاصية type تساوي hidden أو range أو color أو checkbox أو radio أو file أو button أو submit أو reset.

يجدر بالذكر أنَّ هذه الخاصية أضيفت إلى HTML5، ولم تكن موجودةً فيما سبق.

<input type="text" name="username" value="test" readonly>

required

تُشير هذه الخاصية إلى ضرورة ملء المستخدم لهذا الحقل قبل إرسال النموذج، ولا يمكن استخدام هذه الخاصية إذا كانت قيمة الخاصية type تساوي hidden أو image أو button أو submit أو reset.

يجدر بالذكر أنَّ هذه الخاصية أضيفت إلى HTML5، ولم تكن موجودةً فيما سبق.

size

الحجم الابتدائي للحقل، وهذه القيمة تكون بالبكسل إلا إذا كان قيمة الخاصية type هي text أو password وستُمثِّل هذه القيمة حينئذٍ عدد المحارف.

أصبح من الممكن في HTML5 تطبيق هذه الخاصية إذا كانت قيمة الخاصية type تساوي text أو search أو tel أو url أو email أو password وإلا فسيتم تجاهلها.

يجب أن تكون قيمة هذه الخاصية أكبر من الصفر، وإن لم تُحدَّد قيمة لهذه الخاصية فالقيمة الافتراضية هي 20. وتقول مواصفة HTML5 أنَّه «يجب على المتصفح الحرص على إظهار محارف لا يقل عددها عن قيمة هذه الخاصية»، لكن لبعض الحروف عرض مختلف في بعض الخطوط، ولن تتمكن بعض المتصفحات من جعل x حرفًا ظاهرًا في الحقل حتى لو ضُبِطَت قيمة هذه الخاصية إلى x.

<input type="email" size="30">

spellcheck

ضبط هذه القيمة إلى true يشير إلى أنَّ المتصفح يجب أن يتحقق من الأخطاء الإملائية والقاعدية. القيمة default تُشير إلى أنَّ العنصر سيرث قيمة الخاصيةspellcheck للعنصر الأب أو يأخذها من المتصفح. أما القيمة false فتعني أنَّه لا يجب التحقق من الأخطاء الإملائية والقاعدية في هذا العنصر.

يجدر بالذكر أنَّ هذه الخاصية أضيفت إلى HTML5، ولم تكن موجودةً فيما سبق.

src

إذا كانت قيمة الخاصية type تساوي image، فهذه الخاصية تُحدِّد رابط URI يُشير إلى الصورة التي ستُعرَض في الزر، وإلا فسيتم تجاهلها.

<input type="image" name="image" width="30" height="30" alt="أرسل" src="send.svg">

step

تستعمل هذه الخاصية مع الخاصيتين min و max لتحديد مقدار الزيادة في القيم الرقمية (أو قيم التاريخ والوقت). يمكن أن تأخذ هذه الخاصية السلسلة النصية any أو أيّ رقم عشري موجب.

إذا لم تُضبَط هذه الخاصية إلى any فسيقبل الحقل أيّة قيم من مضاعفات الخطوة (قيمة هذه الخاصية) وأكبر من القيمة الدنيا.

<input type="number" placeholder="مضاعفات العدد 10" step="10">

usemap

اسم أحد عناصر <map> ليستعمل كخريطة، لكن هذه الخاصية قد حُذِفَت في HTML5 ولا ينصح باستخدامها.

value

القيمة الابتدائية للحقل، وهذا الخاصية اختيارية إلا إذا كانت قيمة الخاصية type تساوي radio أو checkbox.

<input type="checkbox" name="subscribe" value="newsletter">

width

إذا كانت قيمة الخاصية type هي image، فهذه الخاصية تُحدِّد عرض الصورة المعروضة في الزر.

يجدر بالذكر أنَّ هذه الخاصية أضيفت إلى HTML5، ولم تكن موجودةً فيما سبق.

<input type="image" name="image" width="30" height="30" alt="أرسل" src="send.svg">

ملاحظات

حقول رفع الملفات

إذا تم استدعاء الدالة click()‎ على عنصر input له القيمة file لخاصية type فسيُفتَح منتقي الملفات، ويُسمَح للمستخدم باختيار ملف.

لا تستطيع ضبط قيمة الخاصية value لمنتقي الملفات، فالشيفرة الآتية لا تأثير لها:

var e = getElementById("FileInputElement");
e.value = "foo";

عند اختيار ملف في حقل file، فلن يكون المسار الحقيقي للملف محفوظًا في الخاصية value للعنصر <input> لأسباب أمنية، وإنما سيُعرَض اسم الملف مع وضع C:\fakepath\‎ قبله. هنالك أسباب تاريخية وراء ذلك، لكن جميع المتصفحات الحديثة تفعله وهو موجود في المواصفة.

التوطين (Localization)

يسمح التوطين لبعض أنواع العنصر <input> بأن تعتمد على المحلية (locale)، ففي بعض المحليات يكون الرقم 1,000.00 صحيحًا، وفي بعضها الآخر يُكتَب هكذا 1.000,00.

سيحاول المتصفح الاستدلال بالطرائق الآتية لتحديد المحلية للتأكد من صحة مدخلات المستخدم:

• تجربة اللغة المُحدَّدة عبر الخاصية lang/xml:lang على العنصر أو على أحد آبائه.
• تجربة اللغة المُحدَّدة عبر ترويسة HTTP المسماة Content-Language.
• إن لم يجد، فسيستخدم المحلية الخاصة بالمتصفح.

مصادر ومواصفات

• معيار HTML Living Standard.
• مواصفة HTML5.
• مواصفة HTML 4.01.