Html နဲ့ form တွေရေးသား တဲ့အခါမှာ အကောင်းဆုံးနဲ့ အလှပဆုံး ဖြစ်အောင် ရေးသားတဲ့ နည်းလေးတွေ ပြောချင် ပါတယ်။ Beginner တွေအတွက် ရည်ရွယ်ရေးသားခြင်း ဖြစ်ပါတယ်။ Code တွေအားလုံးကို http://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro မှာ စမ်းသပ်နိုင်ပါတယ်။
1. Use fieldsets to encapsulate similar fields
သင့်ရေးသားလိုတဲ့ form ထဲမှာ အစုလိုက် နာမည်တူတွေ တူညီတဲ့ အကြောင်းအရာတွေ ပါနေ တတ်ပါတယ်။ ဒီတိုင်းသာ ရောပြီး သုံးမယ်ဆိုရင်တော့ user တွေ မျက်စိ လည်ကုန်ပါလိမ့်မယ်။ ဥပမာ ဆိုပါစို့ payment အတွက် form တစ်ခုမှာ Shipping address နဲ့ Billing address ကို ဖြည့်ခိုင်းတဲ့ အခါမှာ City, Province နဲ့ Postal code တွေ နှစ်ခုလုံးမှာ ပါနိုင်ပါတယ်။ ဒီတိုင်းသာ ရေးထားရင်တော့ အတွေအကြုံ နည်းတဲ့ user တစ်ယောက် အတွက် လွယ်ကူမယ့် ကိစ္စ မဟုတ်ပါဘူး။ ဒီလိုမျိုး လို အပ်တဲ့အခါမှာ အစုလိုက် အစုလိုက် ရေးသားခြင်း ဖြစ်တဲ့ fieldsets ကို အသုံးပြုသင့်သွားပါပြီ။ အောက်မှာ နမူနာ ဖော်ပြထားတဲ့ code တစ်ချို့ကို လေ့လာ ကြည့်ရင် ခေါင်းထဲမှာ လက်ခနဲ တစ်ချက်ဖြစ်သွားပြီး ရှင်းသွားပါလိမ့်မယ်။
<fieldset> <span>Billing Address</span><input type="text" /> <span>City</span><input type="text" /> <span>Province</span><input type="text" /> <span>Postal Code</span><input type="text" /> </fieldset> <fieldset> <span>City</span><input type="text" /> <span>Province</span><input type="text" /> <span>Postal Code</span><input type="text" /> </fieldset> <span>Shipping Address</span><input type="text" />
2 : Label Fieldsets with Legends
လိုအပ်ရင် ခေါင်းစဉ်သုံးပါ။ fieldsets အသုံးပြုနည်းကို သိပြီဆိုရင် သက်ဆိုင်ရာ fieldsets အလိုက် ခေါင်းစဉ် ကို လိုအပ်သလို အသုံးပြု သင့်ပါတယ်။ fieldsets ဟာ border လုပ်ပြီး ပြတယ်ဆိုတာ သိပြီးလောက်ပြီ ထင်ပါတယ်။ legend အသုံးပြုခြင်းဖြင့် fieldsets ရဲ့ border မှာ ခေါင်းစဉ် တပ်ပြီး အသုံးပြုနိုင်ပါတယ်။ ပိုပြီး ရိုးရှင်းတဲ့ form တစ်ခု ရနိုင်ပါတယ်။ အောက်မှာ နမူနာ ပြထားတဲ့ code ကို လေ့လာကြည့်ရအောင်။
<fieldset> <legend>Billing Address</legend> <span>Address</span><input type="text" /> <span>City</span><input type="text" /> <span>Province</span><input type="text" /> <span>Postal Code</span><input type="text" /> </fieldset>
3 : Name your Inputs
Html ကို အခြားသော script တွေနဲ့ တွဲပြီး အသုံးပြုတဲ့ အခါ အဆင်ပြေစေဖို့ input တွေ နာမည် ပေးသင့်ပါတယ်။ ဥပမာ PHP အတွက် $_POST သို့မဟုတ် $_GET တို့အသုံးပြုတဲ့ အခါမှာ လိုကို လိုအပ်ပါတယ်။ အောက်မှာ ပြထားတဲ့ နမူနာ code တွေကို လေ့လာကြည့်ပါ။
<fieldset> <span>Billing Address</span><input type="text" name="billAddress" /> <span>City</span><input type="text" name="billCity" /> <span>Province</span><input type="text" name="billProvince" /> <span>Postal Code</span><input type="text" name="billPC" /> </fieldset>
4 : Use the Label Element
အပေါ်မှာ ဥပမာ ပြလာခဲ့တဲ့ code တွေမှာ အမှားတစ်ခုကို ကျွန်တော် သုံးထားပါတယ်။ ဘာကြောင့် သုံးထားရလဲ ဆိုတော့ ဒီနေရာမှာ ပိုပြီး ထင်သာစေလို့ပါ။ Label တွေအတွက် span element ကို အသုံးပြုတာ မှားနေပါတယ်။ တကယ်တော့ label element ကို သာသုံးသင့်ပါတယ်။ ခြွင်းချက်အနေနဲ့ span ကို အသုံးပြုရတဲ့ အခါမျိုးလဲ ရှိတတ်ပါတယ်။ အောက်က နမူနာမှာ span အစား label ကို ပြောင်းသုံးထားပါတယ်။
<fieldset> <legend>Billing Affress</legend> <label>Address</label><input type="text" name="billAddress" /> <label>City</label><input type="text" name="billCity" /> <label>Province</label><input type="text" name="billProvince" /> <label>Postal Code</label><input type="text" name="billPC" /> </fieldset>
5 : Use optgroup to categorize options
လွယ်ကူ ရိုးရှင်းတဲ့ code နဲ့ပဲ ပြလိုက်ပါတယ်။ option တွေကို group အလိုက်ခွဲခြားဖို့ သုံးပါတယ်။ နမူနာ ပြထားတဲ့ စာသား ကြည့်လိုက်ရင် ရှင်းသွားပါလိမ့်မယ်။
<select>
<optgroup label="USA">
<option>Alabama</option>
<option>Alaska</option>
<option>Arizona</option>
</optgroup>
<optgroup label="Canada">
<option>Alberta</option>
<option>British Columbia</option>
<option>Manitoba</option>
</optgroup>
</select>
6. Always assign complete attributes
<label for="live">Living?</label> <input name="live" id="live" type="checkbox" checked disabled />
Check box အတွက် ဒါမျိုးသုံးနေလား? မသုံးပါနဲ့တော့ ဒါဟာ ပုံဆံမှန်တဲ့ code မဟုတ်ပါဘူး။
<label for="live">Living?</label> <input name="live" id="live" type="checkbox" checked="checked" disabled="disabled" />
ဒီလို ပြောင်းသုံးကြည့် လိုက်ပါ။ ရလဒ်ကတူပေမယ့် developer တစ်ယောက်ရဲ့ အဆင့်အတန်းတော့ ကွာခြား သွားစေပါတယ်။
7. Consider using Buttons instead of Submit Inputs
<input type=”submit” />
ဒီ code က submit အတွက် လူတိုင်း သိပြီးသား code ပါ။ html မှာ <button> ဆိုပြီး သုံးလို့ရပါသေးတယ်။ ဒီလို အသုံးပြုတာဟာ button အတွက် image ထည့်တာတွေ အလှဆင်တာတွေကို ပိုပြီး လွယ်ကူစေပါတယ်။ Imput vs Button ဆိုတဲ့ article လည်း ရေးသား နေပါတယ် နောက်နှစ်ရက်လောက်ဆို ပြီးလောက်မယ် ထင်ပါတယ်။ ဒီအကြောင်းအရာနဲ့ ပါတ်သတ်လို့ ဆက်လက် လေ့လာနိုင်စေဖို့ဖြစ်ပါတယ်။
8. Put tabindices on your inputs
စိတ်ဝင်စားမယ်လို့ မျှော်လင့်ပါတယ်။ input form တွေကို user က ဖြည့်တဲ့ အခါ tab ကို နှိပ်ပြီး ခုံတက်ကြပါတယ်။ tab ခုံဖို့အတွက် အစီအစဉ်လိုက် လုပ်ထားပေးနိုင်ပါတယ်။ အောက်မှာ နမူနာ ပြထားတဲ့ code ကို စမ်းကြည့်လိုက်ပါ။ နံပါတ်စဉ်အလိုက် input form တွေကို ရွေ့ပေးပါလိမ့်မယ်။
<input type="text" tabindex="2" /> <input type="text" tabindex="1" /> <input type="text" tabindex="3" />
9. Define accesskey when appropriate
Input မှာ keyboard short cut ထည့်ပြီး အသုံးပြုနိုင်ပါတယ်။ Browser မှာ အသုံးပြုနေတဲ့ short cut နဲ့ မတူအောင်တော့ သတိထားပြီး သင်ဖြည့်သွင်းသင့်ပါတယ်။ အောက်မှာ ပြထားတဲ့ code မှာ search box အတွက် short cut က alt + s ဖြစ်ပါတယ်။ Firefox မှာတော့ short cut တွေရောထွေး နေပြီး google chrome မှာတော့ လွတ်လွတ် လပ်လပ် အလုပ်လုပ် ပါတယ်။ Accesskey တွေ ထည့်သွင်းထားရင်တော့ သင့် user ကို အသိပေးတဲ့ အနေနဲ့ short cut စာလုံးကို underline လုပ်ပေးထား သင့်ပါတယ်။ အောက်မှာ နမူနာကြည့်ပါ။
<label for="search"><b>S</b>earch</label> <input type="text" name="s" id="search" accesskey="s" />
10. Know when to use Get and when to use Post
နောက်ဆုံး တစ်ခုအနေနဲ့ အရေးကြီးမယ် ထင်တဲ့ အကြောင်းအရာ တစ်ခုကို ပြောပြချင်ပါတယ်။ Html မှာ data send ဖို့အတွက် နည်းလမ်း နှစ်ခုရှိပါတယ်။ ပထမ တစ်ခုက GET ဖြစ်ပြီး ဒုတိယ တစ်ခုက Post ဖြစ်ပါတယ်။ ဒီနှစ်ခုကို ဘယ်လို အချိန်မျိုးမှာ သုံးသင့်တယ် ဆိုတာ ကွဲကွဲပြားပြား နားလည်ဖို့ လိုအပ်ပါတယ်။ တစ်ခုစီ ရှင်းပြပေးပါမယ်။
<a><form action="you.php" method="get">
&tl;label for="fname">First Name</label>
<input type="text" name="fname" id="fname" value="Bill" />
&tl;label for="lname">Last Name</label>
<input type="text" name="lname" id="lname" value="Gates" />
</form>
</a>
ဒီ code ကို submit လုပ်ခဲ့ရင် http://www.example.com/you.php?fname=Bill&lname=Gates ဆိုပြီး ရပါတယ်။ ဒါဟာ get ကို သုံးထားလို့ပါ။ user တွေ အလွယ်တကူကို submit အတွက် ထင်သာ မြင်သာ ရှိစေပါတယ်။ ဒါဆို post ကို သုံးရင်ရော… post ကို သုံးရင်တော့ http header ကို submit လုပ်တဲ့အတွက် ဒီလို URL ထဲမှာ ပြနေမှာ မဟုတ်ပါဘူး။ username တို့ Password တို့ submit လုပ်တဲ့ အခါမှာ ဒါမျိုးကို သုံး သင့်ပါတယ်လို့ အကြံပေးပါရစေ။
