Skip to content
GitHub

HTML 5 Features

HTML5 မှာ ပါဝင်လာတဲ့ Input Type အသစ်များ

Section titled “HTML5 မှာ ပါဝင်လာတဲ့ Input Type အသစ်များ”

HTML5 မှာ Form တွေအတွက် Input type အသစ်တွေ အများကြီး ပါဝင်လာပါတယ်။ ဒါကြောင့် User တွေအတွက် အဆင်ပြေတဲ့ Form တွေကို Code တွေ အများကြီး ရေးနေစရာမလိုဘဲ အလွယ်တကူ ဖန်တီးနိုင်လာပါတယ်။

Email လိပ်စာ ထည့်ခိုင်းဖို့ သုံးပါတယ်။ Browser က ထည့်လိုက်တဲ့ စာသားက Email format အမှန် (ဥပမာ - user@example.com) ဟုတ်မဟုတ် အလိုအလျောက် စစ်ဆေးပေးပါတယ်။

ဥပမာ -

<label for="email">Email:</label>
<input type="email" id="email" name="email">

URL (ဝဘ်ဆိုဒ်လိပ်စာ) တွေ ထည့်ဖို့အတွက် သုံးပါတယ်။ ထည့်လိုက်တဲ့ စာသားက Web address အမှန် (ဥပမာ - https://www.example.com) ဟုတ်မဟုတ် စစ်ဆေးပေးပါတယ်။

ဥပမာ -

<label for="website">Website:</label>
<input type="url" id="website" name="website">

User တွေကို ပြက္ခဒိန် (Calendar) ပုံစံလေး ပေါ်လာပြီး ရက်စွဲတစ်ခု ရွေးခိုင်းနိုင်ပါတယ်။

ဥပမာ -

<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob">
date picker

User တွေကို သတ်မှတ်ထားတဲ့ Range အတွင်းက တန်ဖိုးတစ်ခုကို Slider ပုံစံလေး ရွှေ့ပြီး ရွေးခိုင်းနိုင်ပါတယ်။

ဥပမာ -

<label for="volume">Volume:</label>
<input type="range" id="volume" name="volume" min="0" max="100">
range slider

အရောင်တစ်ခုကို ရွေးချယ်ဖို့အတွက် Color picker (အရောင်ရွေးတဲ့ Box လေး) တစ်ခု ပေါ်လာစေပါတယ်။

ဥပမာ -

<label for="color">Pick a Color:</label>
<input type="color" id="color" name="color">
color picker