HTML Login form එකක් හදමු..

login pages ඕනතරම් දැකලා ඇති..මේ post එකෙන් කියන්නේ login page එකක් හදාගන්න විදිහ.මේක තමා අපි හදන්න යන්නේ.

log1

 

 

 

 

 

 

 

මේකට අපිට ඕන tags දෙකයි..එකක් <div> tag එක,අනිත් එක <form> tag එක..මේක ලස්සන කරන්න styles ටිකත් ඕනි.මේ tag දෙක හදුන්වල දෙන්නම් මුලින්ම..

div tag එකෙන් වෙන්නේ වෙබ් පිටුවෙන් කිසියම් කලාපයක්(division) එකක්  වෙන් කරගන්න එක..මෙහි එක් වාසියක්  වෙන්නේ  මේ විදිහට සකසාගත් කලාපය තුල තියෙන සියලුම දේවල් වලට එකවර style එක apply කරන්න පුළුවන් වීම.

මේක උදාහරණයකින් පැහැදිලි කරගමු…මම සාමාන්‍ය පරිදි html code එක ලියලා div tags හදුවලා දීලා තියෙනවා..paragraph දෙකක් සාමාන්‍ය body එක ඇතුලේ..අනිත් paragraph දෙක  div tag එක ඇතුලේ තියෙන විදිහට.ඒ එක්කම මම div tag එකට class එකක් දෙනවා style දාන්න පහසු වෙන්න.

2016-01-26_22h16_51

 

 

 

 

 

 

 

 

styles apply කරන්නේ නැතුව මේක තියෙන්නේ මේ විදිහට.

2016-01-26_22h19_21

 

 

 

 

 

 

දැන් මම css දැනුම උපයෝගී කරගෙන div එකට styles දාල බලනවා..

2016-01-26_22h26_24

 

 

 

 

 

 

 

output එක මේක..

2016-01-26_22h27_39සරලව div tag එකෙන් වෙන්නේ කොටුවක් (box) හදාගන්න එක..එක ඇතුලේ තියෙන දේවල් වලට tag එක නාමයෙන් styles දාන්න පුළුවන්..උදාහරණයකට color:red; වලින් වෙනස් වෙලා තියෙන්නේ කොටුවේ වර්ණය නෙවෙයි..කොටුව ඇතුලේ තියෙන text එකේ වර්ණය..

දැන් අපි login form එක හදමු..

මේකට අවශ්‍ය form tag එක.. අපි සම්පුර්ණ code එක ගහලම විස්තරය බලමු..

code1.මේක මගේ login form එක තියෙන div එකේ class එක..styles දානකොට ලේසි වෙන්න තමා       class එකක් දැම්මේ.

2 .ඊළගට form tag  එක පටන්ගෙන තියෙන්නේ,එකට attributes දෙකක් දීල තියෙනවා.පලවෙනි        එක action,මේකෙන් වෙන්නේ මේ login form එක පුරවලා submit කරාම ඊළගට load වෙන්න        ඕන වෙබ් පිටුව හදුන්වල දෙන එක.මෙතනදී මම login.php  කියන වෙබ් පිටුවට link කරලා                තියෙන්නේ

3.  method attribute එකෙන් කරන්නේ අපි submit කරන data ලබාගන්න එක..methods                  දෙකක්  බාවිතා වෙනවා..

i) get – get method එකෙන් ලබාගන්නේ සාමාන්‍ය data,

ii) post – post method එකෙන් passwords වගේ වටිනා data,ඉක්මනින් හසු නොවන                                    විදිහට ලබාගන්න අවශ්‍ය data

මෙතනදී අපි password එකක් බාවිතා කරන නිසා post බාවිතා කරනවා.

ඊට පස්සේ අපි unordered list එකක් හදලා list items වශයෙන් Username,Password,submit       your login,Register කියන list items ටික දාල තියෙන්නේ..line break කරන්න <br > බාවිතා     කරලා තියෙන්නේ.

මෙහෙම හදාගත්ත list items වලට <li> … </li> tags ඇතුලෙම <input> tag එකක් දීලා               තියෙනවා..ඒ කියන්නේ list item එක ඇතුලේ input tag එක වැඩ කරනවා.

