Tutorial တွေ မရေးပေးတာကြာတော့ ကိုသီဟ တစ်ယောက်က SkipSoft ရေ mmtuts မှာစာမရေးတော့ဘူးလား လို့ တစ်မေးထဲ မေးနေလေတော့ မအားတဲ့ ကြားထဲက ကောင်းကောင်း လေးတွေ ရေးပေးလိုက်ပါတယ်။ အခု ရှင်းပြချင်တဲ့ အကြောင်းက html5 ပါ။ Browser အားလုံးနဲ့ အဆင် မပြေသေးပေးမယ့် ထူးခြားတဲ့ ရသကို ခံစား လို့ရပါတယ်။ html5 ရဲ့ လူသုံးအများဆုံးနဲ့ အထူးခြားဆုံး တွေကို ရှင်းပြချင်ပါတယ်။

Placeholder text

<form>
<input name="q" placeholder="Type your keyword">
<input type="submit" value="Search">
</form>

Place holder ကို Support လုပ်တဲ့ browser တွေကတော့ အောက်မှာ ဖော်ပြထားတဲ့ list အတိုင်း ဖြစ်ပါတယ်။ Place holder ထဲ့သွင်း အသုံးပြုထားလို့ support မလုပ်တဲ့ browser တွေမှာ ဘယ်လို ပြဿနာ မျိုးမှ မရှိပါဘူး ဆိုလိုတဲ့ သဘောကတော့ CSS မှာ style တစ်ခု ရေးထား ပေမယ့် support မလုပ်တဲ့ browser မှာဆိုရင် ဘာမှ မပြပဲ တစ်ချို့ browser ဆိုရင် တစ်လွဲတွေ ပြနေတတ်ပါတယ်။ html 5 ရဲ့ place holder ကတော့ support မလုပ်တဲ့ browser ပေါ်မှာ ဘယ်လိုအမှားမျိုးမှ မပြနိုင်ပါဘူး။

IE – None, Firefox – 3.7+, Safari – 4.0+, Chrome – 4.0+, Opera – None, iOS Safari – None, Android – None

Autofocus fields

<form>
<input name="q" autofocus>
<input type="submit" value="Search">
</form>

Google သုံးဖူးလားလို့ မေးလိုက်ရင် သုံးဖူးတယ်လို့ ဖြေကြမှာ သိနေတော့ မမေးတော့ပါဘူး။ Google.com လို့ ရေးထဲ့လိုက်ရင် search အတွက် လုပ်ထားတဲ့ input fields ကို focus လုပ်စရာမလိုပဲ တိုက်ရိုက်ရှာလို့ ရတာကို သတိထား မိမယ်ထင်ပါတယ်။ Google ကတော့ js သုံးထားတာပါ။ ကျွန်တော်ကတော့ html5 အကြောင်းပြောနေတော့ html5 အကြောင်းပဲ ရေးပေးလိုက်ပါတယ်။ အောက်မှာပြထားတဲ့ list ကတော့ autofocus ကို support လုပ်တဲ့ browser တွေဖြစ်ပါတယ်။

IE – None, Firefox – None, Safari – 4.0+, Chrome – 4.0+, Opera – 10+, iOS Safari – None, Android – None

Html5 အကြောင်းပဲ သီးသန့်ပြောမယ်လို့ စဉ်းစားထားပေမယ့် google က js သုံးထားတယ်လို့ ပြောမိတော့ browser တိုင်း support လုပ်မယ့် autofocus script လေးပါ ပြောပြလိုက်ပါတယ်။

<form name="f">
<input id="q" autofocus>
<script>
if (!("autofocus" in document.createElement("input"))) {
document.getElementById("q").focus();
}
</script>
<input type="submit" value="Go">
</form>

Email address

<form>
<input type="email">
<input type="submit" value="Go">
</form>

ဘာသာရေး အယူနဲ့ဆိုရင် ဖြစ်ချိန်တန်လို့ ဖြစ်တယ် ပျက်ချိန်တန်လို့ ပျက်တယ် ဆိုတာမျိုးပဲ ထင်ပါတယ်။ Form တွေမှာ email အတွက် အတွက် text ကို သုံးလာခဲ့တာ အချိန်တွေ ကြာနေပါပြီ။ ဒါပေမယ့် html5 ပေါ်လာတော့ ထူးခြားဆုံး တစ်ခု ဖြစ်လာခဲ့ပြန်ပါပြီး ဒါကတော့ email ပါ။ email ဟာ input fields ထဲမှာ support မလုပ်တဲ့ browser ဆိုရင် text အဖြစ်ပြောင်းသွားပေးပါတယ်။ ကမ္ဘာပေါ်မှာ text ဆိုတဲ့ input fields ကို support မလုပ်တဲ့ browser မပေါ်သေးပါဘူး။ ဒါကြောင့် သင်သုံးနေတဲ့ email form ကို အခုချက်ချင်း ပြောင်းလိုက်သင့် ပြီလို့ ကျွန်တော် ယူစပါတယ်။ email အတွက် Opera ဆိုရင် input fields ထဲမှာ email icon လေးပြပေးမှာ ဖြစ်သလို့ iOS Safari မှာဆိုရင် email form အတွက် ဖြည့်ဖို့ ဖော်ပြပေးတဲ့ keyboard မှာ spacebar နေရာကျင်းပြီး @ sing တွေ . sing တွေ ထည့်ပြီး ဖော်ပြ ပေးပါလိမ့်မယ်။

Web Address

<form>
<input type="url">
<input type="submit" value="Go">
</form>

တိုတိုပြောရရင်တော့ email address နဲ့တူတူပါပဲ။ iOS Safari မှာဆိုရင် spacebar နေရာကျင်းပြီး .com ဆိုတဲ့ sing တွေ ထည့်ပြီး ဖော်ပြပေးနိုင်ပါတယ်။

Number as slider

<input type="range"
min="0"
max="10"
step="2"
value="6">

ကျွန်တော်သိပ်ကြိုက်တဲ့ ပြောင်းလဲမှုမှာ ပါပါတယ်။ အရင်လို အများကြီး ရေးစရာ မလိုတော့ပါဘူး။ ရိုးပါတယ် ရှင်းပါတယ်။ ဝတ်မှုံရွှေရည်တောင် သူ့လောက် ချစ်ဖို့ မကောင်းပါဘူး။ Form တွေထဲမှာ number တွေအတွက် slider လှလှ လေးသုံးလို့ ရအောင် html5 က အစွမ်းပြ ထားပါတယ်။ min က အနည်းဆုံး တန်ဖိုးပါ။ max ကတော့ အများဆုံး တန်ဖိုးပါ။ step ကတော့ တစ်ကွက်ရွေ့ရင် တက်မယ့် တန်ဖိုးဖြစ်ပါတယ်။ value ကတော့ default တန်ဖိုးဖြစ်ပါတယ်။ Safari, chorme, နဲ့ opera က support လုပ်နိုင်ပါတယ်။ iOS safari ကတော့ text input fields ပဲပြပေမယ့် num keyboard ထုတ်ပေးပါလိမ့်မယ်။ တစ်ခြား browser တွေကတော့ text input fields နဲ့ဖော်ပြ ပါလိမ့်မယ်။ ဒီအချက်လောက်နဲ့တော့ မသုံးတော့ ဘူးဆိုင်ရင် မိုက်မဲလွန်းရာ ကျပါတယ်။

Search box

<form>
<input name="q" type="search">
<input type="submit" value="Find">
</form>

ခေါင်းစဉ်တွေ့ကထဲက ဘယ်နေရာမှာ သုံးတယ်ဆိုတာ သိနှင့် နေလောက်ပါပြီ။ ဟုတ်ပါတယ် search form အတွက်ပါ။ ရိုးရိုးလေးပါ။ safari နဲ့ iOS safari မှာဆိုရင် rounded corner နဲ့ ပြပေးမှာပါ။ ဒါလေးများ CSS3 နဲ့ရတယ်လို့ ပြောမလို့မလား ခဏနေပါဦး ဆက်ပြောပြရစေဦး search form ထဲမှာ ရေးထည့်လိုက်ပြီး clear လုပ်လို့ input fields ထဲမှာပဲ x ပုံလေး ပြနေပေးပါသေးတယ်။ Support မလုပ်တဲ့ browser ဆိုရင် text input fields အနေနဲ့ ပြပေးပါတယ်။

Editable

<h3>ToDo List</h3>
<li contenteditable="true">Something to do</li>
<p contenteditable="true">Post on mmtuts</p>
<div contenteditable="true">Post on mmtuts</div>

