နည္းပညာ

ကြန္ပ်ဴတာ နည္းပညာမ်ား, နည္းပညာ software ႏွင့္ နည္းပညာ blog

လက္ေရြးစင္ သင္ခန္းစာမ်ား ၾကည့္ရန္။

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

မဂၤလာပါ …

ဒီသင္ခန္းစာ မဖတ္ခင္ ကၽြန္ေတာ္ အရင္တစ္ေခါက္က ေရးခဲ့တဲ့ Login form tutorial (HTML, CSS, jQuery) Part I ကုိ ဖတ္ဖူးရပါမယ္။ ဒီသင္ခန္းစာကေတာ့ အဲဒီ သင္ခန္းစာရဲ႕ အဆက္ အပုိင္း ၂ ပါ။ CSS ေရးနည္း သင္ေပးမယ့္ သင္ခန္းစာဆုိလည္း မမွားဘူးေပါ့။

CSS ဆုိတာ Cascading Style Sheet ရဲ႕ အတုိေကာက္ ျဖစ္ပါတယ္။ CSS ေရးနည္း သုံးနည္းရွိပါတယ္။

– tag ေတြထဲမွာ attribute အေနနဲ႔ ဝင္ေရးတဲ့ inline CSS ေရးနည္း။ (ဥပမာ။ ။ <html style=””>)
ဒီ ဥပမာမွာ <html> ဆုိတာက tag ျဖစ္ပါတယ္။ အရင္သင္ခန္းစာမွာလည္း ေဖာ္ျပခဲ့ပါတယ္။ style=”” ဆုိတာကေတာ့ attribute လုိ႔ ေခၚပါတယ္။

– <head> tag ထဲမွာ ဝင္ေရးတဲ့ embeded CSS ေရးနည္း။ (ဥပမာ။ ။<head>…………</head>)
ဒီ ဥပမာမွာ …………….. ေတြေနရာမွာ CSS code ေတြ ေရးရမွာျဖစ္ပါတယ္။

– ေနာက္ဆုံးနဲ႔ အေကာင္းဆုံးနည္းကေတာ့ external CSS လုိ႔ေခၚတဲ့ CSS ကုိ html နဲ႔ မေရာပဲ file တစ္ခုအေနနဲ႔ သီးသန္႔ခြဲေရးၿပီးမွ html နဲ႔ ခ်ိတ္ဆက္ၿပီး အသုံးျပဳနည္းတုိ႔ ျဖစ္ပါတယ္။ အေကာင္းဆုံးလို႔ ေျပာရတာက အေၾကာင္းရွိပါတယ္။ CSS code ေတြကုိ html ထဲမွာ ေရာၿပီး ျမင္မေနရတဲ့အတြက္ code ရွင္းရွင္းလင္းလင္းရွိျခင္း၊ html file size ေလွ်ာ့နည္းျခင္းေၾကာင့္ site အတက္ျမန္ျခင္း၊ သီးသန္႔ ထုတ္ထားတဲ့ CSS file ကုိ ဘယ္ html ဖုိင္ကမဆုိ ခ်ိတ္ဆက္လိုက္ယုံနဲ႔ အဲဒီ html ဖုိင္မွာ style သက္ေရာက္မႈ ရွိျခင္း၊ html တြင္ css မ်ား ေရာမေနျခင္းေၾကာင့္ google မွ crawl လုပ္ရလြယ္ျခင္း၊ ထုိ႔ေၾကာင့္ SEO အတြက္ေကာင္းမြန္ျခင္း။ ဆက္ေရးရင္ ရွိပါဦးမယ္။

ဒီေန႔ေတာ့ CSS ေရးနည္း သုံးနည္းရွိတဲ့ အထဲမွာ အေကာင္းဆုံး CSS ေရးနည္းကုိ ေျပာျပေပးသြားမွာျဖစ္ပါတယ္။ notepad++ ကုိ ဖြင့္ၿပီး new ေခၚလိုက္ပါ။

[Crayon lang=”css”]* {
margin: 0;
padding: 0;
}[/Crayon]

