HTML Form မ်ားနဲ႔ Input
HTML Form ေတြကုိ အသုံးျပဳသူေတြရဲ့ ကြဲျပားတဲ့ Input ေတြအတြက္သုံးပါတယ္။
HTML Form မ်ား
HTML Form ဆိုတာက အခ်က္အလက္ေတြကုိ ဆာဗာ Server ဆီသယ္ဖုိ႔ သုံးတဲ့အရာပါ။
Form တစ္ခုမွာ text field ေတြ၊ checkboxe ေတြ၊ radio-button ေတြ၊ submit button ေတြနဲ႔တျခား input element ေတြပါတတ္ပါတယ္။ select List ေတြ၊ textarea ေတြ၊ fieldset ေတြ၊ legend နဲ႔ label element ေတြလည္းပါတတ္ပါတယ္။ <Form> tag က HTML Form အတြက္ျဖစ္ပါတယ္။
<Form>
input element မ်ား
</Form>
HTML Form မ်ား - Input Element
Form ရ့ဲ အေရးအပါဆုံးအပုိင္း ကေတာ့ Input element ျဖစ္ပါတယ္။
Input element ေတြကို အသုံးျပဳသူေတြ ေရြးခ်ယ္တဲ့၊ ေပးတဲ့ အခ်က္အလက္ အခ်က္အလက္ေတြ ေရြးဖုိ႔ သုံးပါတယ္။
Input element က type attribute ေပၚမူတည္ျပီး အမ်ဳိးမ်ိဳးျဖစ္ႏုိင္တယ္။ input element က type text field, checkbox, password, radio button, submit button နဲ႔ အျခားအရာေတြ ျဖစ္ႏုိင္ပါတယ္။
အသုံးအမ်ားဆုံး input အမ်ိဳးအစားေတြကုိ ေအာက္မွာၾကည့္ပါ။
Text Field မ်ား
<input type="text" /> မ်ဥ္းတစ္ေၾကာင္းပါတဲ့ အသုံးျပဳသူ ရုိက္သြင္းႏုိင္တဲ့ input field အျဖစ္ သတ္မွတ္ပါတယ္။
<Form>
ပထမအမည္ :<input type="text" name="firstname" /><br />
ေနာက္ဆုံးအမည္ :<input type="text" name="lastname" />
</Form>
အေပၚက HTML code ေတြဟာ browser (ဘေရာက္ဆာ) မွာအခုလုိေပၚပါလိမ့္မယ္
မွတ္ခ်က္ — Form ကသူ႔ဖာသာသူဆုိ မျမင္ရပါဘူး။ သူ႔ရဲ့ ပုံမွန္ စာသား field ရဲ့ Width က 20 character ျဖစ္ပါတယ္။
Password Field
<input type="password" /> password field အျဖစ္ သတ္မွတ္ပါတယ္။
<Form>
လ်ိဳ႕ဝွက္နံပါတ္ :<input type="password" name="pwd" />
</Form>
အေပၚက HTML code ေတြဟာ browser (ဘေရာက္ဆာ) မွာအခုလုိေပၚပါလိမ့္မယ္
မွတ္ခ်က္ — password field ထဲကစာလုံးေတြက အမဲအစက္လုံးေလးေတြလုိပဲျမင္ရမွာပါ။
Radio Button မ်ား
<input type="radio" /> radio button တစ္ခုအျဖစ္ သတ္မွတ္ပါတယ္။ Radio button ေတြက အသုံးျပဳသူေတြကုိ ေရြးစရာေတြရွိတဲ့အနက္ တစ္ခုကုိပဲ ေရြးေစဖုိ႔ သုံးပါတယ္။
<Form>
<input type="radio" name="sex" value="male" /> အမ်ဳိးသား<br />
<input type="radio" name="sex" value="female" /> အမ်ိဳးသမီး
</Form>
အေပၚက HTML code ေတြဟာ browser (ဘေရာက္ဆာ) မွာအခုလုိေပၚပါလိမ့္မယ္
Checkbox မ်ား
<input type="checkbox" /> checkbox တစ္ခုအျဖစ္ သတ္မွတ္ပါတယ္။ Checkbox ေတြကအသုံးျပဳသူေတြကုိ ၾကိဳက္ရာတစ္ခုခု ျဖစ္ျဖစ္ အမ်ားၾကီးျဖစ္ျဖစ္ အကုန္လုံးပဲ ျဖစ္ျဖစ္ ဘာမွမေရြးပဲ ထားလုိ႔ရေအာင္သုံးတာပါ။
<Form>
<input type="checkbox" name="vehicle" value="Bike" /> စက္ဘီးတစ္စီးရွိတယ္<br />
<input type="checkbox" name="vehicle" value="Car" />ကားတစ္စီးရွိတယ္
</Form>
အေပၚက HTML code ေတြဟာ browser (ဘေရာက္ဆာ) မွာအခုလုိေပၚပါလိမ့္မယ္။
Submit Button
<input type="submit" /> submit ခလုပ္တစ္ခုအျဖစ္ သတ္မွတ္ပါတယ္။
submit ခလုပ္က Form ကလာတဲ့ Data ေတြကုိ server ဆီကုိပုိ႔ဖုိ႔သုံးပါတယ္။ Form ရဲ့ Action Attribute ကသတ္မွတ္ထားတဲ့ ပုံစံအတုိင္း Data ေတြက သြားရတာျဖစ္ပါတယ္။ action attribute မွာသတ္မွတ္ထားတဲ့ ဖိုင္ ေတြက လက္ခံတဲ့ input တစ္မ်ိဳးမ်ိဳးနဲ႔ျဖစ္တတ္ပါတယ္။
<Form name="input" action="html_Form_action.asp" method="get">
users name :<input type="text" name="users" />
<input type="submit" value="Submit" />
</Form>
အေပၚက HTML code ေတြဟာ browser (ဘေရာက္ဆာ) မွာအခုလုိေပၚပါလိမ့္မယ္။
အေပၚက စာသား field မွာစာသားတစ္ခ်ိဳ႕ရုိက္ျပီး "Submit" ခလုပ္ကုိ ႏွိပ္လုိက္ရင္ browser (ဘေရာက္ဆာ) ကသင့္ရဲ့ Input ကုိ "html_Form_action.asp" လုိ႔ေခၚတဲ့ စာမ်က္ႏွာဆီကုိပုိ႔ေပးမွာျဖစ္ပါတယ္။ အဲဒီ႔စာမ်က္ႏွာက သင့္ကုိလက္ခံရရွိေၾကာင္း ျပန္ျပပါမယ္။
HTML Form Tag မ်ား
| Tag | အေၾကာင္းအရာ |
| <Form> | အသုံးျပဳေတြရဲ့ input အတြက္ HTML Form အျဖစ္သတ္မွတ္ပါတယ္။ |
| <input /> | input control အျဖစ္ သတ္မွတ္ပါတယ္။ |
| <textarea> | multi-line စာသား input control အျဖစ္ သတ္မွတ္ပါတယ္။ |
| <label> | input element တစ္ခုရဲ့ label အျဖစ္ သတ္မွတ္ပါတယ္။ |
| <fieldset> | Form ရဲ့ Element ေတြအတြက္ ပတ္ပတ္လည္ border အျဖစ္ သတ္မွတ္ပါတယ္။ |
| <legend> | fieldset element ရဲ့ေခါင္းစဥ္အျဖစ္ သတ္မွတ္ပါတယ္။ |
| <select> | select list (drop-down list) တစ္ခုအျဖစ္ သတ္မွတ္ပါတယ္။ |
| <optgroup> | ေရြးခ်ယ္ထားတဲ့ List ထဲက ဆက္ႏြယ္ေနတဲ့ option ေတြရဲ့ အုပ္စုအျဖစ္ သတ္မွတ္ပါတယ္။ |
| <option> | ေရြးခ်ယ္ထားတဲ့ List ထဲက Option တစ္ခုအျဖစ္ သတ္မွတ္ပါတယ္။ |
| <button> | ခလုပ္တစ္ခုအျဖစ္ သတ္မွတ္ပါတယ္။ |
http://www.soemoeaung.com
ခုလိုအားေပးတဲ့အတြက္ အထူးေက်းဇဴးတင္ပါေၾကာင္း ေျပာၾကားပါရေစ..ဘေလာ့ခရီးသည္မွ နည္းပညာမ်ားအား မည္သူမဆို လြတ္လပ္စြာ ကူးယူသုံးစြဲနိဳင္ပါတယ္.. ကြ်န္ေတာ္ ပိုင္ဆိုင္ေသာေနရာေလးမ်ားအား ဆက္လက္ လည္ပါတ္လိုပါက ***************************************
