HTML

HTML Form Input Secondary Attributes
خصائص عنصر Input الثانوية مع HTML Form

سوف تتعرف في هذا الدرس على بعض الخصائص التي تُضاف إلى عنصر input مع HTML form، ووظيفة كل خاصية وسبب استخدامها.

التاريخ

07 يناير 2021

الدروس

48

المستوى

مبتدئ

اللغة

عربي

المشاهدات

1767

المواضيع

12
الشروحات chevron_left HTML Form Input Secondary Attributes chevron_left HTML

HTML Form Secondary Input Attributes
خصائص عنصر Input الثانوية مع HTML Form

</> HTML form input readonly attribute
خاصية readonly مع عنصر input في HTML form

تُستخدم خاصية readonly لتجعل input الحقل مقروء فقط ولا يتمكّن المستخدم من التعديل عليه.

  • لا يمكن التعديل على القيمة الموجودة داخل خاصية readonly مع عنصر input.
  • يمكن أن نستخدم زر tab للتنقل بين other inputs بقية الحقول.
  • يمكن عمل highlight على القيمة الموجودة داخل خاصية readonly.
  • يمكن أن تُنسخ القيمة الموجودة داخل  خاصية readonly.
Form input readonly attribute

القيمة داخل خاصية readonly ثابتة وافتراضية ولا تتغير، لذلك يتم اختصارها وكتابتها بدون قيمة.

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="Mohamed" readonly><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Aly" readonly>
</form>

</> HTML form input disabled attribute
خاصية disabled مع عنصر input في HTML form

تُستخدم خاصية disabled لتجعل input الحقل مُعطل أو غير فعال.

  • unusable لا يمكن التعديل على القيمة الموجودة داخل خاصية disabled مع عنصر input.
  • un-clickable لا يمكن الضغط على القيمة الموجودة داخل خاصية disabled مع عنصر input.
  • untab لا يمكن استخدم زر tab للتنقل بين other inputs بقية الحقول إذا كانت من نوع disabled.
  • unhighlight يمكن عمل highlight على القيمة الموجودة داخل خاصية disabled.
  • copy يمكن أن تُنسخ القيمة الموجودة داخل  خاصية disabled.
Form input disabled attribute

القيمة داخل خاصية disabled ثابتة وافتراضية ولا تتغير، لذلك يتم اختصارها وكتابتها بدون قيمة.

<form>
  <label for="fname">First Name:</label><br>
  <input type="text" id="fname" value="Ahmed" ><br>
  <label for="lname">Last Name:</label><br>
  <input type="text" id="lname" value="Hamdy" disabled><br>
</form>

</> HTML form input size attribute
خاصية size مع عنصر input في HTML form

تستخدم خاصية size مع عنصر input بداخل HTML form لتحديد عرض input الحقل الذي يظهر على المتصفح وجعله بنفس قدر عرض الحروف.

  • القيمة الافتراضية لخاصية size هي 20 حرف.
  • خاصية size تعمل مع الحقول من النوع: text, search, tel, url, email, and password.
HTML form input size attribute

استخدم خاصية size مع عنصر input بداخل HTML form لجعل عرض input الحقل مساوياً لمقدار الحروف داخله.

<form>
  <label for="email">Email:</label><br>
  <input type="email" id="email"  size="50"><br>
  <label for="username">Username:</label><br>
  <input type="text" id="username" size="15"><br>
</form>

</> HTML form input maxlength attribute
خاصية maxlength مع عنصر input في HTML form

تُستخدم خاصية maxlength مع HTML form input لتحديد أقصى عدد للحروف داخل عنصر input.

  • لا يسمح بكتابة عدد حروف داخل عنصر input أكثر من عدد الحروف المحدّد داخل قيمة maxlength.
HTML form input maxlength attribute

استخدم خاصية maxlength مع HTML form input لتحديد أقصى عدد للحروف داخل عنصر input.

<form>
  <label for="email">Email:</label><br>
  <input type="email" id="email"><br>
  <label for="username">Username:</label><br>
  <input type="text" id="username" maxlength="5"><br>
</form>

</> HTML form input min and max attribute
خاصية min وخاصية max مع عنصر input في HTML form

تُستخدم خاصية min وخاصية max مع عنصر form input لتحديد أصغر وأكبر قيمة يمكن إدخالها داخل الحقل  input.

  • تعمل خاصية min وخاصية max مع inputs الحقول من النوع: number, range, date, datetime-local, month, time and week.
  • تُستخدم خاصية min وخاصية max لتحديد مجال القيم المسموح بها (من إلى) from to.
HTML form input min and max attribute

مثال يوضح طريقة تحديد مجال القيم المسموح إدخالها، عن طريق تحديد القيمة 1 كأصغر قيمة مسموح بها وتحديد القيمة 5 كأكبر قيمة مسموح بها.

<form>
  <label for="quantity">Product QTY:</label><br>
  <input type="number" id="quantity" min="1" max="5">
</form>

</> HTML form input required attribute
خاصية required مع عنصر input في HTML form

تُستخدم خاصية required attribute لتحديد input  الحقول الإجبارية التي يُطلب من المستخدم تعبئتها قبل  الضغط على زر submit.

  • تعمل خاصية required attribute مع الحقول من النوع: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.
HTML form input required attribute

استخدام خاصية required لإظهار رسالة تخبر المستخدم أن ملء الحقل إجباري، حتى يستطيع النقر على زر submit وإرسال النموذج إلى الخادم.

<form>
  <label for="username">Username:</label><br>
  <input type="text" id="username" name="username" required><br><br>
  <input type="submit" value="Submit">
</form>

</> HTML form input autocomplete attribute
خاصية autocomplete مع عنصر input في HTML form

تستخدم خاصية autocomplete attribute لحفظ أو إلغاء حفظ البيانات التي كتبها المستخدم داخل هذا input الحقل عندما يقوم بالنقر فوق زر submit.

  • خاصية autocomplete attribute تمكّن المتصفح من حفظ أو إلغاء حفظ القيم السابقة للمستخدم في هذا form input الحقل.
  • خاصية autocomplete attribute تعمل مع عنصر <form> وعنصر <input>.
HTML form input autocomplete attribute

خاصية autocomplete للتحكم في حفظ أو إلغاء حفظ البيانات المُدخلة سابقاً من قبل المستخدم في inputs الحقول.

<form>
  <label for="username" >Username:</label><br>
  <input type="text" id="username" autocomplete="off"><br>
  <label for="username" >Username:</label><br>
  <input type="text" id="username" autocomplete="on"><br>
</form>
مصطلحات الدرس
Formatting
Formatting

تنسيق

Small
Small

صغير

Mark
Mark

علامة

Strong
Strong

قوي

Italic
Italic

مائل

Bold
Bold

عريض

اختصارات الدرس
HTML
HTML

Hypertext Markup Language

لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت
Del
Del

Delete

حذف
Ins
Ins

Insert

إدراج
Sub
Sub

Subscript

نص سفلي
Sup
Sup

Superscript

نص علوي
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
1
1
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات