سمات عنصر الإدخال input في HTML | دروس HTML5

 سمات عنصر الإدخال في HTML


كما ذكرنا في الدرس الخاص بالسمات، توفر السمات معلومات إضافية حول عنصر HTML. ذكرنا في الدرس السابقة بعض هذه الصفات وشرحنا استخدامها. في هذا الدرس، سنركز بشكل خاص على سمات عناصر الإدخال.


السمة  value

يتم تحديد القيمة الأولية لحقل الإدخال بواسطة سمة القيمة. في المثال التالي، تم تعيين القيمة الأولية لحقل إدخال الاسم الأول على John:

<form action="">
First name:<br>
<input type="text" name="firstname" value="John">
</form>

السمة readonly

في بعض الأحيان، تُستخدم حقول الإدخال فقط لعرض قيمة للمستخدم ولا ينبغي للمستخدم تغيير قيمتها. لتحقيق ذلك، نستخدم السمة readonly:

<form action="">
First name:<br>
<input type="text" name="firstname" value="John" readonly>
</form>

السمة disabled

نستخدم السمة المعطلة لعرض حقل الإدخال عندما يكون غير نشط. حقول الإدخال غير نشطة وغير قابلة للنقر وغير قابلة للتحديد، ولا يتم إرسال قيمها إلى الخادم عند إرسالها.

<form action="">
First name:<br>
<input type="text" name="firstname" value="John" disabled>
</form> 

السمة maxlength 

يتم تحديد الحد الأقصى لعدد الأحرف التي يمكن كتابتها في حقل الإدخال بواسطة سمة maxlength. في المثال التالي، تم تعيين الحد الأقصى لعدد الأحرف في حقل الاسم الأول على 10.

<form action="">
First name:<br>
<input type="text" name="firstname" maxlength="10">
</form>

لاحظ أن السمة maxlength لا تقدم تحذيرًا عندما يتجاوز المستخدم العدد المسموح به من الأحرف، ومهمتك كمبرمج هي تقديم هذا التحذير للمستخدم الذي يستخدم لغة JavaScript.

السمات في HTML5

يضيف HTML5 السمات التالية إلى عنصر <input>:

الإكمال التلقائي
ضبط تلقائي للصورة
الشكل
تشكيل - تكوين
فورمينكتيبي
الطريقة
فورموفاليدات
الطول والعرض
القائمة

وبالطبع يوفر أيضًا سمات لعنصر <form>:

الإكمال التلقائي
نوفاليدات 

هنا بعض منها


السمة autocomplete

في السمات التي ذكرناها في القسم السابق، توجد سمة الإكمال التلقائي لكل من عنصر <input> وعنصر <form>.

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

عندما نستخدم هذه السمة لعنصر <form>، فإنها تنطبق على جميع عناصر الإدخال في النموذج. في هذه الحالة، يمكن تمييز عنصر معين عن البقية بالقيمة "autocomplete =" off.

يوضح المثال التالي كيفية استخدام سمة الإكمال التلقائي:

<form action="/action_page.php" autocomplete="on">
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>

قد تحتاج بعض المتصفحات إلى تمكين الإكمال التلقائي لاستخدام الإكمال التلقائي.

السمة novalidate 

تُستخدم هذه السمة لعنصر <form>.

يمكن التحقق من صحة النماذج التي تستخدم لغة JavaScript قبل إرسالها إلى الخادم. لمنع هذا، يمكن استخدام سمة novalidate في النموذج.

يوضح المثال التالي من التعليمات البرمجية كيفية استخدام هذه السمة:

<form action="/action_page.php" novalidate>
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>

هذه الميزة غير مدعومة في Safari و Internet Explorer 9 والإصدارات السابقة.

السمة autofocus

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

يوضح المثال التالي كيفية استخدام هذه الصفة:

First name:<input type="text" name="fname" autofocus>

هذه السمة غير مدعومة في Internet Explorer 9 والإصدارات السابقة.

