فرم جوموبایل

جوموبایل به طور خودکار به فرم‌های HTML ویژگی‌های رابط کاربری مناسب برای لمس اضافه می‌کند.

ساختار فرم جوموبایل

جوموبایل از CSS برای تنظیم استایل عنصرهای فرم HTML استفاده می‌کند تا آنها جذاب‌تر و قابل استفاده‌تر باشند.

در جوموبایل می‌توانید از این کنترل‌های فرم استفاده کنید:

  • فرم متن
  • مجبور به جستجو
  • چک باکس یکپارچه
  • چک باکس
  • منوی انتخاب
  • نوار حرکت
  • کلیید چرخش

هنگام کار با فرم‌های جوموبایل، باید اطلاعات زیر را بدانید:

  • عنصر <form> باید ویژگی‌های method و action را تنظیم کند
  • هر عنصر فرم باید یک ویژگی "id" منحصر به فرد داشته باشد. این id در صفحات وبسایت باید منحصر به فرد باشد. زیرا مدل جوموبایل از ناوبری یک صفحه به صورت همزمان برای بسیاری از "صفحات" اجازه می‌دهد.
  • هر عنصر فرم باید یک برچسب (label) داشته باشد. برای تطابق برچسب با id عنصر، ویژگی for را تنظیم کنید.

مثال

<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 برنامه‌نویسی‌شده خود یکپارچه کند.