အားလံုးဘဲမဂၤလာပါခင္​ဗ်

Lesson-2 စၾကရ​ေအာင္​😉

ပထမဆံုးအ​ေနျဖင္​့့​ေျပာျပခ်င္​တာကelement​ေတြကို​ေရးတယ္​့အခါ bodyအဖြင္​့အပိတ္​ၾကား​ေရးရပါမယ္​​ ​၊​​​ေနာက္​တစ္​ခုကsubmit button ,radio ,check box စသျဖင္​့ တည္​​ေဆာက္​တယ့္​့ခါ form element ထဲ​တည္​​ေဆာက္​​ေပးရပါမယ္​၊ form ထဲမွာ ထည္​့မ​ေရးရင္​လည္​း ကိုယ္​​ေရးတယ္​့ design ပံုစံ​ေတာ့​ေပၚပါမယ္​ ဒါ​ေပမယ္​့​ေနာက္​က် ရင္​ ျပသာနာ ျဖစ္​လာမယ္​၊page တစ္​ခု နဲ႔ တစ္​ခုခ်ိတ္​တယ္​့ခါ database နဲ႔ ခ်ိတ္​တယ္​့ခါ​ေတြမွာ form မပါဘူးဆ္​ိုရင္​ ျပသနာျဖစ္​လာႏိုင္​ပါတယ္​၊

ကြၽန္​​ေတာ္​ element ကို ဘယ္​ခ်ိန္​မွာ သံုးတယ္​ ဘာတြက္​လည္​း ဆိုတာကို web document​ေရး​ရင္​းတစ္​ခါတည္​း​ေျပာျပပါမယ္

ကဲ..web document တစ္​ခု​ေရးၾကည္​့ရ​ေအာင္​

ခု​ေ႐းလိုက္​့တယ္​ document ထဲမွာbody,form,header,img,label,text box,check boxစသည္​့ element​ေတြကိုသံုးထားပါတယ္​၊ တစ္​ခုခ်င္​းကိုျပန္​႐ွင္​းျပပါမယ္​ခင္​ဗ်

. body-element

Body tagအဖြင့္အပိတ္ထ​​ဲ မွာ အျခား​ေသာtag​ေတြကို​ေရးပါတယ္​, body tag မွာ width, height ,align,background-color,background-image စသျဖင္​့​ေရးသားလို႔ရပါတယ္

Body element နဲ ့ပက္​သက္​တယ္​့tag​ေတြကို​​ေနာက္​document​ေတြမွာ စမ္​းျပပါမယ္​ခင္​ဗ်

. Form-element

Form tag ထဲမွာ action ပါတယ္method ပါတယ္​ ၊actionမွာ ကိုယ္​ခ်ိတ္​မယ္​့​ေနာက္​တစ္​page ရဲ႕ document nameကိုထည္​့​ေပးရတယ္​
Eg.​ေနာက္​document ကို index.html လို႔save ထားရင္​ form ထဲမွာလုပ္​လုပ္​ဖို႔တြက္​ action မွာindex.html ဆိုၿပီး​ေရးရတယ္​၊

methodမွာ ​ get နဲ႔ post ဆိုၿပီး ႏွစ္​ခု႐ွ္ိတယ္​ get နဲ႔ ပို႔ရင္​ get နဲ႔လက္​ခံရမယ၊္​ post နဲ႔ပို႔ရင္​ post နဲ႔လက္​ခံရမယ္။
Get method က web url က​ေန​ေခၚသံုးလို႔ရပါတယ္​ post methood က​ေခၚသံုးလို႔မရပါဘူး ၿပီး​ေတာ့​ေနာက္​ကြယ္​မွာအလုပ္​လုပ္​တယ္​

. Header-element

heading tagမွာ အမ်ိဳးအစား6ခု႐ွိပါတယ္​

Heading1

Heading2

Heading3

Heading4

Heading5

Heading6

ညီအစ္​ကို​ေတြနံပါတ္​စဥ္​လိုက္​​ေျပာင္​းၿပီးစမ္​းၾကည္​့လိုက္​ပါ size​ေျပာင္​းသြားတာ​ကို​ေတြ႔ရပါမယ္​

. img-element

ခုtag ကို ပံု​ေတြထည္​့ခ်င္​တယ္​့ခါအသံုးျပဳပါတယ္​ မိမိ​ေပၚခ်င္​တယ္​့ပံုကို ခ်ိတ္​ဆက္​တယ္​့အသံုးျပဳလို႔ရပါတယ္​ computer ထဲမွာ​ေတာ့ ပံု​႐ွိ​ေနရပါမယ္​ ခ်ိတ္​တယ္​့​ေနရာမွာ name တူရပါမယ္​(!important)

