HTML အမှတ်ချက်ပုံ

ယခုပုဒ်ပါ သည် <input> အက်ဖ်ဖြင့် အမှတ်ချက်ပုံကို ဖော်ပြထားသည်။

အမှတ်ချက်ပုံ သတ္တိ: text

<input type="text"> သတ္တိ ဖော်ပြခြင်းအစီအစဉ် ဖြည့်စွက်ခြင်းအက်ဖ်ဖြင့် ဖြည့်စွက်နိုင်သော ပုံများ:

အကျိုးသက်ရှိမှု

<form>
 အမည်:<br>
<input type="text" name="firstname">
<br>
 အမည်အသစ်:<br>
<input type="text" name="lastname">
</form>

ကိုယ်တိုင် ကျင်းပပါ

以上 HTML 代码在浏览器中看上去是这样的：

အမည်:


အမည်အသစ်:

အမှတ်ချက်ပုံ သတ္တိ: password

<input type="password"> အသုံးပြုပုဂ္ဂလိက်အက်ဖ် စက်တန်း：

အကျိုးသက်ရှိမှု

<form>
 User name:<br>
<input type="text" name="username">
<br>
 User password:<br>
<input type="password" name="psw">
</form>

ကိုယ်တိုင် ကျင်းပပါ

以上 HTML 代码在浏览器中看上去是这样的：

User name:


User password:

အကြောင်းပြpassword စက်တန်းမှ ကိုက်ညီသော ကွက်အရည်ဖြင့် ပြန်လည်ဖြည့်စွက်ထားသည်(ပြောင်းဖြေကာ ကြောက်အမှတ်မှသာ ပြသထားသည်)။

အမှတ်ချက်ပုံ သတ္တိ: submit

<input type="submit"> အသုံးပြုတိုက်ရိုက်ပေးသည်ပြုစုပုံအင်တာနက်စက် သို့ပြုစုပုံအင်တာနက်စက်၏ နှိပ်စက်ပုံ။

ပြုစုပုံအင်တာနက်စက်(form-handler) သည် ဆက်သွယ်ထဲပြီး အမှတ်ချက်ပြုထားသော နှိပ်စက်ပုံများ ကို အသုံးပြုသော ဆက်သွယ်ပုံအင်တာနက်စက် ဖြစ်သည်။

Specify the form handler (form-handler) in the action attribute of the form:

အကျိုးသက်ရှိမှု

<form action="action_page.php">
အမည်:<br>
<input type="text" name="firstname" value="Mickey">
<br>
အမည်အသစ်:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

ကိုယ်တိုင် ကျင်းပပါ

以上 HTML 代码在浏览器中看上去是这样的：

အမည်:


အမည်အသစ်:


If you omit the value attribute of the submit button, the button will get the default text:

အကျိုးသက်ရှိမှု

<form action="action_page.php">
အမည်:<br>
<input type="text" name="firstname" value="Mickey">
<br>
အမည်အသစ်:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit">
</form>

ကိုယ်တိုင် ကျင်းပပါ

Input Type: radio

<input type="radio"> Radio button အသုံးပြု

Radio buttons let a user select ONLY ONE of a limited number of choices:

အကျိုးသက်ရှိမှု

<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>

ကိုယ်တိုင် ကျင်းပပါ

以上 HTML 代码在浏览器中看上去是这样的：

Male

Female

Input Type: checkbox

<input type="checkbox"> ဖွင့်စားသဏ္ဌာန် အသုံးပြု

ဖွင့်စားသဏ္ဌာန်များသည် သုံးစွဲသူက သတ်မှတ်ထားသော အရာများမှ အချိန်ကြား အရာများ အား အမှတ်ပေးခြင်း နှင့် အရာများ အချိုးချိုး အား အမှတ်ပေးခြင်း ကို ခွင့်ပြုသည်。

အကျိုးသက်ရှိမှု

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

ကိုယ်တိုင် ကျင်းပပါ

以上 HTML 代码在浏览器中看上去是这样的：

I have a bike

I have a car

Input Type: button

<input type="button"> အသုံးပြုဘေ့စ်。

အကျိုးသက်ရှိမှု

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

ကိုယ်တိုင် ကျင်းပပါ

以上 HTML 代码在浏览器中看上去是这样的：

HTML5 输入类型

HTML5 增加了多个新的输入类型：

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

အကြောင်းပြအရိပ်အား အခြေခံ ဘရာဇက်ပြည်နယ် အား အကြောင်းပြ�၍ အသုံးပြုသော အချက်အလက် အမျိုးအစား အား အစားထိုးပါ။

အရေးပါသော အသုံးပြုပါခြင်း

<input type="number"> နေ့လည် ပါဝင်သော အချက်အလက် အပေါ် သုံးစွဲပါ။

