انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 41
دورة لغة HTML

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

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

ابدأ التعلّم استكشف الأمثلة
THE BUILDING BLOCKS OF THE WEBHTML
index.html
1<h1>Hello, web.</h1>
وسم الفتحالمحتوىوسم الإغلاق
النتيجة في المتصفح Hello, web.
كل صفحة رائعة تبدأ بعنصر.
أقسام الدرس
5
الأمثلة
5
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
4,023
محتوى الدرس
في هذا الدرس 5تصفّح المواضيع

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.

HTML 
<form>
  <label for="file">Select Files:</label><br>
  <input type="file" id="file" name="file" multiple>
</form>
جرّب بنفسك

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

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

  • تعمل خاصية pattern attribute مع الحقول من النوع: text, search, url, tel, email, and password.
  • يمكنك استخدام خاصية title مع عنصر input وخاصية pattern attribute لإظهار رسالة تُخبر المستخدم بوجود خطأ في إدخال البيانات داخل الحقل وتخبره بنوع المعلومات التي يجب إدخالها في هذا الحقل.
    قد يستخدم المتصفح title في رسالة التحقق، لكنه ليس بديلًا عن تعليمات ظاهرة؛ التحقق التفاعلي يحدث عند محاولة الإرسال أو بطلب برمجي.

يجب أن يطابق النمط القيمة كاملة. في هذا المثال يُقبل ثلاثة أحرف لاتينية، وتبقى القيمة الفارغة مسموحة لغياب required؛ النمط لا يثبت أن الرمز يخص دولة موجودة.

الإرسال في هذه المعاينة تجربة محلية؛ لا تُرسل البيانات إلى خادم.

جرّب بنفسك

HTML form input pattern attribute

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

HTML 
<form>
  <label for="country_code">Country code (three letters):</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 عند تقليل القيمة وتكبيرها.

تُحسب الخطوات انطلاقًا من min إن وُجد، ثم value الأصلية، ثم0 في هذا النوع. مثلًا min="1" مع step="3" يقبل1 ثم4 ثم7؛ ليست القيم دائمًا مضاعفات3 انطلاقًا من0.

جرّب بنفسك

HTML form input step attribute

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

HTML 
<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 حقل محدّد عند تحميل الصفحة، أي يكون مؤشر تعبئة الحقول عند هذا الحقل المحدّد للبدء في تعبئته.

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

HTML form input autofocus attribute

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

HTML 
<form>
  <label for="username" >Username:</label><br>
  <input type="text" id="username" name="username" autofocus><br>
  <label for="password" >Password:</label><br>
  <input type="password" id="password" name="password"><br>
</form>
جرّب بنفسك

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

تُستخدم خاصية list attribute مع عنصر input لربطه بقائمة اقتراحات، وتساوي قيمتها id لعنصر datalist؛ لا يوجد نوع type="list". تُعرّف الاقتراحات داخل عنصر <datalist>.

جرّب بنفسك

HTML form input list attribute

ربط حقل الإدخال باقتراحات datalist باستخدام list؛ يمكن للمستخدم أيضًا إدخال قيمة أخرى صالحة.

HTML 
<form>
  <label for="browser-choice">Browser:</label>
  <input id="browser-choice" name="browser" list="browsers">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
</form>
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…