သူလဲထူးခြားပါတယ်။ Text တွေကို Editable အဖြစ်ပြောင်းလဲပေးနိုင်ပါတယ်။ Html5 support လုပ်တဲ့ browser တိုင်းနဲ့ အသုံးပြု နိုင်ပါတယ်။ လက်ရှိအချိန်ထိ Local အတွက်ပဲ အသုံးဝင်တယ်လို့ ခံစားရသေးလို့ အကျယ်ချဲ့ မရေးပေးတော့ပါဘူး။

Required Attribute

<input type="text" name="someInput" required>  

Required input fields တွေ အားလုံးအတွက် သုံးနိုင်ပါတယ်။ Html5 support လုပ်တဲ့ browser တိုင်းနဲ့ အသုံးပြုနိုင်ပါတယ်။ အရင်ကတော့ script တွေ အများကြီး ရေးရတဲ့ အခြေအနေကနေ ကျော်လွှားလာ နိုင်ပြီလို့ ပြောမယ်ဆိုရင်လဲ ပြောလို့ရနေပါပြီ။ Required Attribute ကို နောက်တစ်နည်းနဲ့ သုံးနိုင်ပါသေးတယ်။

<input type="text" name="someInput" required="required">

Audio

<audio autoplay="autoplay" controls="controls">
<source src="file.ogg" />
<source src="file.mp3" />
<source src="file.wav" />
<a href="file.mp3">Download this file.</a>
</audio> 

Flash ကို မေ့လိုက်ပါတော့။ html5 ဆိုတာ ရှိနေပါပြီ။ Audio သီချင်းတွေအတွက် အလွယ်တစ်ကူ အဆင်ပြေစေပါပြီ။ Browser တွေအလိုက် audio ကို support လုပ်တာ မတူလို့ version သုံးခုတော့ အသုံးပြု ပေးရပါလိမ့်မယ်။ Firefox က ogg, Webkit က mp3, opera ကတော့ wav ကို သုံးထားတတ်ပါတယ်။ Safari လဲ mp3 ပါပဲ။ support မလုပ်တဲ့ extension တွေကို browser တွေက ကျော်သွားပေးပါလိမ့်မယ်။

Video

<video controls preload>
<source src="video.ogv" type="video/ogg; codecs='vorbis, theora'" />
<source src="video.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />
<p> Your browser is old. <a href="video.mp4">Download this video </a> </p>
 </video> 

Audio လိုသဘောတရားမျိုးဆိုပေမယ့် နည်းနည်းတော့ ကွဲနေပါတယ်။ သူ့မှာ type တွေကို ရွေးပေးရပါတယ်။ Browser တိုင်းက support လုပ်ဖို့ကို လက်မခံကြသေးပါဘူး။ ဒါကြောင့် download ချလို့ ရမယ့် link မျိုးလဲ ထည့်သွင်း ဖော်ပြသင့်ပါတယ်။ သင်ထည့်သွင်း အသုံးပြုမယ်ဆိုရင်လဲ bandwidth တွေဘာတွေကို သေခြာ ထိန်းချုပ်ပြီးမှ ထည့်သွင်း အသုံးပြုသင့်တယ်လို့ အကြံပေးပါရစေ။ controls ဆိုတာကတော့ controls ထည့်သွင်းဖော်ပြမယ်ဆိုတဲ့ သဘောပါ။ preload ကတော့ video ကို play လုပ်လုပ် မလုပ်လုပ် ကြိုတင်ပြီး load လုပ်ထားပေးမှာဖြစ်ပါတယ်။ ကျွန်တော့်အမြင်ကတော့ မသုံးသင့်ဘူးလို့ ထင်ပါတယ်။ ဒါပေမယ့် ထူးခြားမှုရှိနေလို့ထည့်ရေးပေးလိုက်ပါတယ်။

3 Responses

1. linn says:

   March 4, 2011 at 4:50 PM

   Flash ပြေညက်ါဘံ website တွေလှနေတညဘံနစတြ်လညူ

   Reply
2. linn says:

   March 4, 2011 at 4:57 PM

   flash ကြောင့် website တွေလှနေတာမဟုတ်ဘူးလားဗျ
   အခုမွလာ့ပီူေတာ့
   အရင္က Flash မွေကာင္းသေလံလူေတြဘယ္ေရာက္ကုန္ာကျပီလဲဗ်

   Reply
3. Errorlay ! says:

   March 4, 2011 at 5:04 PM

   Facebook လို Social Website မှာဆိုရင်ပါလို့လား Flash
   သူကျတော့ဘာလို့လှလဲကဲပြော

   Reply