Tag: html5

HTML အကြောင်းကို ကျွန်တော် ရေးခဲ့ပြီးပါပြီ။ ရေးထားခဲ့တဲ့ စာအုပ်က HTML4 အကြောင်းပါ။ အခု HTML5 မှာ ပါဝင်လာတဲ့ feature တွေထဲက form အကြောင်း ထပ်မံဖြည့်စွက်ထားပါတယ်။

Placeholder

textbox မှာ စာမဖြည့်ခင် textbox information ပြထားချင်တဲ့အခါမှာ အရင်တုန်းက jquery ကို သုံးပြီးရေးရတယ်။ အဲဒီလို ရေးမယ့် အစား HTML5 မှာ placeholder ဆိုတဲ့ attribute ကို သုံးလို့ရပါတယ်။ code ကိုတော့ ဒီလိုရေးတယ်။

<input type="text" placeholder="Enter Your Name" />

အဲဒီ code လေးက လက်ရှိ webkit borwser တွေမှာ အလုပ်လုပ်ပါတယ်။ Firefox 3.6 မှာတော့ အလုပ်မလုပ်သေးပါဘူး။ နောက်ပိုင်း version တွေမှာတော့ အလုပ်လုပ်မယ်ထင်တယ်။

Required

require validation စစ်ဗျို့အတွက် ကျွန်တော်တို့တွေ jquery ဖြစ်ဖြစ် javascript ဖြစ်ဖြစ် ရေးပြီး စစ်ခဲ့ရပါတယ်။ အခု HTML5 မှာ require ဆိုတဲ့ attribute နဲ့ တင်ရပါတယ်။ Safari မှာကတော့ error message မပြပေမယ့် form တစ်ခုကို မကူးသွားပါဘူး။ လိုအပ်တဲ့ field မှာ focus ဖြစ်သွားပါတယ်။ Opera မှာကတော့ message ကိုဖော်ပြပေးပါတယ်။ သူ့ကိုတော့ ဒီလိုလေးရေးတယ်။

<input type="text" placeholder="Enter Your Name" required />

Autofocus

HTML5 မှာ javascript နဲ့ textbox ကို focus လုပ်ဖြစ်အောင် ရေးစရာမလိုတော့ပါဘူး။ ဥပမာ။။ Google လိုမျိုး တက်တက်ချင်းမှာ textbox ကို focus ဖြစ်ချင်ရင် autofocus attribute ကို သုံးလိုက်ရုံပါပဲ။ jquery , javascript တွေနဲ့ သီးသန့် ထပ်ရေးနေဖို့မလိုတော့ဘူးပေါ့။ သို့ပေမယ့်လည်း browser တွေ အားလုံးမှာ မရသေးပါဘူး။ လက်ရှိ firefox 3.6 မှာတော့ အဲဒီ attribute အလုပ်မလုပ်သေးပါဘူး။

<input type="text" placeholder="Enter Your Name" required autofocus />

Type=email

HTML4 တုန်းက javascript နဲ့ email validation တွေ စစ်ခဲ့ကြပါတယ်။ အခုတော့ javascript မလိုအပ်ပဲ html5 မှာ စစ်လို့ရပါပြီ။

<input type="email" placeholder="yourmail@mail.com" required />

iPhone, iPodTouch တို့မှာဆိုရင်တော့ email keyboard ပြောင်းသွားပါလိမ့်မယ်။ Opera မှာဆိုရင်တော့ form submit လုပ်တဲ့အခါမှာ email format မှားနေတယ်ဆိုပြီး error message ပြပါလိမ့်မယ်။ Safari တို့ chrome တို့မှာတော့ submit လုပ်လို့မရပဲ focus ဖြစ်သွားပါလိမ့်မယ်။

type=tel

သူကတော့ HTML5 မှာ အသစ်ပါဝင်လာတာပေါ့။ Telephone number အတွက်ပါ။ iPhone , iPodTouch တို့မှာဆိုရင်တော့ phone number keyboard ပေါ်လာပါတယ်။ အခြား browser တွေမှာတော့ ထူးထူးခြားခြားရယ် မရှိပါဘူး။

<input id=phone name=phone type=tel placeholder="Eg. +447500000000" required>

type=number

HTML5 မှာ number တွေ သီးသန့် ထပ်ပါလာပါတယ်။ number field ကို HTML5 မှာ ထပ်ပါလာပါပြီ။ number field ဖြစ်တဲ့အတွက် increase , decrease button လေး ဘေးမှာ ထပ်ပါလာပါတယ်။

<input id=cardnumber name=cardnumber type=number required>

type=date

ကျွန်တော်တို့တွေ date အတွက် javascriptနဲ့ဖြစ်ဖြစ် jqueyr ui နဲ့ ဖြစ်ဖြစ် အသုံးပြုခဲ့ကြပါတယ်။ HTML5 မှာ date field ပါလာပေမယ့် အခုလောလောဆယ်တော့ Opera တစ်ခုတည်းမှာပဲ ရပါသေးတယ်။

<input id=dob name=dob type=date  required>

HTML5 ဆိုင်ရာလေ့လာစရာများ

• Apple HTML5 showcase
• Google HTML5 showcase
• HTML5 Demo