السمة form 

تحدد سمة النموذج المستخدمة لعناصر الإدخال الشكل الذي ينتمي إليه العنصر.

يوضح المثال التالي كيفية استخدام هذه الصفة:

<form action="/action_page.php" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
</form>

Last name: <input type="text" name="lname" form="form1">

في المثال أعلاه، ينتمي حقل إدخال lname إلى form1. هذه الميزة غير مدعومة في Internet Explorer.

السمة  formaction

تحدد سمة Formaction عنوان الصفحة التي تعالج عنصر تحكم الإدخال عند إرسال النموذج إلى الخادم.

تتجاوز سمة Formaction شكل عمل عنصر <form>.

تُستخدم سمة Formaction مع السمتين "type =" submit و "type =" image.

 في المثال أدناه، يحتوي عنصر النموذج على زري إرسال مع إجراءين مختلفين:

<form action="/action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formaction="/action_page2.php"
value="Submit as admin">

</form>

هذه السمة غير مدعومة في Internet Explorer 9 والإصدارات السابقة.

السمة formenctype

تحدد سمة formenctype كيفية تشفير بيانات النموذج عند الإرسال (فقط للنماذج التي تستخدم "method =" سمة post).

تتجاوز سمة formenctype سمة enformype لعنصر <form>.

يتم استخدام سمة formenctype مع السمتين "type =" submit و "type =" image.

في المثال أدناه، عند النقر على زر الإرسال الأول، يتم تشفير البيانات افتراضيًا، بينما بالنقر فوق زر الإرسال الثاني، يتم ترميز البيانات على أنها "متعددة الأجزاء / بيانات النموذج".

<form action="/action_page_binary.asp" method="post">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
<input type="submit" formenctype="multipart/form-data"
value="Submit as Multipart/form-data">

</form>

هذه السمة غير مدعومة في Internet Explorer 9 والإصدارات السابقة.

السمة formmethod

تحدد سمة formmethod طريقة HTTP لإرسال بيانات النموذج إلى عنوان محدد.

تتجاوز سمة formmethod عنصر <form>.

يتم استخدام سمة formmethod مع السمتين "type =" submit و "type =" image.

في المثال أدناه، عند استخدام زر الإرسال الأول، يتم إرسال البيانات بواسطة طريقة get، بينما يرسل زر الإرسال الثاني البيانات بطريقة النشر.

<form action="/action_page.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
<input type="submit" formmethod="post" formaction="action_page_post.asp"
value="Submit using POST">

</form>

هذه السمة غير مدعومة في Internet Explorer 9 والإصدارات السابقة.

السمة  formnovalidate

السمة formnovalidate تلغي الصفة novalidate النموذج. يمكن استخدام هذه السمة باستخدام السمة "type =" submit.

يوضح المثال التالي نموذجًا به زري إرسال (أحدهما يتحقق والآخر لا):

<form action="/action_page.php">
E-mail: <input type="email" name="userid"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formnovalidate value="Submit without validation">
</form>

هذه الميزة غير مدعومة في Safari و Internet Explorer 9 والإصدارات السابقة.

السمة formtarget

تحدد السمة formtarget مكان عرض استجابة النموذج المرسل إلى الخادم.

تلغي السمة formtarget قيمة السمة الهدف لعنصر النموذج.

في المثال، يُظهر الرمز التالي نموذجًا به زري إرسال يستخدمان هدفين مختلفين:

<form action="/action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit as normal">
<input type="submit" formtarget="_blank"
value="Submit to a new window">

</form>

هذه السمة غير مدعومة في Internet Explorer 9 والإصدارات السابقة.

السمة  placeholder

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

<input type="text" name="fname" placeholder="First name">

هذه السمة غير مدعومة في Internet Explorer 9 والإصدارات السابقة.

السمة required

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

يوضح المثال التالي كيفية استخدام هذه الصفة:

Username: <input type="text" name="usrname" required>


كلمات مفتاحية: