Login form tutorial (HTML,CSS, jQuery) part I

မဂၤလာပါ..
ဒီတစ္ေခါက္ေတာ့ form သင္ခန္းစာေလးေတြ series အလိုက္ သင္ေပးသြားမယ္လို႔ စိတ္ကူးထားပါတယ္။ ဒီသင္ခန္းစာက web design နဲ႔ ဆုိင္တဲ့ သင္ခန္းစာျဖစ္ပါတယ္။ တစ္ကယ္လို႔ ခင္ဗ်ားဟာ web design ကုိ စိတ္မဝင္စားဘူး။ Website တစ္ခု ဘယ္လိုလုပ္လဲ မသိခ်င္ဘူးဆုိရင္ေတာ့ ဒီသင္ခန္းစာက ခင္ဗ်ားနဲ႔ မဆုိင္ပါဘူး။ ေက်ာ္သြားပါ။ အဲလိုမွမဟုတ္ဘူး website ေတြ ဘယ္လိုေရးရလဲဆုိတာ စိတ္ဝင္စားတယ္၊ web design ဆုိတာကုိ သိခ်င္တယ္ဆုိရင္ေတာ့ ဒီသင္ခန္းစာက professional web designer တစ္ေယာက္ျဖစ္ဖုိ႔အတြက္ လုံးဝ အစပါပဲ။ အခုထိ ဖတ္မိေနၿပီဆုိေတာ့ ခင္ဗ်ားစိတ္ဝင္စားတယ္ဆုိတာ ေသခ်ာပါတယ္။ ဒါေၾကာင့္ သင္ခန္းစာ ဆက္ေလ့လာၾကတာေပါ့။
သာမာန္ web designer တစ္ေယာက္ျဖစ္ဖို႔ html နဲ႔ css ကုိ သိရပါတယ္။ အခု ဒီသင္ခန္းစာမွာ form နဲ႔ ပတ္သတ္တဲ့ html ကုိ သင္ေပးမွာျဖစ္ပါတယ္။ ေနာက္တစ္ေခါက္မွာေတာ့ css ကုိ သင္ေပးပါမယ္။ html မသင္ခင္ tag ဆုိတာကုိ သိရပါမယ္။ tag ဆုိတာက ေထာင့္ကြင္းအဖြင့္ “<” နဲ႔ ေထာင့္ကြင္းအပိတ္ “>” ထဲ ထည့္ေရးထားတာမွန္သမွ်ကုိ tag လုိ႔ ေခၚပါတယ္။ tag ေတြတုိင္းမွာ အဖြင့္နဲ႔ အပိတ္ရွိပါတယ္။ အပိတ္ tag မွာ slash လို႔ေခၚတဲ့ မ်ဥ္းေစာင္း “/” ေလးပါ ပါတယ္။ ဥပမာ <html> ဆုိတာက အဖြင့္ tag ျဖစ္ၿပီးေတာ့ </html> က အပိတ္ tag ျဖစ္ပါတယ္။ ကဲဒါဆုိ notepad++ ကုိဖြင့္လိုက္ပါ။ html စေရးဖို႔ အရင္ဆုံး ေရးရမယ့္ tag ေတြက
1
2
3
4
5
<!doctype html>
<html>
<head></head>
<body></body>
</html>
ျဖစ္ပါတယ္။ ကၽြန္ေတာ္တုိ႔ လူေတြက ျမင္ရမယ့္အပုိင္းကုိေတာ့ body အဖြင့္နဲ႔ အပိတ္ထဲမွာ ထည့္ပါတယ္။ <head> အပုိင္းကေတာ့ search engine (google, yahoo, bing, …) ေတြနဲ႔ အမ်ားဆုံး ဆုိင္ပါတယ္။ အမ်ားဆုံး လို႔ ကၽြန္ေတာ္သုံးတာက လူေတြနဲ႔ ဆုိင္တာေတြလဲ ရွိပါတယ္။ ဥပမာ website ေခါင္းစဥ္လိုမ်ဳိးဆုိရင္ လူေတြနဲ႔ ဆုိင္ပါတယ္။ ဒါေၾကာင့္ <head> အဖြင့္နဲ႔ အပိတ္ ၾကားမွာ ေအာက္ကအတုိင္း ထည့္ေရးလုိက္ပါ
1
<title>Form tutorial</title>
ၿပီးရင္ ကၽြန္ေတာ္တုိ႔ web designer ေတြဟာ အရင္တုန္းကေတာ့ table ေတြနဲ႔ design ဆြဲရပါတယ္။ အခုေနာက္ပုိင္းေတာ့ နည္းပညာအသစ္ေတြေပၚလာေတာ့ div ေတြသုံးၿပီးေတာ့ design ဆြဲၾကပါတယ္။ ခုေနာက္ပုိင္း အျမင့္ဆုံးကေတာ့ html5 ပါ။ သူကေတာ့ <section> ဆုိတာေတြသုံးပါတယ္။ div နဲ႔ အတူတူပါပဲ div ဆုိတာကေတာ့ division ရဲ႕ အတုိေကာက္ျဖစ္ပါတယ္။ ဒီေန႔ သင္ခန္းစာမွာ ကၽြန္ေတာ္က ကၽြန္ေတာ္တုိ႔ ျမင္ဖူးေနၾက seo service website ရဲ႕ slider ေဘးက form လုိမ်ဳိး ခပ္ဆင္ဆင္ form တစ္ခုကုိ ေရးမွာျဖစ္ပါတယ္။ အရင္ဆုံး SEO Service website ကုိ သြားၾကည့္ပါဦး၊ home page က slider ေဘးမွာ form တစ္ခု၊ ဟုိးေအာက္ဆုံးနားမွာ form တစ္ခု၊ ၿပီးေတာ့ contact us စာမ်က္ႏွာမွာ form ေနာက္တစ္ခု စုစုေပါင္း သုံးခုရွိပါတယ္။ အားလုံးကုိ ျမင္ဖူးတယ္ရွိေအာင္ လိုက္ေလ့လာၾကည့္ပါ။ ေလ့လာၾကည့္ၿပီးမွ ေရးတဲ့အပိုင္းကုိ ဆက္သြားပါ။ ေလ့လာၿပီးၿပီဆုိရင္ ကၽြန္ေတာ္တုိ႔ ဆက္ေရးပါမယ္။ ကၽြန္ေတာ္တုိ႔ ေရးမယ့္ form အမ်ဳိးအစားကေတာ့ website ေတြမွာ login ဝင္ရင္ သုံးရတဲ့ form အမ်ဳိးအစားျဖစ္ပါတယ္။ အလြယ္ဆုံးထဲက တစ္ခုဆုိလည္း မမွားပါဘူး။ ေအာက္က ကုဒ္ေတြကုိ <body> အဖြင့္နဲ႔ အပိတ္ၾကားမွာ ရုိက္ထည့္လိုက္ပါ။ ရုိက္ထည့္ၿပီးရင္ ရွင္းျပပါမယ္။
1
2
3
4
5
6
7
8
<div id="form"><!-- form starts -->
        <h1>Login form</h1>
        <input placeholder="Enter your name" type="text" size="30"/>
        <div class="clear"></div>
        <input placeholder="Enter your password" type="password" size="30"/>
        <div class="clear"></div>
        <input type="submit" value="Login"/>
    </div><!-- end of form -->
အခုန ကၽြန္ေတာ္တုိ႔ div ေတြ သုံးမယ္လို႔ ေျပာခဲ့တဲ့အတုိင္း div တစ္ခုသုံးပါတယ္။ division (အပုိင္း၊ အကန္႔) တစ္ခု ခြဲလိုက္တာေပါ့ဗ်ာ။ div မွာ id ေပးလည္းရတယ္ မေပးလည္းရပါတယ္။ အခုက ေပးဖုိ႔ လုိလို႔ ေပးကုိ ေပးရပါမယ္။ ေနာက္ပုိင္း css သင္ရင္ လိုပါလိမ့္မယ္။ id ကုိ form ဆုိတဲ့ နာမည္ေပးလို႔ရပါတယ္။ id ေတြကုိ html က ကန္႔သတ္ထားတဲ့ နာမည္တစ္ခ်ဳိ႕က လြဲလို႔ ကုိယ္ႀကိဳက္တဲ့ နာမည္ေပးလို႔ရပါတယ္။ ဒါေပမယ့္ ကုိယ့္ဘာသာ နားလည္ေအာင္ထက္ သူမ်ားေတြ နားလည္ေအာင္ေပးတာ ပုိေကာင္းပါတယ္။ တစ္ကယ့္တစ္ကယ္ အလုပ္လုပ္ရတဲ့အခါ အဖြဲ႔နဲ႔ လုပ္ရမွာပါ။ အဲဒီအခါက်ရင္ ကုိယ္ေရးတဲ့ code ကုိ သူမ်ားနားမလည္ရင္ ကုိယ္ညံ့တာပါ။ ဒါေၾကာင့္ သူမ်ားနားလည္ေအာင္ နာမည္ေတြေပးရပါတယ္။ အဲဒီလို သူမ်ားနားလည္ဖုိ႔အတြက္ ေနာက္က <!– နဲ႔ –> ၾကားမွာ မွတ္ခ်က္ အျဖစ္နဲ႔ စာသား တစ္ခုခုေရးရပါတယ္။ ဥပမာ ဘယ္ဟာရဲ႕ အစ၊ ဘယ္ဟာရဲ႕အဆုံး စသျဖင့္ေပါ့။ မွတ္ခ်က္ဆုိတဲ့အတြက္ေၾကာင့္ သူ႔ကုိ comment လို႔ေခၚပါတယ္။ comment ေတြက website မွာ ေပၚမွာမဟုတ္ပါဘူး။ website ေရးတဲ့လူေတြက ရႈပ္ယွက္ခတ္ေနတဲ့ coding ေတြၾကားမွာ အမွတ္အသား အျဖစ္နဲ႔ ေရးၾကတာပါ။ ဒါမွ ေနာက္တစ္လ၊ တစ္ႏွစ္ေလာက္ၾကာလို႔ code ကုိ ျပန္ျပင္ရေတာ့မယ္ဆုိရင္ ဘယ္နားဘာရွိတယ္ဆုိတာ ျပန္မွတ္မိႏုိင္မွာျဖစ္ပါတယ္။
ေနာက္တစ္ခုကေတာ့ h1 tag ျဖစ္ပါတယ္။ h1 ကေန h6 အထိ သုံးလို႔ရပါတယ္။ h1 ကေတာ့ font size အႀကီးဆုံးျဖစ္ပါတယ္။ heading ေတြကုိ ေရးတဲ့အခါမွာ သုံးပါတယ္။
ေနာက္တစ္ခုက input, input မွာ အမ်ဳိးအစား အမ်ဳိးမ်ဳိးရွိပါတယ္။ အခု ဒီသင္ခန္းစာမွာ ေဖာ္ျပေပးလိုက္တာကေတာ့ type=”text” နဲ႔ type=”password” ႏွစ္ခု နဲ႔ type=”submit” ျဖစ္ပါတယ္။ သာမာန္စာရုိက္ဖုိ႔အတြက္ text input type ကုိ သုံးၿပီးေတာ့ password ရုိက္ဖို႔ေနရာအတြက္ password input type ကုိသုံးပါတယ္။ placeholder ဆုိတာကေတာ့ name တုိ႔ password တုိ႔ရုိက္တဲ့အကြက္ထဲမွာ ကုိယ္က စာတစ္ခုခု မရုိက္ခင္အထိ ေပၚေနမယ့္ လမ္းညႊန္စာသားေလးျဖစ္ပါတယ္။
ေနာက္ဆုံးတစ္ခုကေတာ့ submit input type ျဖစ္ပါတယ္။ submit ဆုိတဲ့ သေဘာတရားက form တုိင္းမွာ ပါပါတယ္။ google မွာ စာရုိက္ၿပီး search ကုိႏွိပ္လိုက္တာကလည္း search ဆုိတာ submit လုပ္လုိက္တာပါပဲ။ ဒါေၾကာင့္ submit ဆုိတဲ့သေဘာတရားက form ထဲမွာ “ျဖည့္စရာရွိတာ အကုန္ျဖည့္ၿပီးၿပီ၊ ရၿပီ မင္းဆက္လုပ္ေတာ့” လုိ႔ ေျပာလိုက္တာနဲ႔ အတူတူပါပဲ။ submit ကုိႏွိပ္မွ form ေတြက က်န္တဲ့ သူတုိ႔ လုပ္စရာရွိတဲ့အပုိင္းကုိ ဆက္လုပ္မွာျဖစ္ပါတယ္။ value မွာေတာ့ website မွာ ေပၚေစခ်င္တဲ့ စာသားကုိ ထည့္ေရးေပးရပါတယ္။
ကုိယ္ေရးတဲ့ code ကုိ အမွားပါေနတယ္လို႔ သံသယရွိသူေတြအတြက္ ျပန္တုိက္စစ္ဖုိ႔ code အျပည့္အစုံက ေအာက္ကအတုိင္းပါပဲ။
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!doctype html>
<html>
<head>
<title>Form tutorial</title>
</head>
<body>
    <div id="form"><!-- form starts -->
        <h1>Login form</h1>
        <input placeholder="Enter your name" type="text" size="30"/>
        <div class="clear"></div>
        <input placeholder="Enter your password" type="password" size="30"/>
        <div class="clear"></div>
        <input type="submit" value="Login"/>
    </div><!-- end of form -->
</body>
</html>
ကဲ … ဒီေန႔ေတာ့ ဒီေလာက္ပါပဲ။ ေနာက္တစ္ေခါက္ သင္ခန္းစာမွာ အခုေရးလိုက္တဲ့ form ကုိ css နဲ႔ ခ်ိတ္ၿပီးေတာ့ လွလွပပ ျဖစ္ေအာင္ ျပင္ဆင္မယ့္အပုိင္းပါ။
ref: http://itgroupmyanmar.com