HTML Input အကွက်

value အကွက်

value ဖော်ပြသော အကွက် အရွယ် ကို စတင် အရေးအချင်း ဖြင့် ဖော်ပြသည်

အမှတ်အသား

<form action="">
 ပထမအမည်:<br>
<input type="text" name="firstname" value="Bill">
<br>
 နောင်တန်းအမည်:<br>
<input type="text" name="lastname">
</form>

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

readonly အကွက်

readonly ဖော်ပြသော အကွက် အရွယ် ကို သာမန် ဖြင့် မပြုနိုင်

အမှတ်အသား

<form action="">
 ပထမအမည်:<br>
<input type="text" name="firstname" value="Bill" readonly>
<br>
 နောင်တန်းအမည်:<br>
<input type="text" name="lastname">
</form>

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

readonly အကွက် အတွက် အသုံးပြုလိုသော အရာ မရှိဘူး။ အမှတ်အသားအားဖြင့် readonly="readonly"

disabled အကွက်

disabled ဖော်ပြသော အကွက် အရွယ် ကို disabled ဖြင့် ဖော်ပြသည်

ပိတ်ထားသော အစားသား အသုံးပြုခြင်း နှင့် လက်ခံခြင်း မရှိ

ပိတ်ထားသော အစားသား အမှုကို တင်ပြလိမ့်မည် မဟုတ်

အမှတ်အသား

<form action="">
 ပထမအမည်:<br>
<input type="text" name="firstname" value="Bill" disabled>
<br>
 နောင်တန်းအမည်:<br>
<input type="text" name="lastname">
</form>

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

disabled အကွက် အတွက် အသုံးပြုလိုသော အရာ မရှိဘူး။ အမှတ်အသားအားဖြင့် disabled="disabled"

size အကွက်

size ဖော်ပြသော အကွက် အရွယ် ကို အစားသား အရောက်ပိုင်း (အကျယ်အခြောက် အရ) ဖော်ပြသည်

အမှတ်အသား

<form action="">
 ပထမအမည်:<br>
<input type="text" name="firstname" value="Bill" size="40">
<br>
 နောင်တန်းအမည်:<br>
<input type="text" name="lastname">
</form>

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

maxlength အကွက်

maxlength ဖော်ပြသော အကွက် အရွယ် ကို ခွင့်ပြုထားသော အရောက်ပိုင်းကို

အမှတ်အသား

<form action="">
 ပထမအမည်:<br>
<input type="text" name="firstname" maxlength="10">
<br>
 နောင်တန်းအမည်:<br>
<input type="text" name="lastname">
</form>

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

maxlength အကိုးးအခံ ကို ကျွမ်းကျွမ်းပြီး ပြင်ဆင်သောအခါ အရွက်အရင်းအား ချွတ်လွတ်သော အရွယ်ချင်း အချက်အလက်များ မပြင်ဆင်လိမ့်မည်ဖြစ်ဘဲပဲပေါ်လာသည်。

အချက်အလက်အား အပြန်ဖတ်သော အကိုးးအခံ အား အပြန်ဖတ်လိမ့်မည်မဟုတ်ဘဲပဲပေါ်လာသည်။ အသုံးပြုသူကို သတိပြုရန် လိုအပ်သောအခါ လက်လျှာစာ အား ပြင်ဆင်လိမ့်မည်ဖြစ်သည်。

ဖော်ပြချက်:အရွယ်ချင်းအချက်အလက်များ အတွက် အကျုံးကြမ်းမဟုတ်ဘဲပဲပေါ်လာသည်။ JavaScript အား ပြင်ဆင်သောအခါ ဖိုးအားပေး သင့်သည်မဟုတ်ဘဲပဲပေါ်လာသည်။ ဖိုးအားပေး လိုသောအခါ အသုံးပြုသူကို သတိပြုရန် လိုအပ်သည်。

HTML5 အကိုးးအခံ

HTML5 အား <input> အမျိုးအစားများကို ပြင်ဆင်ခဲ့သည်:

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height နှင့် width
  • list
  • min နှင့် max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

ပြင်ဆင်သောအခါ <form> အား အချက်အလက်များ ပြင်ဆင်လိမ့်မည်ဖြစ်သည်:

  • autocomplete
  • novalidate

autocomplete အကိုးးအခံ