ပထမဆံုးfolder တစ္​ခု​ေဆာက္​ပါ၊ပံုကို မိမိ​ေဆာက္​ထားတယ္​့ folder ထဲရင္​ထည္​့ပါ ၿပီးရင္လမ္​​ေၾကာင္​း​ေပးတယ္​့အခါfolder nameတိုင္​း​ေပးပါ၊​ ကြၽန္​​ေတာ္​က​ေတာ့ picture လို႔folder​ေဆာက္​ထား႔လို ့pictiure ႔လို ့လမ္​​ေျကာင္​း​ေပးထားပါတယ္​၊​ ညီအစ္​ကို​ေတြက ပံုထားထားတယ့္​လမ္​း​ေၾကာင္​းအတိုင္​းထား​ေပးလိုက္​ပါ၊ pictureလို ့​ေဆာက္​မယ္​
္​ဆိုကြ ်န္​​ေတာ္​​ေရးထားတယ္​့တို တိုင္​းလိုက္​လုပ္​လိုက္​ပါခင္​ဗ်

picture​ေအာက္​မွာမို႔ src မွာ pictureဆိုၿပီး​ေ႐ွ႕ကလမ္​း​ေၾကာင္​း​ေပးလိုက္​တာပါ၊ တစ္​ခုမွတ္​ထားရမွာကလမ္​​ေၾကာင္​း​ေပးတယ္​့ခါ folder nameနဲ ့ဲတူရပါမယ္​ ၊

အ​ေပၚမွာ widthနဲ႔ height ကိုသတ္​မွတ္​​ေပးထားပါတယ္​ ပံုရဲ႕ အရြယ္​အစားက သူ႔အ​ေပၚလိုက္​ၿပီး​ေျပာင္​းသြားပါမယ္​

္​ ဒီထက္​လွ​ေအာင္​လုပ္​ဖို႔က css တင္​ျပတယ္​့ခါမွ တစ္​ခါတည္​း​ေျပာျပ​ေပးသြားပါမယ္​

. label-element

ခု tag ကို labelမွာ စာ​ေပၚခ်င္​တယ္​့ခါ သံုးပါတယ္​
eg.
Name: Mya Mya
Gender: Female

Name နဲ႔ genderကို label အျဖစ္​သံုးပါမယ္​

(labelမွာ for သတ္​မွတ္​​​ေပးလိုက္​ပါ​ for သတ္​မွတ္​​ေပးတာက radio button တို႔ checkbox စသျဖင္​့မွာ အသံုးဝင္​ပါလိမ္​့မယ္​ for="name" လို႔သတ္​မွတ္​လိုက္​့လို႔ name အတြက္​ဘဲဖစ္​သြားပါၿပီ တစ္​ျခားဘယ္​သူနဲ႔မွမဆိုင္​​ေတာ့ပါ ၿပီး​ေတာ့ coding​ေတြျပန္​စစ္​တယ္​့ခါလည္​းဒါဘယ္​႔တြက္​ဆိုတာတစ္​ခါတည္​းသိႏိုင္​သြားပါမယ္​)

. Textbox element


Textbox element မွာ (type, name,value or placeholder ကြားျခားခ်က္​႐ွိပါတယ္​ စမ္​းၾကည့္​ပါ, maxlength စကားလံုးအတိက်သတ္​မွတ္​တာ) စသျဖင္​့ပါပါတယ္​ ၊ text box မွာလည္​း အပိတ္​ကထည္​့လည္​းရတယ္​မထည္​့လည္​းရပါတယ္​

Textbox မွာအလုပ္​လုပ္​လုပ္​တာကို​ေနာက္​ document​ေတြမွာထည္​့​ေရးၿပီး​ေျပာျပ​ေပးသြားပါမယ္​

.

Value ​က ကိုယ္​button မွာ​ေပၚခ်င္​တယ္​့စာသားထည္​့​ေရး​ေပးရပါတယ္​၊ button ကိုႏွိပ္​ရင္​လုပ္​​ေဆာင္​သြားမယ္​့ဟာကို​ေနာက္​document မွာ တင္​ျပ​ေပးပါမယ္​

br-tag က enter ကို​ေျပာတာပါ​ေနာက္​တစ္​​ေၾကာင္​းဆင္​းခ်င္​ရင္​သံုးပါတယ္​

ခုဆိုရင္​ ကြၽန္​​ေတာ္​အ​ေပၚမွာ​ေရးထားတယ္​့ document ကို႐ွင္​းျပလို႔pသြားပါၿပီ၊စမ္​းရင္​ထြက္​လာတယ္​့ပံုက ပံုစံမက် ဘဲထြက္​လာပါတယ္​ ဘာ​ေျကာင္​႔လည္​းဆို​ေတာ့ cssနဲ ႔ခ်ိတိျပီးdesignမခ်ရ​ေသးလို ့ပါခင္​ဗ်၊လွလွပပ ထြက္​​ေအာင္​ css နဲ႔ ဘို​ေရးရတယ္​ဆိုတာ css တင္​ျပတယ္​့ခါ​ေျပာျပ​ေပးပါမယ္​ခင္​ဗ်

အားလံုးကို​ေက်းဇူးတင္​ပါတယ္​

Author @naythuya
Photo-credit
Msc-169