သင် အရေအတွက် အခွင့်အလမ်း ပြုပါနိုင်ပါသည်။

ဘရာဇက်ပြည်နယ် အခြေခံ အား အကြောင်းပြု၍ အချက်အလက် အခွင့်အလမ်း ကို အသုံးပြုပါ။

အကျိုးသက်ရှိမှု

<form>
  အရေအတွက် (1 မှ 5 အထိ):
  <input type="number" name="quantity" min="1" max="5">
</form>

ကိုယ်တိုင် ကျင်းပပါ

အရေးပါသော အချက်အလက်

အသုံးပြုသော အရေးပါသော အချက်အလက် သဘောတူညီချက် (အချို့ သည် HTML5 တွင် ထပ်ထည့်ခဲ့သည်)များ ကို ထိုအရပ်တွင် ရှိပါသည်:

အချက်အလက် ဖော်ပြ
disabled အရေးပါသော အချက်အလက် အသုံးပြုပါ (အသုံးပြုခြင်း မပါ)။
max အရေးပါသော အချက်အလက် အမြင့်ဆုံး အတိုင်းအတာ ကို ကြေညာပါ။
maxlength အရေးပါသော အချက်အလက် အမြင့်ဆုံး အစားကြောင်း ကို ကြေညာပါ။
min အရေးပါသော အချက်အလက် အနည်းဆုံး အတိုင်းအတာ ကို ကြေညာပါ။
pattern အရေးပါသော အချက်အလက် အသုံးပြုပါ (အသုံးပြုသူ အား အခွင့်ပြုခြင်း မပါ)။
readonly အရေးပါသော အချက်အလက် အသုံးပြုပါ (ပြန်လည်ပြောင်းလဲခြင်း မပါ)။
required အရေးပါသော အချက်အလက် အခြေခံဖြင့် အသုံးပြုပါ (လိုအပ်သော အချက်အလက် ဖြင့် ပြုပါ)။
size အရေးပါသော အချက်အလက် အကျယ်အဝန်း (အစားကြောင်းပါ) ကို ကြေညာပါ။
step အရေးပါသော အချက်အလက် အခွင့်အလမ်း ကို ကြေညာပါ။
value အရေးပါသော အချက်အလက် အတိုင်းအတာ ကို အသုံးပြုပါ။

သင် နောင်လာမည့် ပိုင်းတွင် အရေးပါသော အချက်အလက် သဘောတူညီချက် အကြောင်း အသိအမှတ်ပြုပါ။

အကျိုးသက်ရှိမှု

<form>
  အရေအတွက်:
  <input type="number" name="points" min="0" max="100" step="10" value="30">
</form>

ကိုယ်တိုင် ကျင်းပပါ

အရေးပါသော အသုံးပြုပါခြင်း

<input type="date"> နေ့လည် ပါဝင်သော အချက်အလက် အပေါ် သုံးစွဲပါ။

ဘူတာသံကြားအထောက်ခံမှုအရ ရက်စွဲသည် အရွင်းသုံးဖော်ဖြေရမည်။

အကျိုးသက်ရှိမှု

<form>
  နေ့လည်
  <input type="date" name="bday">
</form>

ကိုယ်တိုင် ကျင်းပပါ

သင် အရေးပါသော သုံးစွဲသော အချက်အလက် အပေါ် သဘောတူညီချက် ပြုပါ။

အကျိုးသက်ရှိမှု

<form>
  ပြီးခဲ့သော 1980-01-01 တွင် ပိုမို ရှိသော နေ့ ဖြင့် အသုံးပြုပါ။
  <input type="date" name="bday" max="1979-12-31"><br>
  2000-01-01 ပြီးနောက် ရက် ကို အသုံးပြုပါ:
  <input type="date" name="bday" min="2000-01-02"><br>
</form>

ကိုယ်တိုင် ကျင်းပပါ

အရွင်းသုံးဖော်ဖြေအမှတ်: color

<input type="color"> အရောင် ပါဝင်သော အရွင်းသုံးဖော်ဖြေ အား အသုံးပြုသည်။

ဘူတာသံကြားအထောက်ခံမှုအရ အရောင်စွဲသည် အရွင်းသုံးဖော်ဖြေရမည်။

အကျိုးသက်ရှိမှု

<form>
  ကိုယ်ချင်း အများဆုံး အရောင် ကို ရယူပါ:
  <input type="color" name="favcolor">
</form>

ကိုယ်တိုင် ကျင်းပပါ

အရွင်းသုံးဖော်ဖြေအမှတ်: range

<input type="range"> အရွင်းသုံးဖော်ဖြေ အရ အချိန်အနှံ့ ကို ပါဝင်သော အရွင်းသုံးဖော်ဖြေ အား အသုံးပြုသည်။