autocomplete အကိုးးအခံ အထူးသဖြင့် ပုံစံသို့မဟုတ် အရွက်အရင်းအား သုံးပြုသည်မှာ သဘောတူသည်မဟုတ်ဘဲပဲပေါ်လာသည်。

အက်တိုပ်ဆိုင်းပြီး အသုံးပြုသောအခါ ဘရပ်ဆိုင်း က အသုံးပြုသူ၏ အရွယ်ချင်း အသုံးပြုခဲ့သော အရွယ်ချင်း အချက်အလက်များ အခြေခံ၍ အရွယ်ချင်း အချက်အလက်များ ပြင်ဆင်လိမ့်မည်ဖြစ်သည်。

အကြံပေး:သင့် ပုံစံအား autocomplete အဖြစ် on အထိုးချင်း နှင့် အမှုန်းအရင်းအား အထိုးချင်း ပြင်ဆင် နိုင်ပါ။

autocomplete အကိုးးအခံ အထူးသဖြင့် <form> နှင့် အောက်ပါ <input> အမျိုးအစားများဖြင့် အသုံးပြုသည်: text, search, url, tel, email, password, datepickers, range နှင့် color。

အမှတ်အသား

အက်တိုပ်ဆိုင်းပြီး အသုံးပြုသော HTML ပုံစံ (တစ်ခုခုသော အရွက်အရင်းအား off အထိုးချင်း) :

<form action="action_page.php" autocomplete="on">
   ပထမအမည်:<input type="text" name="fname"><br>
   အမည်ဖြင့်: <input type="text" name="lname"><br>
   E-mail: <input type="email" name="email" autocomplete="off"><br>
   <input type="submit">
</form>

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

အကြံပေး:အချို့ ဘာသာပြန် ကြိုးပမ်းခြင်း အတွက် အမှုထမ်း အသုံးပြုပါ။

novalidate အခွင့်အရေး

novalidate အခွင့်အရေး သည် <form> အခွင့်အရေး ဖြစ်သည်。

အခွင့်အရေး ကို အစိုးရချင်း ပြုလုပ်ခြင်း ကို ပြုလုပ်ခြင်း ကို ပုံစံ တင်ပြခြင်း အတွက် မပြုလုပ်ပါ။

အမှတ်အသား

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

<form action="action_page.php" novalidate>
   E-mail: <input type="email" name="user_email">
   <input type="submit">
</form>

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

autofocus အခွင့်အရေး

autofocus အခွင့်အရေး သည် ဘလား အခွင့်အရေး ဖြစ်သည်。

အခွင့်အရေး ကို အစိုးရချင်း ပြုလုပ်ခြင်း ကို ပြုလုပ်ခြင်း ကို အစိုးရချင်း ပြုလုပ်ပါ။

အမှတ်အသား

"First name" အရာဝတ္တု အခွင့်အရေး ကို စင်းကြယ် ပြီး စာမေးအုပ် တွင် လျှပ်ခဲ့ပါလျှင် အခွင့်အရေး အတွက် ပြုလုပ်ပါ။

First name:<input type="text" name="fname" autofocus>

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

form အခွင့်အရေး

form အခွင့်အရေး သည် <input> အခွင့်အရေး ကို တခုခုနှင့်ပြီး သို့မဟုတ် အများပြားပြားစွာ ကို ပြုလုပ်သည့် ပုံစံကို ချမှတ်သည်。

အကြံပေး:တစ်ခုထက် ပိုသော ပုံစံကို ကိုးကွယ်ခြင်း အတွက် ပုံစံ id အစားအသား ကို ကွဲပြားစွာ အသုံးပြုပါ။

အမှတ်အသား

အရာဝတ္တုအခွင့်အရေး သည် HTML ပုံစံကို ဖြတ်သန်းသွားသည် (သို့သော် အခြေခံ ပုံစံ အပါအဝင်)။

<form action="action_page.php" id="form1">
   အမည်ဖြင့်: <input type="text" name="fname"><br>
   <input type="submit" value="Submit">
</form>
 Last name: <input type="text" name="lname" form="form1">

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

formaction အခွင့်အရေး

formaction အခွင့်အရေး သည် ပုံစံကို တင်ပြခြင်း လက်ခံသည့် လက်ဖင်း ကို ပြုလုပ်ခြင်း လက်ခံသည့် URL ကို ချမှတ်သည်。

