HTML

HTML Form Input Advanced Attributes
الخصائص المتقدمة لعنصر Input مع HTML Form

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

التاريخ

24 يناير 2022

الدروس

48

المستوى

مبتدئ

اللغة

عربي

المشاهدات

1484

المواضيع

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

HTML Form Advanced Input Attributes
خصائص عنصر Input المتقدمة مع HTML Form

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

تُستخدم خاصية multiple attribute مع form input للسماح للمستخدم باختيار أكثر من ملف داخل file input أو إدخال أكثر من بريد إلكتروني.

  • تعمل خاصية multiple attribute مع الحقول من النوع: email and file.
HTML form input multiple attribute

استخدام خاصية multiple لكي يتمكّن المستخدم من إضافة أكثر من ملف داخل حقل input file.

<form>
  <label for="file">Select Files:</label><br>
  <input type="file" id="file" multiple>
</form>

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

تُستخدم خاصية pattern attribute لتحديد الحروف والعلامات والأرقام المسموح بها داخل عنصر form inputs قبل الضغط على زر submit.

  • تعمل خاصية pattern attribute مع الحقول من النوع: text, date, search, url, tel, email, and password.
  • يمكنك استخدام خاصية title مع عنصر input وخاصية pattern attribute لإظهار رسالة تُخبر المستخدم بوجود خطأ في إدخال البيانات داخل الحقل وتخبره بنوع المعلومات التي يجب إدخالها في هذا الحقل.
    لكن لا تظهر رسالة الخطأ إلا بعد الضغط على زر submit.
HTML form input pattern attribute

تحديد نوع البيانات داخل الحقول باستخدام خاصية pattern في HTML form.

<form>
  <label for="country_code">Country code:</label><br>
  <input type="text" id="country_code" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code"><br><br>
  <input type="submit" value="Submit">
</form>

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

تُستخدم step attribute في تحديد مقدار قفزة الزيادة والنقصان برقم محدد ومضاعفاته، فمثلاً لو قمنا بكتابة الرقم 3 كقيمة للخاصية step="3">.

عند النقر على زر  السهم نحو الأعلى سوف يظهر الرقم 3 ثم 6 ثم 9 وهكذا..

والعكس عند الضغط على زر السهم نحو الأسفل سوف تظهر الأرقام 3 ثم 0 ثم -3 ثم -6 وهكذا...

  • تعمل خاصية step attribute مع الحقول من النوع: number, range, date, datetime-local, month, time and week.
  • تعمل خاصية step attribute مع min و max عند تقليل القيمة وتكبيرها.
HTML form input step attribute

استخدام خاصية step في تحديد مقدار قفزة الأرقام عند النقر على سهم الأعلى أو الأسفل.

<form>
  <label for="points">Points:</label>
  <input type="number" id="points" name="points" step="3">
</form>

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

تُستخدم خاصية autofocus attribute لكي يتم الوقوف على input حقل محدّد عند تحميل الصفحة، أي يكون مؤشر تعبئة الحقول عند هذا الحقل المحدّد للبدء في تعبئته.

HTML form input autofocus attribute

تحديد مكان توقف مؤشر تعبئة الحقول باستخدام خاصية autofocus.

<form>
  <label for="username" >Username:</label><br>
  <input type="text" id="username" autofocus><br>
  <label for="password" >Password:</label><br>
  <input type="password" id="password"><br>
</form>

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

تُستخدم خاصية list attribute مع عنصر input من النوع input list للعرض وإظهار قائمة العناصر داخل عنصر <datalist>.

HTML form input list attribute

عرض العناصر الموجودة داخل input list.

<form>
  <input list="browsers">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
</form>
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.