عناصر ورودی فرم jQuery Mobile

ورودی متنی jQuery Mobile

فیلدهای ورودی با استفاده از عناصر استاندارد HTML نوشته می‌شوند، jQuery Mobile از سبک‌های زیبا و قابل استفاده برای دستگاه‌های موبایل برای آن‌ها استفاده می‌کند. همچنین می‌توانید از نوع‌های جدید input HTML5 استفاده کنید:

مثال

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="fullname">نام کامل:</label>
    <input type="text" name="fullname" id="fullname">
    <label for="bday">تاریخ تولد:</label>
    <input type="date" name="bday" id="bday">
    <label for="email">ایمیل:</label>
    <input type="email" name="email" id="email" placeholder="آدرس ایمیل شما..">
  </div>
</form>

آزمایش کنید

توجه:برای تعریف یک توضیح کوتاه از value مورد انتظار field ورودی استفاده کنید placeholder را استفاده کنید:

<input placeholder="sometext">

حصه متنی

برای ورود متون چند خطی از element <textarea> استفاده کنید.

توجه:حصه متنی به طور خودکار بزرگ‌تر می‌شود تا به متن ورودی شما تناسب داشته باشد.

مثال

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="info">اطلاعات اضافی:</label>
    <textarea name="addinfo" id="info"></textarea>
  </div>
</form>

آزمایش کنید

نوار جستجو

تایپ input type="search" یک نوع جدید در HTML5 است که برای تعریف یک field متنی برای ورود کلمات جستجو استفاده می‌شود:

مثال

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="search">Search:</label>
    <input type="search" name="search" id="search">
  </div>
</form>

آزمایش کنید

دکمه‌های رادیویی

دکمه‌های رادیویی زمانی استفاده می‌شوند که کاربر تنها یکی از تعداد محدودی گزینه‌ها را انتخاب کند.

برای ایجاد یک مجموعه از دکمه‌های رادیویی، یک عنصر input با attribute type="radio" و label مرتبط به آن اضافه کنید. دکمه‌های رادیویی را در یک element <fieldset> قرار دهید. همچنین می‌توانید یک element <legend> اضافه کنید تا عنوان <fieldset> را تعریف کنید.

توجه:لطفاً از ویژگی data-role="controlgroup" برای ترکیب این دکمه‌ها استفاده کنید:

مثال

<form method="post" action="demoform.asp">
  <fieldset data-role="controlgroup">
    <legend>انتخاب جنسیت خود را انتخاب کنید:</legend>
      <label for="male">مرد</label>
      <input type="radio" name="gender" id="male" value="male">
      <label for="female">زن</label>
      <input type="radio" name="gender" id="female" value="female"> 
  </fieldset>
</form>

آزمایش کنید

چک‌باکس

برای استفاده از انتخاب‌های محدود، از چک‌باکس استفاده می‌شود:

مثال

<form method="post" action="demoform.asp">
  <fieldset data-role="controlgroup">
    <legend>انتخاب هر تعداد رنگ مورد علاقه خود که می‌خواهید:</legend>
      <label for="red">قرمز</label>
      <input type="checkbox" name="favcolor" id="red" value="red">
      <label for="green">سبز</label>
      <input type="checkbox" name="favcolor" id="green" value="green">
      <label for="blue">آبی</label>
      <input type="checkbox" name="favcolor" id="blue" value="blue"> 
  </fieldset>
</form>

آزمایش کنید

مثال‌های بیشتر

برای گروه‌بندی افقی انتخاب‌های مربوط به رادیو یا چک‌باکس، از ویژگی data-type="horizontal" استفاده کنید:

مثال

<fieldset data-role="controlgroup" data-type="horizontal">

آزمایش کنید

همچنین می‌توانید از محفظه‌ی محدوده برای بسته‌بندی <fieldset> استفاده کنید:

مثال

<div data-role="fieldcontain">
  <fieldset data-role="controlgroup">
    <legend>انتخاب جنسیت خود را انتخاب کنید:</legend>
  </fieldset>
</div>

آزمایش کنید

اگر می‌خواهید یکی از دکمه‌ها را "پیش‌انتخاب" کنید، از ویژگی checked برچسب <input> HTML استفاده کنید:

مثال

<input type="radio"> checked>
<input type="checkbox"> checked>

آزمایش کنید