formaction အခွင့်အရေး သည် <form> အခွင့်အရေး ကို ဖြည်းစည်းသည်。

formaction အခွင့်အရေး သည် type="submit" နှင့် type="image" အခွင့်အရေး အတွက် အသုံးပြုသည်。

အမှတ်အသား

နှစ်ခုသော တင်ပြခြင်း အခွင့်အရေး နှင့် မတူညီသော လက်ခံခြင်း အသုံးပြုခြင်း ကို ပြသထားသော HTML ပုံစံပါတယ်:

<form action="action_page.php">
   အမည်ဖြင့်: <input type="text" name="fname"><br>
   အမည်ဖြင့်: <input type="text" name="lname"><br>
   <input type="submit" value="Submit"><br>
   <input type="submit" formaction="demo_admin.asp"
   value="Submit as admin">
</form>

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

formenctype အခွင့်အရေး

formenctype အခွင့်အရေး သည် ပုံစံအသုံးပြုခြင်း (form-data) ကို လက်ခံသည့် လက်ဖင်း (သာ method="post" အသုံးပြုသော ပုံစံ) ကို အောင်ပွားစေရန် ပြုလုပ်ခြင်းကို ချမှတ်သည်。

formenctype အခွင့်အရေး သည် <form> အခွင့်အရေး ကို ဖြည်းစည်းသည်။

formenctype လက္ခဏာ သုံးစွဲနိုင်သည် type="submit" နှင့် type="image" အတွက်。

အမှတ်အသား

ပုံစံအချက် အနည်းငယ်နှင့် "multipart/form-data" (ဒုတိယတင်ပြ) အနည်းငယ်ကို ပေးပို့သော တင်ပြသင်္ချာ (form-data):

<form action="demo_post_enctype.asp" method="post">
   အမည်ဖြင့်: <input type="text" name="fname"><br>
   <input type="submit" value="Submit">
   <input type="submit" formenctype="multipart/form-data">
   value="Submit as Multipart/form-data">
</form>

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

formmethod လက္ခဏာ

formmethod လက္ခဏာ သည် ပုံစံအချက် action URL ထဲသို့ form-data ကို ပေးပို့ရန် အသုံးပြုသော HTTP စနစ်ကို အကြောင်းပြောသည်。

formmethod လက္ခဏာ ဖြင့် <form> အစိတ်အပိုင်း၏ method လက္ခဏာ ကို ကူးကြားပြီးသားသည်。

formmethod လက္ခဏာ သုံးစွဲနိုင်သည် type="submit" နှင့် type="image" အတွက်。

အမှတ်အသား

ဒုတိယတင်ပြ ဘက်အတွက် HTTP စနစ်ကို ဖြေဖြေချထားသော တင်ပြသင်္ချာ

<form action="action_page.php" method="get">
   အမည်ဖြင့်: <input type="text" name="fname"><br>
   အမည်ဖြင့်: <input type="text" name="lname"><br>
   <input type="submit" value="Submit">
   <input type="submit" formmethod="post" formaction="demo_post.asp">
   value="Submit using POST">
</form>

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

formnovalidate လက္ခဏာ

novalidate လက္ခဏာ အမှန်/အမတ် လက္ခဏာဖြစ်သည်。

အစိုးရပြီးလျှင် တင်ပြသင်္ချာ ကို တင်ပြသည့်အခါ <input> အစိတ်အပိုင်းကို စစ်ဆေးမမှန်မှု မပြုဘဲ ကြိုးပမ်းသည်။

formnovalidate လက္ခဏာ ဖြင့် <form> အစိတ်အပိုင်း၏ novalidate လက္ခဏာ ကို ကူးကြားပြီးသားသည်。

formnovalidate လက္ခဏာ သုံးစွဲနိုင်သည် type="submit" အတွက်。

အမှတ်အသား

နှစ်ခုရှိသော တင်ပြသင်္ချာ (စစ်ဆေးမမှန်မှု မပြုသည့် တင်ပြ)

<form action="action_page.php">
   အီးမေးလာ: <input type="email" name="userid"><br>
   <input type="submit" value="Submit"><br>
   <input type="submit" formnovalidate value="Submit without validation">
</form>

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

formtarget အကိုရိုက် အချက်အလက်

formtarget အကိုရိုက် အချက်အလက် သည် အချက်ပေးရာ အပ်နှံရာ ပြီးနောက် အချက်ပေးရာ အပ်နှံရာ ပြုပြီး ပြောင်းလဲသော နေရာ ကို အသိအမှတ်ပြုပါသည်။

formtarget အကိုရိုက် အချက်အလက် သည် <form> အရင်းအမြစ် အား target အကိုရိုက် ကို ကျယ်ပြီး ပြောင်းလဲပါတယ်။

formtarget အကိုရိုက် အချက်အလက် သည် type="submit" နှင့် type="image" ကို အသုံးပြုနိုင်ပါသည်။

အမှတ်အသား

ဒါမှာ အချက်ပေးရာ အပ်နှံရာ အသစ် နှင့် အပ်နှံရာ အပ်နှံရာ အသစ် နှင့် ကို ကူးစက်ပါတယ်:

<form action="action_page.php">
   အမည်ဖြင့်: <input type="text" name="fname"><br>
   အမည်ဖြင့်: <input type="text" name="lname"><br>
   <input type="submit" value="အချက်ပေးရာ အပြင်းအတက်">
   <input type="submit" formtarget="_blank"
   value="အချက်ပေးရာ အသစ် အပ်နှံရာ ပေါ်မူးယား">
</form>

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

height နှင့် width အကိုရိုက် အချက်အလက်

height နှင့် width အကိုရိုက် အချက်အလက် သည် <input> အရင်းအမြစ် အား အကြီးအကြွေး နှင့် width ကို အပ်ဆိုပါသည်။

height နှင့် width အကိုရိုက် အချက်အလက် သည် <input type="image"> တွင် သာ အသုံးပြုပါသည်။

ဖော်ပြချက်:အချက်အလက် အပ်ဆိုပါပါက သို့မဟုတ် ဘူတာသတ္တိ မရှိဘဲကြားသော အခါ ဘူတာ တွင် ယူနီယံ သို့ တင်ဆောင်လာစဉ် အခြင်းအရာ အလွန် ပြင်းထန်စွာ ဖုံးကွဲသွားပါတယ်။

အမှတ်အသား

ယူနီယံ ကို တင်ပြပါ အရင်းအမြစ် အား အကြီးအကြွေး နှင့် width အကိုရိုက် အချက်အလက် အပ်ဆိုပါ:

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

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

list အကိုရိုက်

list အကိုရိုက် ပါတဲ့ <datalist> အရင်းအမြစ် တွင် <input> အရင်းအမြစ် အသတ်မှတ်ထားသော အချက်အလက်များ ပါဝင်သည်။

အမှတ်အသား

အသုံးပြုပါ <datalist> ကို <input> အရင်းအမြစ် ကို သတ်မှတ်ပါ:

<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist>

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

min နှင့် max အရိုက်

min နှင့် max အရိုက် အသုံးပြုသည် ဖြင့် ဖြစ်သည် <input> အရာဝတ္တု အနည်းဆုံး နှင့် အမြင့်ဆုံး အချက်အလက် ဖော်ပြသည်。

min နှင့် max အရိုက် အသုံးပြုသည် ဖြင့် ဖြစ်သည် အရေးယူထားသော အကြိမ်ဖြူး အရာဝတ္တု ကို ဖြစ်သည်: number, range, date, datetime, datetime-local, month, time နှင့် week。

အမှတ်အသား

အနည်းဆုံး နှင့် အမြင့်ဆုံး အချက်အလက် ပါဝင်သော <input> အရာဝတ္တု:

Enter a date before 1980-01-01:
Enter a date before 1980-01-01:
 Enter a date after 2000-01-01:
Enter a date after 2000-01-01:
 Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">

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

multiple အရိုက်

multiple အရိုက် အသုံးပြုသည် ဖြင့် ဖြစ်သည် အခြား အရိုက်

အခြား အကြိမ်ဖြူး အကြိမ်ဖြူး အရာဝတ္တု ကို အသုံးပြုထားသည် ဖြင့် ဖြစ်သည် အရေးယူထားသော အကြိမ်ဖြူး အရာဝတ္တု ကို အသုံးပြုထားပါ၏。

