jQuery Mobile အချက်အလက် အစားအထားများ

jQuery Mobile အချက်အလက် အစားအထား

အချက်အလက် အစားအထားသည် အခြား HTML အစားအထားများဖြင့် ဖြင့် အသုံးပြုပြီး၊ jQuery Mobile မှ လျှပ်ပျံလျှပ်ပျံသော အလွယ်ကူသော အစားအထား အပြင်အလိုက် ပြင်ဆင်လိုက်ပါ။ အခြား HTML5 <input> အစားအထား အသစ်များကို အသုံးပြုပါ။

အကျိုး

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="fullname">Full Name:</label>
    <input type="text" name="fullname" id="fullname">
    <label for="bday">Birthday:</label>
    <input type="date" name="bday" id="bday">
    <label for="email">Email:</label>
    <input type="email" name="email" id="email" placeholder="Your email address..">
  </div>
</form>

ကိုယ်တိုင် ကြိုးစားလုပ်ခြင်း

အဆိုပါ:အချက်အလက် ပြင်ဆင်ခြင်းအတွက် placeholder ကို အသုံးပြုပါ၊ ဖြေဖြူသော အရာကို ဖော်ပြပါ။

<input placeholder="sometext">

အချက်အလက်အစားအထား

ပိုမို လေးလား အချက်အလက် ပြင်ဆင်ခြင်းအတွက် <textarea> ကို အသုံးပြုပါ။

အကြောင်းပြချက်：အချက်အလက် အစားအထားသည် သင့်စာဖြင့် အကျယ်အဝန်း အထူးသော ဖြစ်သည်။

အကျိုး

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="info">Additional Information:</label>
    <textarea name="addinfo" id="info"></textarea>
  </div>
</form>

ကိုယ်တိုင် ကြိုးစားလုပ်ခြင်း

ရှာဖွေရေး စက်ရုပ်

input အစားအထား type="search" သည် HTML5 တွင် အသစ် ဖြစ်သော အစားအထား ဖြစ်၍၊ ရှာဖွေရန် အရေးသတ်သော ဖြေဖြူသော စက်ရုပ်ကို ဖော်ပြပါ။

အကျိုး

<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 အစားအထား type="radio" ကို ထပ်ပေါင်းလိုက်ပြီး နာမည်သင်းချက်သာကို ထပ်ပေါင်းပါ။ <fieldset> အစားအထားတွင် စက်ရုပ်ကို ကွယ်ပိုက်ပါ။ ဆိုခဲ့သော <fieldset> အစားအထား၏ အမည်အရာကို ဖော်ပြရန် <legend> အစားအထားကို ထပ်ပေါင်းပါ။

အဆိုပါ:သင့် ခွင့်ပြုခွင့်များ ကို ပေါင်းစပ်ရန် data-role="controlgroup" အကျုပ်ကို အသုံးပြုပါ:

အကျိုး

<form method="post" action="demoform.asp">
  <fieldset data-role="controlgroup">
    <legend>ကျောင်းဆိုလိုသောသူကိုရွေးချယ်ပါ:</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>ကျောင်းဆိုလိုသော အရောင်များ အများဆုံး ရွေးချယ်ပါ:</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>

ကိုယ်တိုင် ကြိုးစားလုပ်ခြင်း

အမျိုးမျိုးသော အကျိုးသမား

အသေးစိတ်သော တိုင်းစစ်ခွင့်များ သို့မဟုတ် ခွင့်ပြုခွင့်များ ကို လေးတန်းစီးဆင်းစွာ အုပ်ချုပ်ရန် data-type="horizontal" အကျုပ်ကို အသုံးပြုပါ:

အကျိုး

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

ကိုယ်တိုင် ကြိုးစားလုပ်ခြင်း

သို့မဟုတ် သင် <fieldset> ကို အပိုင်းအခြားတွင် စည်းကူးနိုင်ပါသည်:

အကျိုး

<div data-role="fieldcontain">
  <fieldset data-role="controlgroup">
    <legend>ကျောင်းဆိုလိုသောသူကိုရွေးချယ်ပါ:</legend>
  </fieldset>
</div>

ကိုယ်တိုင် ကြိုးစားလုပ်ခြင်း

သင် တစ်ခုခုကို "ပြင်ဆင်" လိမ့်မည် ကြောင်း ကျွန်ုပ်သည် HTML <input> အချက်အလက် checked ကို အသုံးပြုလိမ့်မည်။

အကျိုး

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

ကိုယ်တိုင် ကြိုးစားလုပ်ခြင်း