ဘူတာသံကြားအထောက်ခံမှုအရ အရွင်းသုံးဖော်ဖြေ ဖြစ်ပေါ်လာနိုင်သည်။

အကျိုးသက်ရှိမှု

<form>
  <input type="range" name="points" min="0" max="10">
</form>

ကိုယ်တိုင် ကျင်းပပါ

min, max, step, value သည့် အခြေခံအရ ကတ်ချက်များ ကို အသုံးပြုနိုင်ပါသည်။

အရွင်းသုံးဖော်ဖြေအမှတ်: month

<input type="month"> အသုံးပြုသူက လ နှင့် နှစ် ကို ရယူနိုင်သည်။

ဘူတာသံကြားအထောက်ခံမှုအရ ရက်စွဲသည် အရွင်းသုံးဖော်ဖြေရမည်။

အကျိုးသက်ရှိမှု

<form>
  နေ့လ (လ နှင့် နှစ်):
  <input type="month" name="bdaymonth">
</form>

ကိုယ်တိုင် ကျင်းပပါ

အရွင်းသုံးဖော်ဖြေအမှတ်: week

<input type="week"> အသုံးပြုသူက ဆိုင်းမှုန်း နှင့် နှစ် ကို ရယူနိုင်သည်။

ဘူတာသံကြားအထောက်ခံမှုအရ ရက်စွဲသည် အရွင်းသုံးဖော်ဖြေရမည်။

အကျိုးသက်ရှိမှု

<form>
  ဆိုင်းမှုန်း နှင့် နှစ် ကို ရယူပါ:
  <input type="week" name="week_year">
</form>

ကိုယ်တိုင် ကျင်းပပါ

အရွင်းသုံးဖော်ဖြေအမှတ်: time

<input type="time"> အသုံးပြုသူက အချိန် (သမဂ္ဂလိုင်) ကို ရယူနိုင်သည်။

ဘူတာသံကြားအထောက်ခံမှုအရ အချိန်စွဲသည် အရွင်းသုံးဖော်ဖြေရမည်။

အကျိုးသက်ရှိမှု

<form>
  အချိန်ကို ရယူပါ:
  <input type="time" name="usr_time">
</form>

ကိုယ်တိုင် ကျင်းပပါ

အရွင်းသုံးဖော်ဖြေအမှတ်: datetime

<input type="datetime"> အသုံးပြုသူက ရက် နှင့် အချိန် (သမဂ္ဂလိုင်) ကို ရယူနိုင်သည်။

ဘူတာသံကြားအထောက်ခံမှုအရ ရက်စွဲသည် အရွင်းသုံးဖော်ဖြေရမည်။

အကျိုးသက်ရှိမှု

<form>
  နေ့လ (ရက် နှင့် အချိန်):
  <input type="datetime" name="bdaytime">
</form>

ကိုယ်တိုင် ကျင်းပပါ

အရွင်းသုံးဖော်ဖြေအမှတ်: datetime-local

<input type="datetime-local"> အသုံးပြုသူက ရက် နှင့် အချိန် (သမဂ္ဂလိုင်) ကို ရယူနိုင်သည်။

ဘူတာသံကြားအထောက်ခံမှုအရ ရက်စွဲသည် အရွင်းသုံးဖော်ဖြေရမည်။

အကျိုးသက်ရှိမှု

<form>
  နေ့လ (ရက် နှင့် အချိန်):
  <input type="datetime-local" name="bdaytime">
</form>

ကိုယ်တိုင် ကျင်းပပါ

Input type: email

<input type="email"> Used for input fields that should contain an email address.

According to browser support, email addresses can be automatically verified at submission.

Some smartphones will recognize email type and add ".com" to the keyboard to match email input.

အကျိုးသက်ရှိမှု

<form>
  E-mail:
  <input type="email" name="email">
</form>

ကိုယ်တိုင် ကျင်းပပါ

Input type: search

<input type="search"> Used for search fields (search fields are similar to regular text fields).

အကျိုးသက်ရှိမှု

<form>
  Search Google:
  <input type="search" name="googlesearch">
</form>

ကိုယ်တိုင် ကျင်းပပါ

Input type: tel

<input type="tel"> Used for input fields that should contain a phone number.

Currently only Safari 8 supports tel type.

အကျိုးသက်ရှိမှု

<form>
  Telephone:
  <input type="tel" name="usrtel">
</form>

ကိုယ်တိုင် ကျင်းပပါ

Input type: url

<input type="url"> Used for input fields that should contain a URL address.

According to browser support, the URL field can be automatically verified at submission.

Some smartphones recognize URL type and add ".com" to the keyboard to match URL input.

အကျိုးသက်ရှိမှု

<form>
  Add your homepage:
  <input type="url" name="homepage">
</form>

ကိုယ်တိုင် ကျင်းပပါ