سبد (0)

جی کوئری موبایل-ورودی های فرم

ورودی های متن در جی کوئری موبایل

فیلدهای ورودی به وسیله ی عناصر استاندارد HTML ایجاد  می شوند و جی کوئری موبایل سعی بر این دارد که آنها را برای دستگاه های موبایل جذاب و راحت کند. شما همچنین می توانید از انواع عناصر <input> از  HTML5 استفاده کنید:

مثال

<form method="post" action="demoform.asp">
  <div class="ui-field-contain">
    <label for="fullname">Full name:</label>
    <input type="text" name="fullname" id="fullname">

    <label for="bday">Date of Birth:</label>
    <input type="date" name="bday" id="bday">

    <label for="email">E-mail:</label>
    <input type="email" name="email" id="email" placeholder="Your email..">
  </div>
</form>
خودتان امتحان کنید »

Text area

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

نکته: عناصر text area هنگامی که شما متنی را اضافه می کنید، به اندازه ی آن متن در می آیند. 

مثال

<label for="info">Additional Information:</label>
<textarea name="addinfo" id="info"></textarea>
خودتان امتحان کنید »

ورودی search

عنصر ورودی از نوع "type="search در HTML5 جدید می باشد و درواقع یک فیلد متنی است که از آن برای جستجو استفاده می شود: 

مثال

<label for="search">Search:</label>
<input type="search" name="search" id="search">
خودتان امتحان کنید »

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

از دکمه های رادیویی هنگامی استفاده می شود که کاربر بخواهد از میان چند گزینه، تنها یکی را انتخاب کند. 

برای ایجاد یک مجموعه از دکمه های رادیویی، یک عنصر input با ویژگی "type="radio اضافه کنید و یک برچسب مناسب هم اضافه کنید. حالا دکمه های رادیویی را درون یک عنصر <fieldset> قرار دهید. شما همچنین می توانید از یک عنصر <legend> برای ایجاد عنوان برای <fieldset> استفاده کنید. 

نکته: برای گروه بندی کردن دکمه ها، از "data-role="controlgroup استفاده کنید: 

مثال

<form method="post" action="demoform.asp">
  <fieldset data-role="controlgroup">
    <legend>Choose your gender:</legend>
      <label for="male">Male</label>
      <input type="radio" name="gender" id="male" value="male">
      <label for="female">Female</label>
      <input type="radio" name="gender" id="female" value="female"> 
  </fieldset>
</form>
خودتان امتحان کنید »

چک باکس ها

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

مثال

<form method="post" action="demoform.asp">
  <fieldset data-role="controlgroup">
    <legend>Choose as many favorite colors as you'd like:</legend>
      <label for="red">Red</label>
      <input type="checkbox" name="favcolor" id="red" value="red">
      <label for="green">Green</label>
      <input type="checkbox" name="favcolor" id="green" value="green">
      <label for="blue">Blue</label>
      <input type="checkbox" name="favcolor" id="blue" value="blue"> 
  </fieldset>
</form>
خودتان امتحان کنید »

Examples

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

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

مثال

<fieldset data-role="controlgroup" data-type="horizontal">
خودتان امتحان کنید »

شما همچنین می توانید به دور عنصر <fieldset> یک ظرف(container) قرار دهید: 

مثال

<div class="ui-field-contain">
  <fieldset data-role="controlgroup">
    <legend>Choose your gender:</legend>
  </fieldset>
</div>
خودتان امتحان کنید »

اگر می خواهید که یکی از دکمه های شما از پیش، انتخاب شده باشد از خصوصیت checked استفاده کنید: 

مثال

<input type="radio" checked>
<input type="checkbox" checked>
خودتان امتحان کنید »

شما همچنین می توانید فرم خود را درون یک پاپ آپ قرار دهید: 

مثال

<a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline">Show Popup Form</a>

<div data-role="popup" id="myPopup" class="ui-content">
  <form method="post" action="demoform.asp">
    <div>
      <h3>Login information</h3>
      <label for="usrnm" class="ui-hidden-accessible">Username:</label>
      <input type="text" name="user" id="usrnm" placeholder="Username">
      <label for="pswd" class="ui-hidden-accessible">Password:</label>
      <input type="password" name="passw" id="pswd" placeholder="Password">
    </div>
  </form>
</div>
خودتان امتحان کنید »
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه