فرم jQuery Mobile

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

ساختار فرم jQuery Mobile

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

در jQuery Mobile، شما می‌توانید از این کنترل‌های فرم استفاده کنید:

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

وقتی با فرم jQuery Mobile سروکار دارید، باید اطلاعات زیر را بدانید:

  • <form> عنصر باید ویژگی‌های method و action تنظیم شود
  • هر ایک عنصر فرم باید ویژگی "id" منحصر بفردی تنظیم کند. این id در صفحات وبسایت باید منحصر بفرد باشد. این دلیل این است که مدل ناوبری صفحات یکپارچه jQuery Mobile اجازه می‌دهد تا چندین "صفحه" مختلف به طور همزمان نمایش داده شوند.
  • هر عنصر فرم باید یک برچسب (label) داشته باشد. برای تطابق برچسب با شناسه عنصر، ویژگی 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 بر روی عناصر فرم قرار می‌گیرد.

تذکرہ:اگر می‌خواهید جی‌کوئری موبایل خودکاراً سبک‌های طراحی برای عناصر قابل کلیک را تنظیم نکند، از ویژگی data-role="none" استفاده کنید:

مثال

<label for="fname">First name:</label>
<آپریوٹ تایپ="ٹیکسٹ" نیم="fname" آئیڈی="fname"/> دیتا-رول="نئین">

آپ خود سنجید

جی کو ال اچ ام ال میں فرم سابمیت کیوں

تذکرہ:جی کو ال اچ ام ال فرم خودکار طور پر اے جی ایکس فرم سابمیت کرے گی، اور سروئر کی جواب کو ایپلی کیشن کی ڈی او ایم میں مربوط کرنے کی کوشش کریگا۔