نموذج jQuery Mobile

يضيف jQuery Mobile مظهراً مريحاً وسهل الوصول إلى النماذج HTML تلقائيًا.

هيكل نموذج jQuery Mobile

يستخدم jQuery Mobile CSS لضبط أنماط عناصر النموذج HTML لجعله أكثر جاذبية وسهولة الاستخدام.

في jQuery Mobile، يمكنك استخدام العناصر التالية كعناصر نموذج:

  • حقل النص
  • حقل البحث
  • المربعات المحددة
  • المربعات المفعمة
  • قائمة الإختيار
  • شريط التمرير
  • مفتاح التبديل الإنعكاسي

عند التعامل مع نموذج jQuery Mobile، يجب أن تكون على علم بالمعلومات التالية:

  • يجب تعيين خصائص "method" و "action" لـ <form>.
  • كل عنصر نموذج يجب أن يكون له خاصية "id" الفريدة. يجب أن يكون هذا "id" فريداً في صفحة الموقع. هذا بسبب أن نموذج التوجيه على صفحة واحدة لـ jQuery Mobile يسمح للعديد من "الصفحات" المختلفة أن تظهر في نفس الوقت.
  • كل عنصر نموذج يجب أن يكون له علامة (label). قم بتعيين خاصية for label لتطابق id العنصر.

مثال

<form method="post" action="demoform.asp">
  <label for="fname">First name:</label>
  <input type="text" name="fname" id="fname">
</form>

جربها بنفسك

إذا كنت ترغب في إخفاء label، استخدم الكلاس ui-hidden-accessible. هذا شائع، عندما تحتاج إلى أن تكون خاصية placeholder للعنصر تعمل كـ label:

مثال

<form method="post" action="demoform.asp">
  <label for="fname" class="ui-hidden-accessible">الاسم：</label>
  <input type="text" name="fname" id="fname" placeholder="الاسم...">
</form>

جربها بنفسك

المساحة المحددة

إذا كنت ترغب في عرض label وسيطرة النموذج بشكل صحيح على الشاشات العريضة، استخدم عناصر <div> أو <fieldset> مع خاصية data-role="fieldcontain" لتغليف label أو سيطرة النموذج:

مثال

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="fname">First name:</label>
    <input type="text" name="fname" id="fname">
    <label for="lname">Last name:</label>
    <input type="text" name="lname" id="lname">
  </div>
</form>

جربها بنفسك

نصيحة:خصائص fieldcontain تستند إلى عرض الصفحة لتعيين نمط label وسيطرات النموذج. عند عرض الصفحة أكبر من 480px، سيتم وضع label وسيطرة النموذج في نفس السطر تلقائيًا. عند عرض الصفحة أصغر من 480px، سيتم وضع label فوق عنصر النموذج.

نصيحة:إذا كنت ترغب في منع jQuery Mobile من تعيين النمط تلقائيًا للأعمدة القابلة للنقر، استخدم خاصية data-role="none":

مثال

<label for="fname">First name:</label>
<input type="text" name="fname" id="fname"> data-role="none">

جربها بنفسك

تقديم النموذج في jQuery Mobile

نصيحة:jQuery Mobile سيقوم بتحميل النموذج بشكل تلقائي عبر AJAX وسيحاول دمج استجابة الخادم في DOM التطبيق.