input tag එකක් දාන්නේ user ට data input කරන්න අවශ්‍ය තැන්වල..අත්දැකීමෙන් දන්නවා     username සහ password input කරන්න ඕනි කියලා.ඒ නිසා username එකට වෙනම input tag එකක් සහ password එකට වෙනම input tag එකක් ඕනි.

4.username එකට අපි සාමාන්‍ය text බාවිතා කරන්නේ..ඒ නිසා input type එක වෙන්න ඕනි              text (attributes දාන විදිහ කලින් අපි ඉගෙනගත්තා)

5. මෙතැනදී username එකට name කියල attribute එකක්  දීලා තියෙන්නේ විශේෂ                           හේතුවකට..අපි මේ පුරවන data ප්‍රායෝගික පද්ධතියක් තුලදී  database එකට ගිහින් ,අපි                 ලබාදුන්න තොරතුරු  නිවැරදිද ,වැරදිනම් කුමක්ද වැරදි,අපි ලබාදුන්නා තොරතුරු දැනට                     database එකේ නැත්නම් register වෙන්න අවශ්‍ය යොමුව ලබාදීම වගේ ක්‍රියාකාරකම් සිදු                 වෙනවා..ඒවගේ ක්‍රියාකාරකම් කරනකොට අපිට username එකට input කරපු data                         හදුනාගන්න විදිහක් තියෙන්න ඕනි..මේ අවස්ථාවේදී username එකට ලබාදෙන data                       හදුනාගන්නේ username කියන name එකෙන්මයි…සරලවම variable එකක්..ඉදිරියේ php             වලදී මේක ඉතා වැදගත් වෙනවා.

6.password -මේකෙදි password type එක password.සාමාන්‍ය text type එක දුන්නොත් අපි            ඇතුල්කරන password එක සාමාන්‍ය  text එකක් ලෙස දිස් වෙන්නේ.නමුත් password type            එකෙන් ඇතුල්කරන data පිටතට පෙන්නේ මේ විදිහට.

log1

 

 

 

 

 

 

7.මෙහිදීත් හදුනාගැනීමේ name එක password.

8.මෙහිදී submit your login කියන list item එකට input එකක් ලබාදීලා තියෙනවා.එහි input type      එක submit..මෙහිදී වෙන්නේ අපි පුරවපු විස්තර submit කරන්න අවශ්‍ය පහසුකම (button එක )        සකසා ගැනීම..

9.value = log in මහින් අපි ඉහත සකසාගත් button එකේ අපිට පෙනෙන නම ලබාදෙනවා.කැමති        නමක් බාවිතා කරන්න පුළුවන්.

2016-01-27_02h03_07

 

 

10.අවසානයට තියෙන register කියන link එක තමයි මේකෙන් හදලා තියෙන්නේ..link හදන හැටි          අපි කලින් post වල කතා කරා.

මේකට තව විවිද දේවල් එකතු කරන්න පුළුවන්.උදාහරණ ලෙස ඔබ ඇත විදලා ඇති..password එකට තියෙන්න ඕනි අවම characters ගණන.password එක පුරවාගෙන යනකොට තවමත් අවශ්‍ය characters ගණන පෙන්නන අවස්ථා,remember me වැනි දේවල්.මේ වගේ දේවල් අපිට JavaScript බාවිතා කරලා හදන්න පුළුවන්.JavaScript වලදී මේ ගැන කියනවා.

අපි කතා කරපු username සහ password වලට අදාළ name attribute එක php වල බාවිතා වෙන්නේ මේ විදිහට.php වලදී සම්පුර්ණ login system එකක් හදන විදිහ කතා කරමු.

2016-01-27_02h07_36දැන් අපි මුලික සැකසුම් හදාගෙන ඉවරයි..styles දාල ලස්සන කරන විදිහ ඊලග post එකෙන්..

Advertisements

3 thoughts on “HTML Login form එකක් හදමු..

  1. Pingback: Login Form Styling | RST 'S BLOG

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s