လို႔ ရုိက္ၿပီး အရင္တစ္ေခါက္က သင္တဲ့ login html နဲ႔ folder တစ္ခုတည္းမွာ style.css ဆုိတဲ့နာမည္နဲ႔ save လုပ္လိုက္ပါ။ ဒါဆုိရင္ css ဖုိင္ တစ္ဖုိင္ သိမ္းၿပီးသြားပါၿပီ။ သိမ္းၿပီးေပမယ့္ အခုေရးလိုက္တဲ့ code ကုိ နားလည္ဖုိ႔ လုိပါေသးတယ္။ browser (google chrome, firefox, IE, opera, safari, …) ေတြမွာ သူရဲ႕ default margin ေတြ padding ေတြရွိပါတယ္။ margin ဆုိတာကေတာ့ ကၽြန္ေတာ္တုိ႔ ေက်ာင္းသုံး ဗလာစာအုပ္ေတြမွာ ေဘးမ်ဥ္းတားသလိုပဲ။ web page ေတြမွာလဲ ေဘးဘယ္က ဘယ္ေလာက္ ခြာမယ္။ အေပၚက ဘယ္ေလာက္။ ေအာက္က ဘယ္ေလာက္ဆုိၿပီးေတာ့ ထားၾကပါတယ္။ padding ဆုိတာကလည္း အဲဒီ သေဘာတရားပါပဲ။ ေနာက္မွ အက်ယ္ရွင္းျပပါမယ္။ ဒါေပမယ့္ browser တစ္ခုနဲ႔ တစ္ခု သတ္မွတ္ထားတဲ့ margin, padding ႏႈန္းထားေတြ မတူၾကပါဘူး။ Web Designer တစ္ေယာက္ဟာ ကုိယ့္ design ကုိ browser အားလုံးမွာ အဆင္ေျပေအာင္ ေရးဆြဲေပးရပါတယ္။ အဲလုိ browser တစ္ခုနဲ႔ တစ္ခု margin, padding ႏႈန္းထားမတူေတာ့ ညွိရတာ အဆင္မေျပလို႔ အရင္ဆုံး သူတုိ႔ထားေပးထားတဲ့ margin ေတြ padding ေတြ အားလုံးကုိ 0 ထားလုိက္တာပါ။ ဒီ code ရဲ႕ သေဘာတရားက ဒါပါပဲ။ ဒါဆုိ css ဖုိင္ ရၿပီဆုိရင္ html ဘက္မွာ အခု css ကုိ link ခ်ိတ္ေပးရပါမယ္။ အရင္တစ္ေခါက္က ေရးထားဖူးတဲ့ html file ကုိ notepad++ နဲ႔ ဖြင့္လိုက္ပါ။ <head> နဲ႔ </head> ၾကား ဘယ္ေနရာမွာမဆုိ ေအာက္က code ကုိ ထည့္လိုက္ပါ။

[Crayon lang=”html”][/Crayon]

css ကုိ link ခ်ိတ္မွာမုိ႔လို႔ <link> tag ကုိ အသုံးျပရပါတယ္။ href မွာေတာ့ အခုန သိမ္းထားတဲ့ css လမ္းေၾကာင္းကုိ ေပးရမွာျဖစ္ပါတယ္။ လမ္းေၾကာင္းေပးပုံကုိေတာ့ အရင္က video သင္ခန္းစာ တြမွာ ေသခ်ာရွင္းျပခဲ့ၿပီးျဖစ္ပါတယ္။ rel ဆုိတာကေတာ့ relationship ရဲ႕အတုိျဖစ္ပါတယ္။ အခု ခ်ိတ္မယ့္ css နဲ႔ အခ်ိတ္ခံရမယ့္ html ဖုိင္တုိ႔ရဲ႕ ဆက္ႏြယ္မႈျဖစ္ပါတယ္။ အဲဒါမပါရင္ css file အလုပ္မလုပ္တာမ်ဳိး ျဖစ္တတ္ပါတယ္။ type=”text/css” ဆုိတာကေတာ့ အမ်ဳိးအစားက css ေတြေရးထားတဲ့ text ဖုိင္ျဖစ္တယ္လို႔ ေျပာလိုက္တာပါ။

