Thursday, September 15, 2016
HTML Form
ဒီအခန္းမွာေတာ့ HTML Form ေတြအေၾကာင္းကိုေလ့လာသြားမယ္၊ HTML Form ေတြကို Server ကို လိုအပ္တဲ့အခ်က္အလက္ေတြပို႔တဲ့အခါသံုးတယ္၊
ဒီသင္ခန္းစာမွာေတာ့ HTML Form ေတြကိုလက္ေတြ႔တည္ေဆာက္ပံုကိုသင္ျပေပးသြားမယ္၊ အသံုးခ်ပံုကိုေတာ့ PHP သင္ခန္းစာမွာေလ့လာရပါမယ္၊
သင္မယံုၾကည့္ႏိုင္ေလာက္ေအာင္ အသင္း၀င္ေတြကို အလိုေလွ်ာက္ စစ္ေဆးတဲ့ စနစ္၊ အသင္း၀င္အသစ္ေတြကို စာရင္းသြင္းတဲ့ စနစ္၊ ေငြေၾကးတြက္ခ်က္
မူေတြကိုလုပ္ေပးတဲ့စနစ္၊ ဘဏ္ ေငြရွင္းမူ တြက္မူေတြကို အလိုေလွ်ာက္လုပ္တဲ့ စနစ္၊ ဖိုရမ္ Forum တည္ေဆာက္တဲ့စနစ္၊ Live chat ခ်က္တင္ ေတြကို
တည္ေဆာက္တဲ့စနစ္ နဲ႔ အျခား ေျပာင္ေျမာက္လွတဲ့ နည္းပညာေတြကို PHP သင္ခန္းစာမွာလက္ေတြ႔ေလ့လာရမွာပါ၊ အခုေတာ့ HTML Form ေတြတည္
ေဆာက္ပံုကိုပဲ ေလ့လာၾကမယ္၊
Form ေတြကိုတည္ေဆာက္ဖို႔ သံုးတဲ့ HTML Tags ကေတာ့ <form> အဖြင့္နဲ႔ </form> အပိတ္တို႔ပါ၊ ေအာက္မွာ တည္ေဆာက္ပံု ဥပမာ၊
<form>
Element
</form>
အထက္က ဥပမာ အတိုင္း HTML Form ေတြကိုတည္ေဆာက္ႏိုင္တယ္၊ သူတို႔အထဲမွာ အသံုးျပဳလိုတဲ့ Element ကိုထည့္ရတယ္၊
အသံုးအမ်ားဆံုး HTML Element ကေတာ့ input element ပါ၊ သူ႔ကိုေတာ့ သင့္ဆိုက္ကိုလာေရာက္အသံုးျပဳသူေပးပို႔လိုက္တဲ့
သတင္းေတြကို ေရြးခ်ယ္မွတ္သားဖို႔အတြက္အသံုးျပဳတယ္၊ ဘယ္လို အခ်က္အလက္လဲ ဆိုတာကိုေပါ့၊ ဥပမာ သင္က အသင္း၀င္ ေတြျဖည့္ရမယ့္ Email
Adress နဲ႔ Password ဆိုတဲ့အခ်က္အလက္ေတြကို အသင္း၀င္ေတြဆီက ယူခ်င္တယ္ဆိုရင္ျဖင့္ေအာက္ပါအတိုင္း input element ကိုေရးႏိုင္ပါတယ္၊
<form>
Email : <input type= “text” name= “eamil” >
Password : <input type = “password” name = “password”>
</form>
အထက္က HTML Form ကို သင့္၀က္ဆိုက္ HTML Document ထဲမွာေရးျပီး Run ၾကည့္ပါ၊ ဒါဆိုရင္ေတာ့ ေအာက္က အတိုင္း ပံုမွာပါတဲ့ HTML
Form ႏွစ္ခုကိုရမယ္၊
အထက္က ပံုမွာ သင္ Input element ကိုသံုးျပီးေရးလိုက္တဲ့ email နဲ႔ password တို႔ျဖည့္ရမယ့္ HTML Form ကိုရမွာပါ၊ ေရးပံုက
Email : <input type= “text” name = “email” >
ေရွ႕ဆံုးက Email ကေတာ့ HTML ကုတ္မဟုတ္ပါဘူး၊ ရိုးရိုးစာသားပါ၊ <input type ဆိုတာကေတာ့ input Method ကိုသံုးတာပါ၊ type ကေတာ့ ဘယ္လို
အမ်ိဳးအစား input Method ကိုသံုးမွာလဲဆိုတာကိုေျပာဖို႔ပါ၊ သင္သံုးလိုတဲ့ အမ်ိဳးအစားကိုေတာ့သိဖို႔လိုတယ္၊ Email အတြက္ေတာ့ Email လိပ္စာမွာ Text
ဆိုတဲ့ စာသားေတြပါမွာျဖစ္လို႔၊ input type = “text” လို႔ထည့္ထားတာပါ၊ ေနာက္က name ကေတာ့ Attribute တစ္ခုပါ အခုထည့္မယ့္ form ရဲ့နာမည္က
name ျဖစ္တယ္လို႔ေျပာတာပါ၊ သူကလဲ JavaScript နဲ႔ တြဲသံုးရင္ အလြန္႔အလြန္ကိုအေရးၾကီးလွပါတယ္၊ JavaScript ရဲ့ Form Validation မွာ
သိပ္ကိုအသံုး၀င္လွလို႔ သူ႔ကို ေတာ့ထည့္ျဖစ္ေအာင္ထည့္လိုက္ပါ၊
ေနာက္ထပ္ Form တစ္ခုကေတာ့ password : <input type= “text” name = “password” > ဒီစာသားကလဲရိုးရိုးရွင္းရွင္းေလးပါ၊ ေရွ႕ဆံုးက password
ဆိုတာကေတာ့ ဒါက password ထည့္ရမယ့္ အစိတ္အပိုင္းဆိုတာကို ေျပာတယ္၊ သူက HTML Tag မဟုတ္ပါဘူး၊ <input type= “password”
ဆိုတာကေတာ့ ထည့္သြင္းအသံုးျပဳမယ့္ အမ်ိဳးအစားက “password” လို႔ေရးထားတာပါ၊ တစ္ခ်ိဳ႕ေတြက အဲ့ဒီ့ေနရာမွာ “text” လို႔ပဲထည့္လိုက္တယ္၊
ဒါဆိုရင္ေတာ့ျပသနာရွိတယ္၊ “text” လို႔ထည့္ထားရင္ အဲ့ဒီ့ Form ထဲမွာ သင္ password ရိုက္ထည့္လိုက္ရင္ ရိုက္ထည့္တဲ့စာေတြအတိုင္းေပၚေနမယ္၊ ဥပမာ
သင္က waif72coder ဆိုတဲ့ password ကိုရိုက္ထည့္ရင္ အဲ့ဒီ့ waif72coder ဆိုတဲ့စာသားနဲ႔ ဂဏန္းေတြေပၚေနမယ္၊ ဒါေပမယ့္ “password”
လို႔ထည့္လိုက္ရင္ေတာ့ အဲ့ဒီ့ေနရာမွာေပၚေနမွာက waif72coder ကိုကိုစားျပဳတဲ့ အနက္ေရာင္အစက္ေလးေတြျဖစ္ေနမယ္၊ ဒါေၾကာင့္ password
လို႔ထည့္သင့္တယ္၊ “text” လို႔မထည့္သင့္ဘူး၊
အထက္က Form ေရးတဲ့ပံုစံကိုေသခ်ာေလ့လာပါ၊ အဲ့ဒီ့ form ပံုစံကိုေရးတတ္သြားရင္ အျခား Form ေတြက အလြယ္ေလးျဖစ္သြားမယ္၊
Radio Button
ံHTML Form ေတြမွာ Radio button ေတြကိုလဲ အသံုးမ်ားလွပါတယ္၊ တစ္ခုထပ္ပိုတဲ့ေရြးခ်ယ္စရာေတြကိုေပးျပီး ၾကိဳက္ရာတစ္ခုကိုေရြးခ်ယ္ခိုင္းတာပါ၊
အဲ့ဒီ့လိုအခါမွာ Radio Button ေတြကိုသံုးရတယ္၊ သူတို႔ကိုေရးတာလဲ အထက္က text area ကိုေရးတာနဲ႔ အတူတူပါပဲ၊ ကြာတာကေတာ့ “text”
ထည့္ရမယ့္အစား “radio” လို႔ထည့္လိုက္ရတာပါ၊ ေအာက္က ဥပမာ ကိုၾကည့္ပါ၊
<form>
Choose your sex, male or female nor gay: <br>
<input type="radio" name = "sex" value = "male"> male<br/>
<input type="radio" name = "sex" value = "female"> female
</form>
အထက္က အတိုင္းေရးလိုက္ရင္ေတာ့ အထီးလား အမလား ေရြးခိုင္းတဲ့ Radio Button ေလးေတြေပၚလာမွာပါ၊ အဲ့ဒီ့ Radio button ေလးေတြထဲက
တစ္ခုမွာ ခလစ္ႏွိပ္ျပီး သင္နဲ႔ သက္ဆိုင္ရာ “လိင္” ကိုေရြးခိုင္းတာ၊ ေရးပံုက <input type = ရဲ့ေနာက္မွာ သံုးခ်င္တာ Radion button ျဖစ္တဲ့အတြက္
“radio” လို႔ထည့္ေပးလိုက္တယ္၊ ျပီးေတာ့ name attribute အျဖစ္ “sex” ကိုထည့္တယ္၊ (name attribute ကလဲ အေရးၾကီးတယ္ေနာ္ ေနာက္ပိုင္း
javaScript သင္ခန္းစာကို သင္ေလ့လာျဖစ္ခဲ့ရင္ သေဘာပါသြားမယ္)၊ ေနာက္ထပ္ attribute တစ္ခုအျဖစ္ value ကိုထည့္တယ္၊
သူ႔အသံုး၀င္ပံုကိုေနာက္ပိုင္းရွင္းျပပါဦးမယ္၊ Radio button ေတြရဲ့ေနာက္မွာ မွ male နဲ႔ Female တို႔ကိုထည့္ထားတယ္၊ ဒါ့ေၾကာင့္ အဲ့ဒီ့ နာမည္ေတြက
Radio button ေတြရဲ့ေနာက္မွာေပၚေနမယ္၊ ေအာက္မွာၾကည့္ပါ၊
အထက္က ပံုမ်ိဳးရရင္ Radio button ေလးေတြထဲမွာ ခလစ္ႏွိပ္ၾကည့္ပါ၊ တစ္ခုကိုပဲေရြးခြင့္ေပးလိမ့္မယ္၊ အကယ္၍ ေရြးခ်ယ္မူေတြလဲမ်ားတယ္၊
ၾကိဳက္သေလာက္လဲေရြးခ်ယ္ခြင့္ေပးခ်င္တယ္ဆိုရင္ျဖင့္ “check box” ေလးေတြကိုသံုးႏိုင္ပါတယ္၊ “checkbox” ေလးေတြက ေလးေထာင့္ကြက္ေလးေတြပါ၊
သူတို႔ကိုေရးပံုက
<form>
Choose What You Got : <br/>
<input type="checkbox" name="properties" value="kalays" > kalays <br/>
<input type="checkbox" name="properties" value="akhawy"> akhway<br/>
<input type="checkbox" name="properties" value="dokekha"> dokekha <br/>
<input type="checkbox" name="properties" value="Pasoe"> Pasoe <br/>
</form>
<form>
<input type="checkbox" name="Properties" value="Bike" /> I have a bike<br />
<input type="checkbox" name="Properties" value="Car" /> I have a car
</form>
အထက္က ကုတ္ေတြကို Run ၾကည့္လိုက္ရင္ေတာ့ ေအာက္က ပံုအတိုင္းအေျဖကိုသင့္၀က္ဆိုက္စာမ်က္ႏွာမွာရရွိမွာပါ၊
အထက္ကေတာ့ Checkbox ထည့္တဲ့ ကုတ္ပါ၊ သူကေတာ့ သင့္၀က္ဆိုက္ကိုလာလည္တဲ့သူကို ၾကိဳက္တဲ့ေရြးခ်ယ္မူေတြကိုလုပ္ခိုင္းတာပါ၊
တစ္ခုထဲေရြးလဲရတယ္ တစ္ခုထပ္ပိုတဲ့ ေရြးခ်ယ္မူလဲလုပ္လို႔ရတယ္၊
ေနာက္ထပ္ေလ့လာသင္တဲ့ form တစ္ခုကေတာ့ ေရြးခ်ယ္ထား ျဖည့္စြက္ထားတဲ့ အခ်က္အလက္ေတြကို Database ကိုပို႔ေပးတဲ့ Submmit button ပါ၊
သူကိုေရးပံုကလဲ အျခား Form ေတြကိုေရးတဲ့အတိုင္းပါပဲ၊ ေအာက္မွာၾကည့္ပါ၊
္<form>
<input type= “submit” name= “submit” value= “send”>
</form>
သူ႔ရဲ့တည္ေဆာက္ပံုကလဲ အျခား Form element ေတြတည္ေဆာက္ပံုအတိုင္းပါပဲ၊ ကြာျခားခ်က္ကေတာ့ သူက submit button ေလးသံုးမွာျဖစ္တဲ့အတြက္
သူ႔ကို type= “submit” လို႔ထည့္ေပးလိုက္ရံုပါပဲ။ ဒါဆိုရင္ သင္သူ႔ေရွ႕မွာျဖည့္ခဲ့သမွ် အခ်က္အလက္ေတြကို Database ေတြစီကိုပို႔ေပးမွာပါ၊
အထက္က ကုတ္ကို Run ၾကည့္လိုက္ရင္ေအာက္ပါအတိုင္း send လို႔ေရးထားတဲ့ submit button ေလးကိုေတြ႔ရမွာပါ၊
အထက္က ေတာ့ Form ေတြကိုတည္ေဆာက္ပံုပါ၊ element ကေတာ့ input type နဲ႔ တြဲျပီး ၾကိဳက္တဲ့ အမ်ိဳးအစားကိုသံုးႏိုင္တယ္၊ ေနာက္သင္ခန္းစာမွာ
ထပ္ျပီး ရွင္းမယ္၊
ယခုဘေလာ့သည္မိတ္ေဆြမ်ားထံမွျပန္လည္မွ်ေ၀ထားပါသည္
ကၽြန္ေတာ္ပိုင္ေနရာေလးမ်ား
ေရာင္ျပန္ေလးစာေပသို႔ဒီမွာသြားပါ
18+တို႔ဆံုဆည္းရာသို႔ဒီမွာသြားပါ
****အဆင္မေျပမႈ႔တစ္စံုတစ္ရာရွိပါက****
Facebook Account ျဖစ္တဲ႔
ေအာက္ပါပံုေလးကိုႏွိပ္ျပီးေ၀ဖန္အၾကံေပးႏိုင္ပါတယ္
@@@@စာေပ၀ါသနာပါရင္ကၽြန္ေတာ့္ရဲေရာင္ျပန္ေလး-စာေပ PageကိုLikeႏွိပ္ထားပါဦး@@@@
