الفرق بين المراجعتين ل"HTML/input"
(9 مراجعات متوسطة بواسطة نفس المستخدم غير معروضة) | |||
سطر 2: | سطر 2: | ||
يُستخدَم العنصر <code><input></code> لإنشاء عناصر تفاعلية للنماذج في صفحات الويب التي تقبل معطيات من المستخدم، ثم تُرسَل إلى الخادوم. | يُستخدَم العنصر <code><input></code> لإنشاء عناصر تفاعلية للنماذج في صفحات الويب التي تقبل معطيات من المستخدم، ثم تُرسَل إلى الخادوم. | ||
− | لتأخذ فكرة عن طريقة عمل (وشكل) مختلف أنواع العنصر <code><input></code>، فجرّب تعديل قيمة الخاصية <code>type</code> في [ | + | لتأخذ فكرة عن طريقة عمل (وشكل) مختلف أنواع العنصر <code><input></code>، فجرّب تعديل قيمة الخاصية <code>type</code> في [http://jsfiddle.net/o5pfkejo/1/embedded/result/ المثال الحي الآتي]، وسترى الناتج يُحدَّث أثناء كتابتك. وستُمثِّل القيمة الابتدائية (text) حقل إدخال نصيّ عادي، لكنك يمكنك تجربة قيم أخرى مثل <code>[[HTML/input/number|number]]</code> و <code>[[HTML/input/color|color]]</code> و <code>[[HTML/input/checkbox|checkbox]]</code> و <code>[[HTML/input/radio|radio]]</code> و <code>[[HTML/input/date|date]]</code> و <code>[[HTML/input/file|file]]</code> و <code>[[HTML/input/month|month]]</code> و <code>[[HTML/input/password|password]]</code> و <code>[[HTML/input/range|range]]</code> و <code>[[HTML/input/time|time]]</code>. |
مثال عن حقل نصي <code>[[HTML/input/text|text]]</code> بسيط نموذجي:<syntaxhighlight lang="html"> | مثال عن حقل نصي <code>[[HTML/input/text|text]]</code> بسيط نموذجي:<syntaxhighlight lang="html"> | ||
− | <input type="text" name=" | + | <input type="text" name="name"> |
</syntaxhighlight>مثال عن نموذج [[HTML/form|<form>]] مع حقل نصي <code>[[HTML/input/text|text]]</code> وزر إرسال <code>[[HTML/input/submit|submit]]</code>:<syntaxhighlight lang="html"> | </syntaxhighlight>مثال عن نموذج [[HTML/form|<form>]] مع حقل نصي <code>[[HTML/input/text|text]]</code> وزر إرسال <code>[[HTML/input/submit|submit]]</code>:<syntaxhighlight lang="html"> | ||
<form action="" method="get"> | <form action="" method="get"> | ||
− | <label for="name"> | + | <label for="name">الاسم:</label> |
<input id="name" type="text" name="name"> | <input id="name" type="text" name="name"> | ||
− | <input type="submit" value=" | + | <input type="submit" value="أرسل"> |
</form> | </form> | ||
+ | |||
</syntaxhighlight>ستجد عدِّة أمثلة عن استخدام العنصر <code><input></code> في الصفحات التي تشرح كل نوع من [[#أنواع العنصر <input>|أنواعه]]. | </syntaxhighlight>ستجد عدِّة أمثلة عن استخدام العنصر <code><input></code> في الصفحات التي تشرح كل نوع من [[#أنواع العنصر <input>|أنواعه]]. | ||
+ | {{Course|course=frontend}} | ||
+ | __TOC__ | ||
+ | == بطاقة العنصر == | ||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
سطر 48: | سطر 52: | ||
=== <code>[[HTML/input/button|button]]</code> === | === <code>[[HTML/input/button|button]]</code> === | ||
− | زر قابل للضغط ليس له سلوك افتراضي. | + | زر قابل للضغط ليس له سلوك افتراضي.<syntaxhighlight lang="html"> |
− | <input type="button" value=" | + | <input type="button" value="اضغط هنا"> |
</syntaxhighlight> | </syntaxhighlight> | ||
=== <code>[[HTML/input/checkbox|checkbox]]</code> === | === <code>[[HTML/input/checkbox|checkbox]]</code> === | ||
− | صندوق تأشير يسمح أن تكون قيمته مختارة أو غير مختارة. | + | صندوق تأشير يسمح أن تكون قيمته مختارة أو غير مختارة.<syntaxhighlight lang="html"> |
− | <input | + | <label for="checkbox">صندوق تأشير</label> |
+ | <input type="checkbox" name="checkbox" id="checkbox"> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
=== <code>[[HTML/input/color|color]]</code> === | === <code>[[HTML/input/color|color]]</code> === | ||
− | حقل لاختيار لون ما، أضيف هذا الحقل في HTML5. | + | حقل لاختيار لون ما، أضيف هذا الحقل في HTML5.<syntaxhighlight lang="html"> |
− | <input type="color"> | + | <input type="color" name="color"> |
</syntaxhighlight> | </syntaxhighlight> | ||
=== <code>[[HTML/input/date|date]]</code> === | === <code>[[HTML/input/date|date]]</code> === | ||
− | حقل لاختيار التاريخ (السنة والشهر واليوم، لكن دون الوقت)، أضيف هذا الحقل في HTML5. | + | حقل لاختيار التاريخ (السنة والشهر واليوم، لكن دون الوقت)، أضيف هذا الحقل في HTML5.<syntaxhighlight lang="html"> |
− | <input | + | <input type="date" name="date"> |
</syntaxhighlight> | </syntaxhighlight> | ||
=== <code>[[HTML/input/datetime-local|datetime-local]]</code> === | === <code>[[HTML/input/datetime-local|datetime-local]]</code> === | ||
− | حقل لاختيار التاريخ والوقت، لكن دون المنطقة الزمنية؛ أضيف هذا الحقل في HTML5. | + | حقل لاختيار التاريخ والوقت، لكن دون المنطقة الزمنية؛ أضيف هذا الحقل في HTML5.<syntaxhighlight lang="html"> |
− | <input | + | <input type="datetime-local" name="datetime"> |
</syntaxhighlight> | </syntaxhighlight> | ||
=== <code>[[HTML/input/email|email]]</code> === | === <code>[[HTML/input/email|email]]</code> === | ||
− | حقل لإدخال عنوان بريد إلكتروني، وأضيف هذا الحقل في HTML5. | + | حقل لإدخال عنوان بريد إلكتروني، وأضيف هذا الحقل في HTML5.<syntaxhighlight lang="html"> |
− | <input | + | <input type="email" name="email"> |
</syntaxhighlight> | </syntaxhighlight> | ||
=== <code>[[HTML/input/file|file]]</code> === | === <code>[[HTML/input/file|file]]</code> === | ||
− | حقل يسمح للمستخدم باختيار ملف لرفعه. استخدم الخاصية <code>accept</code> لتحديد أنواع الملفات التي يمكن اختيارها. | + | حقل يسمح للمستخدم باختيار ملف لرفعه. استخدم الخاصية <code>accept</code> لتحديد أنواع الملفات التي يمكن اختيارها.<syntaxhighlight lang="html"> |
<input type="file" id="file"> | <input type="file" id="file"> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
=== <code>[[HTML/input/hidden|hidden]]</code> === | === <code>[[HTML/input/hidden|hidden]]</code> === | ||
− | حقل مخفي لكن قيمته ستُرسَل إلى | + | حقل مخفي لكن قيمته ستُرسَل إلى الخادم.<syntaxhighlight lang="html"> |
− | <input | + | <input type="hidden" id="hidden_prop" name="hidden_prop" value="قيمة ما"> |
− | |||
</syntaxhighlight> | </syntaxhighlight> | ||
=== <code>[[HTML/input/image|image]]</code> === | === <code>[[HTML/input/image|image]]</code> === | ||
− | زر قابل للضغط فيه صورة. عليك استخدام الخاصية <code>src</code> لتحديد مصدر الصورة، والخاصية <code>alt</code> لتحديد نص بديل، يمكنك أيضًا استخدام الخاصيات <code>height</code> و <code>width</code> لتحديد أبعاد الصورة بالبكسل. | + | زر قابل للضغط فيه صورة. عليك استخدام الخاصية <code>src</code> لتحديد مصدر الصورة، والخاصية <code>alt</code> لتحديد نص بديل، يمكنك أيضًا استخدام الخاصيات <code>height</code> و <code>width</code> لتحديد أبعاد الصورة بالبكسل.<syntaxhighlight lang="html"> |
− | <input | + | <input type="image" name="image" width="30" height="30" alt="أرسل" src="send.svg"> |
− | |||
</syntaxhighlight> | </syntaxhighlight> | ||
=== <code>[[HTML/input/month|month]]</code> === | === <code>[[HTML/input/month|month]]</code> === | ||
− | حقل لإدخال الشهر والسنة، أضيف هذا الحقل في HTML5. | + | حقل لإدخال الشهر والسنة، أضيف هذا الحقل في HTML5.<syntaxhighlight lang="html"> |
− | <input | + | <input type="month" name="month"> |
− | |||
</syntaxhighlight> | </syntaxhighlight> | ||
=== <code>[[HTML/input/number|number]]</code> === | === <code>[[HTML/input/number|number]]</code> === | ||
− | حقل لإدخال رقم، أضيف هذا الحقل في HTML5. | + | حقل لإدخال رقم، أضيف هذا الحقل في HTML5.<syntaxhighlight lang="html"> |
− | <input | + | <input type="number" name="number"> |
− | |||
</syntaxhighlight> | </syntaxhighlight> | ||
=== <code>[[HTML/input/password|password]]</code> === | === <code>[[HTML/input/password|password]]</code> === | ||
− | حقل نصي ذو سطرٍ وحيد لا تُعرَض قيمته النصية للمستخدم. استخدم الخاصية <code>maxlength</code> لتحديد الطول الأقصى للقيمة التي يمكن أن يدخلها المستخدم. | + | حقل نصي ذو سطرٍ وحيد لا تُعرَض قيمته النصية للمستخدم. استخدم الخاصية <code>maxlength</code> لتحديد الطول الأقصى للقيمة التي يمكن أن يدخلها المستخدم.<syntaxhighlight lang="html"> |
− | <input | + | <input type="password" name="password"> |
− | |||
</syntaxhighlight> | </syntaxhighlight> | ||
=== <code>[[HTML/input/radio|radio]]</code> === | === <code>[[HTML/input/radio|radio]]</code> === | ||
− | زر انتقاء، يسمح باختيار قيمة من مجموعة خيارات. | + | زر انتقاء، يسمح باختيار قيمة من مجموعة خيارات.<syntaxhighlight lang="html"> |
− | <input | + | <label for="radio">زر انتقاء</label> |
− | + | <input type="radio" name="radio" id="radio"> | |
</syntaxhighlight> | </syntaxhighlight> | ||
=== <code>[[HTML/input/range|range]]</code> === | === <code>[[HTML/input/range|range]]</code> === | ||
− | حقل لتحديد قيمة عددية ضمن مجال معيّن، أضيف هذا الحقل في HTML5. | + | حقل لتحديد قيمة عددية ضمن مجال معيّن، أضيف هذا الحقل في HTML5.<syntaxhighlight lang="html"> |
− | <input type="range"> | + | <input type="range" name="range"> |
− | |||
</syntaxhighlight> | </syntaxhighlight> | ||
=== <code>[[HTML/input/reset|reset]]</code> === | === <code>[[HTML/input/reset|reset]]</code> === | ||
− | زر يُعيد ضبط حقول النموذج إلى قيمها الإبتدائية. | + | زر يُعيد ضبط حقول النموذج إلى قيمها الإبتدائية.<syntaxhighlight lang="html"> |
− | <input type="reset"> | + | <input type="reset" name="reset"> |
</syntaxhighlight> | </syntaxhighlight> | ||
=== <code>[[HTML/input/search|search]]</code> === | === <code>[[HTML/input/search|search]]</code> === | ||
− | حقل نصي ذو سطر وحيد لإدخال عبارات البحث، وستُحذَف الأسطر الجديدة فيه تلقائيًا. أضيف هذا الحقل في HTML5. | + | حقل نصي ذو سطر وحيد لإدخال عبارات البحث، وستُحذَف الأسطر الجديدة فيه تلقائيًا. أضيف هذا الحقل في HTML5.<syntaxhighlight lang="html"> |
− | <input type="search"> | + | <input type="search" name="search"> |
</syntaxhighlight> | </syntaxhighlight> | ||
=== <code>[[HTML/input/submit|submit]]</code> === | === <code>[[HTML/input/submit|submit]]</code> === | ||
− | زر يؤدي إلى إرسال النموذج. | + | زر يؤدي إلى إرسال النموذج.<syntaxhighlight lang="html"> |
− | <input type="submit"> | + | <input type="submit" value="أرسل"> |
− | |||
</syntaxhighlight> | </syntaxhighlight> | ||
=== <code>[[HTML/input/tel|tel]]</code> === | === <code>[[HTML/input/tel|tel]]</code> === | ||
− | حقل لإدخال رقم هاتف، وستُحذَف الأسطر الجديدة تلقائيًا من المدخلات، لكن لا توجد صيغة مُحدَّدة لأرقام الهواتف. يمكن استخدام خاصيات مثل <code>pattern</code> و <code>maxlength</code> لفرض قيود على القيم المُدخَلة في هذا الحقل. أضيف هذا الحقل في HTML5. | + | حقل لإدخال رقم هاتف، وستُحذَف الأسطر الجديدة تلقائيًا من المدخلات، لكن لا توجد صيغة مُحدَّدة لأرقام الهواتف. يمكن استخدام خاصيات مثل <code>pattern</code> و <code>maxlength</code> لفرض قيود على القيم المُدخَلة في هذا الحقل. أضيف هذا الحقل في HTML5.<syntaxhighlight lang="html"> |
+ | <input type="tel" name="tel"> | ||
+ | </syntaxhighlight> | ||
=== <code>[[HTML/input/text|text]]</code> === | === <code>[[HTML/input/text|text]]</code> === | ||
سطر 148: | سطر 148: | ||
=== <code>[[HTML/input/time|time]]</code> === | === <code>[[HTML/input/time|time]]</code> === | ||
− | حقل لإدخال قيمة للوقت دون منطقة زمنية، أضيف هذا العنصر في HTML5. | + | حقل لإدخال قيمة للوقت دون منطقة زمنية، أضيف هذا العنصر في HTML5.<syntaxhighlight lang="html"> |
− | <input | + | <input type="time" name="time"> |
</syntaxhighlight> | </syntaxhighlight> | ||
=== <code>[[HTML/input/url|url]]</code> === | === <code>[[HTML/input/url|url]]</code> === | ||
− | حقل لإدخال رابط URL، ويجب أن تكون قيمة هذا الحقل رابط URL صالح، ويمكن استخدام خاصيات مثل <code>pattern</code> و <code>maxlength</code> لفرض قيود على القيم المُدخَلة في هذا الحقل. أضيف هذا الحقل في HTML5. | + | حقل لإدخال رابط URL، ويجب أن تكون قيمة هذا الحقل رابط URL صالح، ويمكن استخدام خاصيات مثل <code>pattern</code> و <code>maxlength</code> لفرض قيود على القيم المُدخَلة في هذا الحقل. أضيف هذا الحقل في HTML5.<syntaxhighlight lang="html"> |
+ | <input type="url" name="url"> | ||
+ | </syntaxhighlight> | ||
=== <code>[[HTML/input/week|week]]</code> === | === <code>[[HTML/input/week|week]]</code> === | ||
حقل لإدخال تاريخ يحتوي على السنة ورقم الأسبوع.<syntaxhighlight lang="html"> | حقل لإدخال تاريخ يحتوي على السنة ورقم الأسبوع.<syntaxhighlight lang="html"> | ||
− | <input | + | <input type="week" name="week"> |
− | |||
</syntaxhighlight> | </syntaxhighlight> | ||
سطر 176: | سطر 177: | ||
==== <code>accept</code> ==== | ==== <code>accept</code> ==== | ||
إذا كانت قيمة الخاصية <code>type</code> هي <code>[[HTML/input/file|file]]</code>، فستُشير هذه الخاصية إلى أنواع الملفات التي يقبلها الخادوم، وبقية الأنواع سيتجاهلها المتصفح، يجب أن تكون قيمة هذه الخاصية هي قائمة مفصولة بفاصلة لمُحدِّدات أنواع الملفات. راجع صفحة الحقل <code>[[HTML/input/file|file]]</code> للتفاصيل.<syntaxhighlight lang="html"> | إذا كانت قيمة الخاصية <code>type</code> هي <code>[[HTML/input/file|file]]</code>، فستُشير هذه الخاصية إلى أنواع الملفات التي يقبلها الخادوم، وبقية الأنواع سيتجاهلها المتصفح، يجب أن تكون قيمة هذه الخاصية هي قائمة مفصولة بفاصلة لمُحدِّدات أنواع الملفات. راجع صفحة الحقل <code>[[HTML/input/file|file]]</code> للتفاصيل.<syntaxhighlight lang="html"> | ||
− | + | <input type="file" name="profile_pic" accept=".jpg, .jpeg, .png"> | |
− | |||
</syntaxhighlight> | </syntaxhighlight> | ||
سطر 214: | سطر 214: | ||
====<code>checked</code>==== | ====<code>checked</code>==== | ||
عندما تكون قيمة الخاصية <code>type</code> تساوي <code>[[HTML/input/radio|radio]]</code> أو <code>[[HTML/input/checkbox|checkbox]]</code> فإنَّ وجود هذه الخاصية المنطقية يُشير إلى أنَّ الحقل مُختار افتراضيًا، فيما عدا ذلك فستكون هذه الخاصية مهملة.<syntaxhighlight lang="html"> | عندما تكون قيمة الخاصية <code>type</code> تساوي <code>[[HTML/input/radio|radio]]</code> أو <code>[[HTML/input/checkbox|checkbox]]</code> فإنَّ وجود هذه الخاصية المنطقية يُشير إلى أنَّ الحقل مُختار افتراضيًا، فيما عدا ذلك فستكون هذه الخاصية مهملة.<syntaxhighlight lang="html"> | ||
− | <input type="checkbox" name=" | + | <label for="checkbox">صندوق تأشير</label> |
+ | <input type="checkbox" name="checkbox" id="checkbox" checked> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
سطر 229: | سطر 230: | ||
يجدر بالذكر أنَّ هذه الخاصية أضيفت إلى HTML5، ولم تكن موجودةً فيما سبق.<syntaxhighlight lang="html"> | يجدر بالذكر أنَّ هذه الخاصية أضيفت إلى HTML5، ولم تكن موجودةً فيما سبق.<syntaxhighlight lang="html"> | ||
<form action="action_page.php" id="form1"> | <form action="action_page.php" id="form1"> | ||
− | + | الاسم: <input type="text" name="username"> | |
</form> | </form> | ||
<input type="submit" form="form1"> | <input type="submit" form="form1"> | ||
سطر 241: | سطر 242: | ||
يجدر بالذكر أنَّ هذه الخاصية أضيفت إلى HTML5، ولم تكن موجودةً فيما سبق.<syntaxhighlight lang="html"> | يجدر بالذكر أنَّ هذه الخاصية أضيفت إلى HTML5، ولم تكن موجودةً فيما سبق.<syntaxhighlight lang="html"> | ||
<form action="action_page.php"> | <form action="action_page.php"> | ||
− | + | الاسم: <input type="text" name="username"> | |
<input type="submit" formaction="action_page2.php"> | <input type="submit" formaction="action_page2.php"> | ||
</form> | </form> | ||
− | |||
</syntaxhighlight> | </syntaxhighlight> | ||
سطر 263: | سطر 263: | ||
يجدر بالذكر أنَّ هذه الخاصية أضيفت إلى HTML5، ولم تكن موجودةً فيما سبق.<syntaxhighlight lang="html"> | يجدر بالذكر أنَّ هذه الخاصية أضيفت إلى HTML5، ولم تكن موجودةً فيما سبق.<syntaxhighlight lang="html"> | ||
<form action="action_page.php" method="post"> | <form action="action_page.php" method="post"> | ||
− | + | الاسم: <input type="text" name="username"> | |
<input type="submit" formmethod="get"> | <input type="submit" formmethod="get"> | ||
</form> | </form> | ||
− | |||
</syntaxhighlight> | </syntaxhighlight> | ||
سطر 276: | سطر 275: | ||
يجدر بالذكر أنَّ هذه الخاصية أضيفت إلى HTML5، ولم تكن موجودةً فيما سبق.<syntaxhighlight lang="html"> | يجدر بالذكر أنَّ هذه الخاصية أضيفت إلى HTML5، ولم تكن موجودةً فيما سبق.<syntaxhighlight lang="html"> | ||
<form action="action_page.php"> | <form action="action_page.php"> | ||
− | + | الاسم: <input type="text" name="username"> | |
<input type="submit" formnovalidate> | <input type="submit" formnovalidate> | ||
</form> | </form> | ||
سطر 296: | سطر 295: | ||
يجدر بالذكر أنَّ هذه الخاصية أضيفت إلى HTML5، ولم تكن موجودةً فيما سبق.<syntaxhighlight lang="html"> | يجدر بالذكر أنَّ هذه الخاصية أضيفت إلى HTML5، ولم تكن موجودةً فيما سبق.<syntaxhighlight lang="html"> | ||
− | <input | + | <input type="image" name="image" width="30" height="30" alt="أرسل" src="send.svg"> |
</syntaxhighlight> | </syntaxhighlight> | ||
سطر 317: | سطر 316: | ||
يجدر بالذكر أنَّ هذه الخاصية أضيفت إلى HTML5، ولم تكن موجودةً فيما سبق.<syntaxhighlight lang="html"> | يجدر بالذكر أنَّ هذه الخاصية أضيفت إلى HTML5، ولم تكن موجودةً فيما سبق.<syntaxhighlight lang="html"> | ||
− | <label> | + | <label>اختر متصفحك من القائمة: |
− | <input list="browsers" name="myBrowser" | + | <input type="text" list="browsers" name="myBrowser"></label> |
<datalist id="browsers"> | <datalist id="browsers"> | ||
<option value="Chrome"> | <option value="Chrome"> | ||
سطر 378: | سطر 377: | ||
يجدر بالذكر أنَّ هذه الخاصية أضيفت إلى HTML5، ولم تكن موجودةً فيما سبق.<syntaxhighlight lang="html"> | يجدر بالذكر أنَّ هذه الخاصية أضيفت إلى HTML5، ولم تكن موجودةً فيما سبق.<syntaxhighlight lang="html"> | ||
− | <input type="email" pattern=".+@ | + | <input type="email" pattern=".+@hsoub.com"> |
</syntaxhighlight> | </syntaxhighlight> | ||
سطر 387: | سطر 386: | ||
يجدر بالذكر أنَّ هذه الخاصية أضيفت إلى HTML5، ولم تكن موجودةً فيما سبق.<syntaxhighlight lang="html"> | يجدر بالذكر أنَّ هذه الخاصية أضيفت إلى HTML5، ولم تكن موجودةً فيما سبق.<syntaxhighlight lang="html"> | ||
− | <input type="email" pattern=".+@ | + | <input type="email" pattern=".+@hsoub.com" placeholder="user@hsoub.com"> |
</syntaxhighlight> | </syntaxhighlight> | ||
سطر 420: | سطر 419: | ||
==== <code>src</code> ==== | ==== <code>src</code> ==== | ||
إذا كانت قيمة الخاصية <code>type</code> تساوي <code>[[HTML/input/image|image]]</code>، فهذه الخاصية تُحدِّد رابط URI يُشير إلى الصورة التي ستُعرَض في الزر، وإلا فسيتم تجاهلها.<syntaxhighlight lang="html"> | إذا كانت قيمة الخاصية <code>type</code> تساوي <code>[[HTML/input/image|image]]</code>، فهذه الخاصية تُحدِّد رابط URI يُشير إلى الصورة التي ستُعرَض في الزر، وإلا فسيتم تجاهلها.<syntaxhighlight lang="html"> | ||
− | <input | + | <input type="image" name="image" width="30" height="30" alt="أرسل" src="send.svg"> |
− | |||
</syntaxhighlight> | </syntaxhighlight> | ||
==== <code>step</code> ==== | ==== <code>step</code> ==== | ||
سطر 427: | سطر 425: | ||
إذا لم تُضبَط هذه الخاصية إلى <code>any</code> فسيقبل الحقل أيّة قيم من مضاعفات الخطوة (قيمة هذه الخاصية) وأكبر من القيمة الدنيا.<syntaxhighlight lang="html"> | إذا لم تُضبَط هذه الخاصية إلى <code>any</code> فسيقبل الحقل أيّة قيم من مضاعفات الخطوة (قيمة هذه الخاصية) وأكبر من القيمة الدنيا.<syntaxhighlight lang="html"> | ||
− | <input type="number" placeholder=" | + | <input type="number" placeholder="مضاعفات العدد 10" step="10"> |
</syntaxhighlight> | </syntaxhighlight> | ||
سطر 442: | سطر 440: | ||
يجدر بالذكر أنَّ هذه الخاصية أضيفت إلى HTML5، ولم تكن موجودةً فيما سبق.<syntaxhighlight lang="html"> | يجدر بالذكر أنَّ هذه الخاصية أضيفت إلى HTML5، ولم تكن موجودةً فيما سبق.<syntaxhighlight lang="html"> | ||
− | <input | + | <input type="image" name="image" width="30" height="30" alt="أرسل" src="send.svg"> |
− | |||
</syntaxhighlight> | </syntaxhighlight> | ||
== ملاحظات == | == ملاحظات == | ||
سطر 451: | سطر 448: | ||
لا تستطيع ضبط قيمة الخاصية <code>value</code> لمنتقي الملفات، فالشيفرة الآتية لا تأثير لها:<syntaxhighlight lang="javascript"> | لا تستطيع ضبط قيمة الخاصية <code>value</code> لمنتقي الملفات، فالشيفرة الآتية لا تأثير لها:<syntaxhighlight lang="javascript"> | ||
− | var e = getElementById(" | + | var e = getElementById("FileInputElement"); |
e.value = "foo"; | e.value = "foo"; | ||
</syntaxhighlight>عند اختيار ملف في حقل [[HTML/input/file|file]]، فلن يكون المسار الحقيقي للملف محفوظًا في الخاصية <code>value</code> للعنصر <code><input></code> لأسباب أمنية، وإنما سيُعرَض اسم الملف مع وضع <code>C:\fakepath\</code> قبله. هنالك أسباب تاريخية وراء ذلك، لكن جميع المتصفحات الحديثة تفعله وهو [https://www.w3.org/TR/html5/forms.html#fakepath-srsly موجود في المواصفة]. | </syntaxhighlight>عند اختيار ملف في حقل [[HTML/input/file|file]]، فلن يكون المسار الحقيقي للملف محفوظًا في الخاصية <code>value</code> للعنصر <code><input></code> لأسباب أمنية، وإنما سيُعرَض اسم الملف مع وضع <code>C:\fakepath\</code> قبله. هنالك أسباب تاريخية وراء ذلك، لكن جميع المتصفحات الحديثة تفعله وهو [https://www.w3.org/TR/html5/forms.html#fakepath-srsly موجود في المواصفة]. | ||
سطر 467: | سطر 464: | ||
*مواصفة [http://www.w3.org/TR/html5/forms.html#the-input-element HTML5]. | *مواصفة [http://www.w3.org/TR/html5/forms.html#the-input-element HTML5]. | ||
*مواصفة [http://www.w3.org/TR/html401/interact/forms.html#h-17.4 HTML 4.01]. | *مواصفة [http://www.w3.org/TR/html401/interact/forms.html#h-17.4 HTML 4.01]. | ||
− | [[تصنيف: | + | [[تصنيف:HTML|{{SUBPAGENAME}}]] |
− | [[تصنيف:HTML]] | + | [[تصنيف:HTML Elements|{{SUBPAGENAME}}]] |
− | [[تصنيف:HTML | + | [[تصنيف:HTML Forms|{{SUBPAGENAME}}]] |
المراجعة الحالية بتاريخ 08:50، 23 يونيو 2022
يُستخدَم العنصر <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>
في الصفحات التي تشرح كل نوع من أنواعه.
- 66 ساعة فيديو تدريبية
- من الصفر دون الحاجة لخبرة مسبقة
- شهادة معتمدة من أكاديمية حسوب
- متابعة أثناء الدورة من فريق مختص
بطاقة العنصر
تصنيفات المحتوى | عنصر تنظيمي وعنصر عادي وعنصر مرتبط بالنماذج. |
---|---|
المحتوى المسموح | لا يوجد، فهو عنصرٌ فارغ. |
الوسم المختصر | يجب أن يكون وسم البداية موجودًا، ويجب أن يُحذَف وسم النهاية. |
العناصر الأب | أي عنصر يقبل المحتوى العادي. |
واجهة 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">
حقل مخفي لكن قيمته ستُرسَل إلى الخادم.
<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.