ၿပီးရင္ css file ကုိ ျပန္သြားပါ။ အခုန margin:0; နဲ႔ padding: 0; ေအာက္မွာ ဆက္ေရးရပါမယ္။ ေအာက္က ကုဒ္ကုိ ဆက္ေရးပါ။ ေနာက္ခံအေရာင္ေပးတဲ့ code ျဖစ္ပါတယ္။

[Crayon lang=”css”]body {
background: #e2eeff;
}[/Crayon]

ၿပီးရင္ ေအာက္က ကုဒ္ေတြကုိ ထပ္ေရးလိုက္ပါဦး။

[Crayon lang=”css”]#form {
width: 220px;
display: block;
padding: 30px 100px;
background: #f4f4f4;
border: 1px solid #ccc;
border-radius: 10px;
text-align: left;
position: absolute;
left: 35%;
top: 30%;
box-shadow: 0 0 10px #bbb;
}[/Crayon]

#form ဆုိတာက ဟုိဘက္ html မွာေရးထားတဲ့ <div id=”form”> ဆုိတာက လွမ္းၿပီး ေရြးခ်ယ္လိုက္တာျဖစ္ပါတယ္။ အဲလို ေရြးခ်ယ္ၿပီးမွ ကုိယ္ေျပာင္းခ်င္တဲ့ ပုံစံေတြ ေျပာင္းလို႔ရပါမယ္။ ဒီေကာင့္ကုိ selector လို႔ေခၚပါတယ္။ အေကာင္းဆုံးကေတာ့ အရင္ဆုံးကေတာ့ css တစ္ေၾကာင္းရုိက္ထည့္ၿပီးတုိင္း browser မွာ refresh တစ္ခါလုပ္ၿပီး ဘာေတြေျပာင္းသြားလဲဆုိတာ ေလ့လာပါ။ ဒါဆုိ ကၽြန္ေတာ္ဘာမွ ေျပာဖို႔မလိုပဲ code ေတြ အကုန္လုံး နားလည္သြားပါလိမ့္မယ္။

ၿပီးရင္ ေအာက္မွာ ဆက္ရုိက္ပါ။

[Crayon lang=”css”]#form h1 {
text-align: center;
color: #00f;
}

#form input {
padding: 10px;
border-radius: 5px;
border: 1px solid #ddd;
margin: 20px 0 0 0;
-moz-transition: box-shadow 0.5s;
-webkit-transition: box-shadow 0.5s;
-o-transition: box-shadow 0.5s;
transition: box-shadow 0.5s;
}[/Crayon]

ဒီ code ေတြမွာ #form h1 ဆုိတာ html ဘက္က <div id=”form”> ေအာက္က <h1> ကုိ လွမ္း select လုပ္တာျဖစ္ၿပီးေတာ့ #form input ဆုိတာကေတာ့ html ဘက္က <div id=”form”> ေအာက္က <input> ေတြအကုန္လုံးကုိ လွမ္း select ေပးလိုက္တာျဖစ္ပါတယ္။ select ေပးၿပီးမွ ကၽြန္ေတာ္တုိ႔ ေျပာင္းခ်င္တာ ေျပာင္းဖို႔အတြက္ css code ေတြ ေရးပါတယ္။ ၿပီးရင္ ေအာက္ကအတုိင္း ထပ္ေရးပါ။

[Crayon lang=”css”]#form input[type=”submit”] {
padding: 10px 20px;
background: #00f;
color: #fff;
border: 1px solid #fff;
box-shadow: 0 0 2px #00f;
}[/Crayon]

ဒီ code မွာေတာ့ type=”submit” ဆုိတာ တစ္ခုပုိလာပါတယ္။ input ေနာက္မွာ ကြင္းစ ကြင္းပိတ္နဲ႔ ေရးတာမုိ႔လို႔ input ရဲ႕ type က submit type ျဖစ္ခဲ့မယ္ဆုိရင္ ဒီ CSS code ေတြ apply လုပ္မယ္လို႔ ေျပာလိုက္တာပါ။ ကၽြန္ေတာ္တုိ႔ html ဘက္မွာဆုိရင္ေတာ့ Login button ေလးက submit type button ပါပဲ။ အဲဒါေၾကာင့္ ဒီ code ထည့္လိုက္ရင္ login button ေလးက style ေျပာင္းသြားတာျဖစ္ပါတယ္။