multiple အရိုက် အသုံးပြုသည် ဖြင့် ဖြစ်သည် အရေးယူထားသော အကြိမ်ဖြူး အရာဝတ္တု ကို ဖြစ်သည်: email နှင့် file。

အမှတ်အသား

အခြား အကြိမ်ဖြူး အရာဝတ္တု အသုံးပြုထားသော ဖိုင် အပ်ပိုး အရာဝတ္တု:

အခြား အကြိမ်ဖြူး အရာဝတ္တု ကို အသိပ်ပေးပါ：<input type="file" name="img" multiple>

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

pattern အရိုက်

pattern အရိုက် အသုံးပြုသည် ဖြင့် ဖြစ်သည် အရေးယူထားသော အကြိမ်ဖြူး အရာဝတ္တု ကို စစ်ဆေးထားသော အချက်အလက်

pattern အရိုက် အသုံးပြုသည် ဖြင့် ဖြစ်သည် အရေးယူထားသော အကြိမ်ဖြူး အရာဝတ္တု ကို စစ်ဆေးထားပါ၏: text, search, url, tel, email, နှင့် password。

အကြံပေး:အသုံးပြုထားသော title အရိုက် ကို အခြား အကြိမ်ဖြူး အရာဝတ္တု ကို ဖော်ပြသည် အကြောင်း အသိပ်ပေးပါ。

အကြံပေး:အခြား အသိပ်အချက်အလက် အကြောင်းကို အော်သီပိုင်း JavaScript ပညာရှင် အတွက် အသိပ်ပေးပါ。

အမှတ်အသား

အသုံးပြုထားသော အကြိမ်ဖြူး အရာဝတ္တု က အချက်အလက် ၃ လုံး သာ ပါဝင်သည် (အကြမ်းအားဖြင့် ကွင်းစား သို့မဟုတ် အချက်အလက် အသား)

Country code: 
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

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

placeholder အရိုက်

placeholder အရိုက် အသုံးပြုသည် အရေးယူထားသော အကြိမ်ဖြူး အရာဝတ္တု ကို ဖော်ပြထားသော အသိပ် (အမှတ်အသား သို့မဟုတ် ပုံစံ အသိပ်) ကို ဖော်ပြသည်。

အသုံးပြုသူ ဖြင့် အရေးယူထားသော အမှတ်အသား က အရေးယူထားသော အရာဝတ္တု အတွက် အရေးယူထားသော အကြိမ်ဖြူး အရာဝတ္တု အတွင်း ပြသထားပါသည်。

placeholder 属性适用于以下输入类型：text、search、url、tel、email 以及 password。

အမှတ်အသား

拥有占位符文本的输入字段：

<input type="text" name="fname" placeholder="First name">

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

required အခြေခံ အကွက်

required အခြေခံ အကွက် အခြေခံ အကွက်

အခြေခံ ဖြစ်လျှင် အသုံးပြု အခြေခံ အကွက် အချက် အား တင်ပြခြင်း

required အခြေခံ အကွက် အခြေခံ ပါဝင်သော အကွက်အချက်: text, search, url, tel, email, password, date pickers, number, checkbox, radio နှင့် file。

အမှတ်အသား

ပါဝင်သော အကွက် အခြေခံ

Username: <input type="text" name="usrname" required>

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

step အခြေခံ အကွက်

step အခြေခံ အကွက် အခြေခံ အကွက် <input> အခြေခံ အကွက် အချက် ကို အခြေခံ အကွက် အချက် ဖြစ်သည်။

အမှတ်အသား: အခြေခံ အကွက် အချက် step="3" ဖြစ်လျှင် အခြေခံ အကွက် အချက် -3, 0, 3, 6, နှင့် အတိုင်း ဖြစ်သည်။

အကြံပေး:step အခြေခံ အကွက် နှင့် max နှင့် min အခြေခံ အကွက် အမျိုးမျိုး တစ်ခုခု တွင် အခြေခံ အကွက် အချက် ဖွဲ့စည်းခြင်း

step အခြေခံ အကွက် အခြေခံ ပါဝင်သော အကွက်အချက်: number, range, date, datetime, datetime-local, month, time နှင့် week。

အမှတ်အသား

အခြေခံ ပုံစံ အကွက် ပါဝင်သော အကွက်အချက်

<input type="number" name="points" step="3">

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