අපේම Google Search Page එකක් හදාගමු - HTML 5.

මේ සඳහා මං ඉතාම සරල විදිහක් තමා යොදාගෙන තියෙන්නේ. මේකේ ඇති අමාරු දෙයක් නෑ. හැබැයි HTML දැනුම ටිකක් ඕන කරනවා. වැඩේට උවමනා කරන්නේ text field එකක්. සහ submit type එකේ button එකක් විතරයි. ලස්සනක් තියෙන්න ඕන නිසා වැඩ ටිකක් දාලා තියේ ඒ ගැන හිතන්න එපා. ඉතින් අපි text field, submit button ගන්නවානම් form එකත් යොදාගන්නවනේ. දන්නා HTML වලින් image එකක් එහෙම දාලා, text field එක, submit එක දාගන්නකෝ. HTML 5 වලින් මං මේ සඳහා යොදා ගන්නේ,

ඔයාලට කියල දෙන්න යන්නේ autofocus කියන attribute එකත්, required කියන attribute එකත්, style sheet සඳහා CSS 3 වල යොදාගැනෙන :invalid, :valid යන්න වේ. 

HTML 5 වල වෙනස දකින්න, අලුත්ම Web Browsers උවමනා වෙනවා. ඔයාලගාව තියෙන්නේ පරණ version එකක්නම් එක upgrade or update කරගන්න. මේ වන විට තියෙන ප්‍රධාන Web Browsers වල version මෙහෙමයි.
Opera 11.64 - මේක තමා HTML 5 වලට දැනට හොඳටම support කරන්නේ.
Google Chrome 19.0 - මෙයා තමා ඊළඟට හොඳම.
Mozilla FireFox 13 - මෙයත් හොඳයි. එත් අඩු පාඩු තියේ.
Internet Explorer 9, 10 Beta - මෙයා නම් එච්චරම හොඳ නෑ.
Safari 

ඉස්සරනම් අපි කලේ text box validate කරන්න අමාරුවෙන් හරි JavaScript එකක් ලියපු එක. එත් දැන් එහෙම ඕන වෙන්නේ නෑ. HTML 5 වල, HTML වලින්ම ඒ දේ කරගන්න පුළුවන්. 

අපි submit button එක ඔබන්න කලින් text field එකේ මොනවහරි තියෙන්න එපැයිනේ search කරන්න දත්තයක්. ඒ කියන්නේ required field validation. ඉතින් මේකට අපට HTML 5 වල කරන්න තියෙන්නේ, input tag එක ඇතුලේ required කියල සඳහන් කරන එක විතරයි. තවත් වැදගත්ම දෙයක් කියන්න ඕන. textfield එකේ name එක අනිවාර්යෙන් q කියල සඳහන් කරන්න. නැත්නම් වැඩ කරන්නේ නෑ.
<input name="q" type="text" required/>

page එකක් load වෙලා, form එකක ඉස්සෙල්ලම පුරවන්න ඕන දත්තයට automatically focus වෙනවනම් එක user ටත් පහසුවක් නේද. ඉතින් HTML 5 වල මෙහෙම යෙදුවම,
<input name="q" type="text" autofocus/> 
කෙලින්ම එය සදහන් දේට focus වී හෝ, cursor එක එතනට ඇවිත් තියෙනවා. autofocus යන්න අපට එක වරයි එක page එකක් සඳහා යොදන්න පුළුවන්. ඔය කියපු දෙකම ඕනනම් මෙහෙම ලියන්න.
<input name="q" type="text" autofocus required/> කියල. 

<form>

<input name="searchtext" type="text" autofocus required/><br>

<input type="submit" value="Search" />

</form>

හිතන්න ඔබ text field එක පුරවලා නැහැ කියල. එහෙම තියෙද්දී submit button එක එබුවම error බව පෙන්වන්න text field එක රතු උනොත් කොහොමද. ඒ දේ කරන්නේ මෙහෙමයි. </head> tag එකට උඩින් මෙන්න මෙහෙම style sheet එකක් ලියන්න. :invalid, :valid කියන්නේ මේ සඳහා අලුතින් එක්වුණු දේවල්. අපි ඒ දෙන්නව යොදාගමු.

<style type="text/css">

  :invalid {

    background-color: #ff7777;

  }

  :valid {

    background-color: #ddffdd;

  }

</style>

දැන් ඉතින් ඔන්න validation එකත් හරි දැන් තියෙන්නේ කොහොමද Google Search එකට යවන්නේ කියන එක. අපි මේ හැමදේම කලේ form කියන tag එකක් තුලනේ. ඉතින්, Submit button එක එබුවම වෙන්න ඕන action එක විදියට අපේ අවශ්‍යතාව සදහන් කරමු. action එක වන්නේ, google.com/search සඳහා text field value එක pass කිරීමයි. අපි මෙහෙම කරමු.
<form action="http://www.google.com/search" method="get">
දැන් ඔය file එක save කරගන්න .html extension එක ඇතිව.
දැන් අලුත් වෙබ් Browser එකකින් ඔයාලගේ html file එක open කල බලන්නකෝ. තව ඉහත video එකත් බලන්න.
මේක ඔයාලගේ Home Page එක කරගත්තම, Browser එක Open වෙන්නේ ඉස්සෙලම මේ page 1 පෙන්නලා. ඔයාට පුළුවන් ඔතන ඕනෑම දෙයක් type කරලා සාමාන්‍ය Google Search ඒ විදිහටම කරන්න.
full source code එක සහ මං කරපු එක මෙතැනින් බා ගන්න.
http://www.mediafire.com/?o1pplx3qitrs21c