[Crayon lang=”css”]#form input[type=”submit”]:hover {
box-shadow: 0 0 10px #000 inset;
}

#form input:focus {
box-shadow: 0 0 5px #00f;
}[/Crayon]

ဒီအထက္က code မွာေတာ့ :focus နဲ႔ :hover တုိ႔ ပုိပါလာပါတယ္။ သူတုိ႔ေတြက psudo code (ဆူဒုိ ကုဒ္) ေတြျဖစ္တဲ့အတြက္ အစက္ႏွစ္စက္ (colon) ပါရပါတယ္။ hover ဆုိတာကေတာ့ mouse တင္လိုက္တဲ့အခ်ိန္ကုိ ဖမ္းၿပီးေတာ့ css ေပးလိုက္တာျဖစ္ပါတယ္။ ဒါေၾကာင့္မုိ႔လို႔ login button ေပၚကုိ mouse တင္လုိက္တာနဲ႔ button ေလးက ေဖာင္းႂကြျဖစ္ေနရာက ခ်ဳိင့္ဝင္သြားတာျဖစ္ပါတယ္။ focus ဆုိတာကေတာ့ click ဖိထားတဲ့အခ်ိန္ သုိ႔မဟုတ္ cursor ရွိေနတဲ့အခ်ိန္ကုိ ဖမ္းၿပီးေတာ့ css ေပးတာပါ။ ဒါေၾကာင့္မုိ႔လို႔ username နဲ႔ password box ေတြကုိ ကလစ္ႏွိပ္လိုက္တာနဲ႔ box ေတြေနာက္က အျပာေရာင္ေလးေတြ ထြက္လာတာျဖစ္ပါတယ္။ style ေျပာင္းတာကုိ ေႏွးခ်င္လို႔

[Crayon lang=”css”]-moz-transition: box-shadow 0.5s;
-webkit-transition: box-shadow 0.5s;
-o-transition: box-shadow 0.5s;
transition: box-shadow 0.5s;[/Crayon]

ေတြနဲ႔ ထိမ္းလိုက္တာျဖစ္ပါတယ္။ ဒီ code ေလးေၾကာင္းက ပါၿပီးသားပါ။ ထပ္ေရးစရာမလုိပါဘူး။ ဒါဆုိရင္ေတာ့ login form လွလွပပ တစ္ခုကုိ ရပါၿပီ။ တစ္ခုခု အမွားရွိရင္ တုိက္ၾကည့္ပါဦး။

html ဖုိင္

[Crayon lang=”html”]


Form tutorial by www.myanmarwebdesigner.com

Login form



[/Crayon]

css ဖုိင္

[Crayon lang=”css”]* {
margin: 0;
padding: 0;
}

body {
background: #e2eeff;
}

#form {
width: 220px;
display: block;
padding: 30px 100px;
background: #f4f4f4;
border: 1px solid #ccc;
border-radius: 10px;
text-align: left;
position: absolute;
left: 35%;
top: 30%;
box-shadow: 0 0 10px #bbb;
}

#form h1 {
text-align: center;
color: #00f;
}

#form input {
padding: 10px;
border-radius: 5px;
border: 1px solid #ddd;
margin: 20px 0 0 0;
-moz-transition: box-shadow 0.5s;
-webkit-transition: box-shadow 0.5s;
-o-transition: box-shadow 0.5s;
transition: box-shadow 0.5s;
}

#form input[type=”submit”] {
padding: 10px 20px;
background: #00f;
color: #fff;
border: 1px solid #fff;
box-shadow: 0 0 2px #00f;
}

#form input[type=”submit”]:hover {
box-shadow: 0 0 10px #000 inset;
}

#form input:focus {
box-shadow: 0 0 5px #00f;
}[/Crayon]

ေနာက္တစ္ေခါက္ သင္ခန္းစာမွာေတာ့ အခုေရးလုိက္တဲ့ form ကုိ jQuery နဲ႔ validate လုပ္တာကုိ ေျပာျပေပးပါမယ္။

Leave a Reply

Your email address will not be published. Required fields are marked *