HTML ထည့်သွင်းခြင်း အရည်အချင်းများ
<input>ဤအခန်းသည် HTML ဒြပ်စင် အတွက် မတူညီသော အရည်အချင်းများကို ဖော်ပြသည် ။
တန်ဖိုး Attribute
input valueattribute သည် input အကွက်အတွက် ကနဦးတန်ဖိုးကို သတ်မှတ်သည်-
ဥပမာ
ကနဦး (မူလ) တန်ဖိုးများပါရှိသော ထည့်သွင်းကွက်များ-
<form>
<label for="fname">First name:</label><br>
<input type="text"
id="fname" name="fname" value="John"><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname"
value="Doe">
</form>
ဖတ်ရန်သာ ရည်ညွှန်းချက်
input readonlyattribute သည် input field တစ်ခုသည် read-only ဖြစ်ကြောင်း သတ်မှတ်သည်။
ဖတ်ရန်-သပ်သပ် ထည့်သွင်းသည့်အကွက်ကို ပြုပြင်၍မရပါ (သို့သော်၊ အသုံးပြုသူတစ်ဦးသည် ၎င်းကို တက်ဘ်ဆိုဒ်၊ မီးမောင်းထိုးပြပြီး ၎င်းမှစာသားကို ကူးယူနိုင်သည်)။
ဖောင်ကို တင်သွင်းသည့်အခါ ဖတ်ရန်-သီးသန့် ထည့်သွင်းမှုအကွက်၏ တန်ဖိုးကို ပေးပို့ပါမည်။
ဥပမာ
ဖတ်ရန်သီးသန့် ထည့်သွင်းမှုအကွက်-
<form>
<label for="fname">First name:</label><br>
<input type="text"
id="fname" name="fname" value="John" readonly><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname"
value="Doe">
</form>
Disabled Attribute ၊
input disabledattribute သည် input field တစ်ခုအား ပိတ်ထားသင့်သည်ဟု သတ်မှတ်သည်။
ပိတ်ထားသော ထည့်သွင်းမှုအကွက်သည် အသုံးမပြုနိုင်သည့်အပြင် နှိပ်၍မရပါ။
ဖောင်ကို တင်သွင်းသည့်အခါ ပိတ်ထားသည့် ထည့်သွင်းမှုအကွက်၏ တန်ဖိုးကို ပေးပို့မည်မဟုတ်ပါ။
ဥပမာ
ပိတ်ထားသော ထည့်သွင်းမှုအကွက်-
<form>
<label for="fname">First name:</label><br>
<input type="text"
id="fname" name="fname" value="John" disabled><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname"
value="Doe">
</form>
အရွယ်အစား Attribute
input sizeattribute သည် input field တစ်ခု၏ မြင်နိုင်သော အကျယ်၊ အက္ခရာများဖြင့် သတ်မှတ်သည်။
မူရင်းတန်ဖိုး sizeသည် 20 ဖြစ်သည်။
မှတ်ချက်- ရည်ညွှန်းချက်သည် အောက်ပါ sizeထည့်သွင်းမှုအမျိုးအစားများနှင့် အလုပ်လုပ်သည်- စာသား၊ ရှာဖွေမှု၊ ဖုန်း၊ url၊ အီးမေးလ်နှင့် စကားဝှက်။
ဥပမာ
ထည့်သွင်းအကွက်အတွက် အကျယ်ကို သတ်မှတ်ပါ-
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname" size="50"><br>
<label
for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin"
size="4">
</form>
အမြင့်ဆုံး Attribute
ထည့်သွင်း maxlengthရည်ညွှန်းချက်သည် ဖြည့်သွင်းအကွက်တစ်ခုတွင် ခွင့်ပြုထားသော အများဆုံးစာလုံးအရေအတွက်ကို သတ်မှတ်ပေးသည်။
မှတ်ချက်- သတ်မှတ် သည့်အခါ maxlength၊ ထည့်သွင်းသည့်အကွက်သည် သတ်မှတ်ထားသည့် စာလုံးအရေအတွက်ထက် ပိုနေမည်မဟုတ်ပါ။ သို့သော်၊ ဤအရည်အသွေးသည် မည်သည့်တုံ့ပြန်မှုမှ မပေးပါ။ ထို့ကြောင့် အသုံးပြုသူကို သတိပေးလိုပါက JavaScript ကုဒ်ကို ရေးရပါမည်။
ဥပမာ
ထည့်သွင်းအကွက်အတွက် အများဆုံး အရှည်ကို သတ်မှတ်ပါ-
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname" size="50"><br>
<label
for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin"
maxlength="4" size="4">
</form>
အနည်းဆုံး နှင့် အမြင့်ဆုံး အရည်အချင်းများ
ထည့်သွင်းခြင်း minနှင့် maxရည်ညွှန်းချက်များသည် ထည့်သွင်းအကွက်တစ်ခုအတွက် အနိမ့်ဆုံးနှင့် အမြင့်ဆုံးတန်ဖိုးများကို သတ်မှတ်ပေးသည်။
minရည်ညွှန်းချက်များ နှင့် ရည်ညွှန်းချက်များသည် အောက်ပါ maxထည့်သွင်းမှုအမျိုးအစားများနှင့် အလုပ်လုပ်သည်- နံပါတ်၊ အပိုင်းအခြား၊ ရက်စွဲ၊ ရက်စွဲအချိန်-ဒေသ၊ လ၊ အချိန်နှင့် အပတ်။
အကြံပြုချက်- တရားဝင်တန်ဖိုးများအကွာအဝေးကိုဖန်တီးရန် အမြင့်ဆုံးနှင့် min ရည်ညွှန်းချက်များကို အတူတကွသုံးပါ။
ဥပမာ
အများဆုံးရက်စွဲ၊ မိနစ်ရက်စွဲနှင့် တရားဝင်တန်ဖိုးများ အပိုင်းအခြားကို သတ်မှတ်ပါ-
<form>
<label for="datemax">Enter a date before
1980-01-01:</label>
<input type="date" id="datemax" name="datemax"
max="1979-12-31"><br><br>
<label for="datemin">Enter a date
after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin"
min="2000-01-02"><br><br>
<label for="quantity">Quantity
(between 1 and 5):</label>
<input type="number" id="quantity"
name="quantity" min="1" max="5">
</form>
Attribute မျိုးစုံ
input multipleattribute သည် အသုံးပြုသူအား ထည့်သွင်းမှုအကွက်တစ်ခုတွင် တန်ဖိုးတစ်ခုထက်ပို၍ထည့်ရန်ခွင့်ပြုထားကြောင်း သတ်မှတ်သည်။
ရည်ညွှန်းချက်သည် အောက်ပါ multipleထည့်သွင်းမှုအမျိုးအစားများနှင့် အလုပ်လုပ်သည်- အီးမေးလ်၊ နှင့် ဖိုင်။
ဥပမာ
တန်ဖိုးများစွာကို လက်ခံသည့် ဖိုင်အပ်လုဒ်အကွက်
<form>
<label for="files">Select files:</label>
<input
type="file" id="files" name="files" multiple>
</form>
Pattern သည် Attribute ဖြစ်သည်။
patternဖောင်ကို တင်သွင်းသည့်အခါ ထည့်သွင်းသည့်အကွက်၏ တန်ဖိုးကို စစ်ဆေးထားသည့် ပုံမှန်အသုံးအနှုန်းကို ထည့်သွင်းသည့် ရည်ညွှန်းချက်က သတ်မှတ်သည်။
ရည်ညွှန်းချက်သည် အောက်ပါ patternထည့်သွင်းမှုအမျိုးအစားများနှင့် အလုပ်လုပ်သည်- စာသား၊ ရက်စွဲ၊ ရှာဖွေမှု၊ url၊ ဖုန်း၊ အီးမေးလ်၊ နှင့် စကားဝှက်။
အကြံပြုချက်- အသုံးပြုသူ ကို ကူညီရန် ပုံစံကို ဖော်ပြရန် ကမ္ဘာလုံးဆိုင်ရာ ခေါင်းစဉ် ရည်ညွှန်းချက်ကို အသုံးပြုပါ။
အကြံပြုချက်- ကျွန်ုပ်တို့၏ JavaScript သင်ခန်းစာတွင် ပုံမှန်အသုံးအနှုန်းများ အကြောင်း ပိုမိုလေ့လာပါ ။
ဥပမာ
စာလုံးသုံးလုံးသာပါဝင်နိုင်သော အကွက်တစ်ခု (နံပါတ်များ သို့မဟုတ် အထူးအက္ခရာများမပါ)။
<form>
<label for="country_code">Country code:</label>
<input type="text" id="country_code" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code">
</form>
Placeholder Attribute
ထည့်သွင်း placeholderရည်ညွှန်းချက်သည် ထည့်သွင်းအကွက်တစ်ခု၏ မျှော်လင့်ထားသည့်တန်ဖိုးကို ဖော်ပြသည့် အတိုကောက်အရိပ်အမြွက်ကို သတ်မှတ်ပေးသည် (နမူနာတန်ဖိုး သို့မဟုတ် မျှော်မှန်းဖော်မတ်၏ အတိုချုံးဖော်ပြချက်)။
အသုံးပြုသူသည် တန်ဖိုးတစ်ခုမဝင်မီ အတိုချုံး အရိပ်အမြွက်ကို ထည့်သွင်းအကွက်တွင် ပြသထားသည်။
ရည်ညွှန်းချက်သည် အောက်ပါ placeholderထည့်သွင်းမှုအမျိုးအစားများနှင့် အလုပ်လုပ်သည်- စာသား၊ ရှာဖွေမှု၊ url၊ ဖုန်း၊ အီးမေးလ်၊ နှင့် စကားဝှက်။
ဥပမာ
နေရာယူထားသော စာသားပါသော ထည့်သွင်းအကွက်-
<form>
<label for="phone">Enter a phone number:</label>
<input type="tel" id="phone" name="phone"
placeholder="123-45-678"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
လိုအပ်သော Attribute
ဖောင်မတင်မီ ထည့်သွင်းမှုအကွက်ကို ထည့် သွင်း requiredရန် ရည်ညွှန်းချက်က သတ်မှတ်သည်။
ရည်ညွှန်းချက်သည် အောက်ပါ requiredထည့်သွင်းမှုအမျိုးအစားများနှင့် အလုပ်လုပ်သည်- စာသား၊ ရှာဖွေမှု၊ url၊ ဖုန်း၊ အီးမေးလ်၊ စကားဝှက်၊ ရက်စွဲရွေးချယ်သူများ၊ နံပါတ်၊ အမှတ်ခြစ်ပုံး၊ ရေဒီယိုနှင့် ဖိုင်။
ဥပမာ
လိုအပ်သော ထည့်သွင်းမှုအကွက်-
<form>
<label for="username">Username:</label>
<input
type="text" id="username" name="username" required>
</form>
အဆင့်မှာ Attribute ပါ။
ထည့်သွင်း stepရည်ညွှန်းချက်သည် ထည့်သွင်းမှုအကွက်တစ်ခုအတွက် တရားဝင် နံပါတ်ကြားကာလများကို သတ်မှတ်ပေးသည်။
ဥပမာ- step="3" ဆိုလျှင် တရားဝင်နံပါတ်များသည် -3၊ 0၊ 3၊ 6 အစရှိသည်တို့ ဖြစ်နိုင်သည်။
အကြံပြုချက်- တရား၀င်တန်ဖိုးများအကွာအဝေးကိုဖန်တီးရန် ဤအရည်အချင်းကို အမြင့်ဆုံးနှင့် min ရည်ညွှန်းချက်များနှင့်အတူ အသုံးပြုနိုင်သည်။
ရည်ညွှန်းချက်သည် အောက်ပါ stepထည့်သွင်းမှုအမျိုးအစားများနှင့် အလုပ်လုပ်သည်- နံပါတ်၊ အပိုင်းအခြား၊ ရက်စွဲ၊ ရက်စွဲအချိန်-ဒေသ၊ လ၊ အချိန်နှင့် ရက်သတ္တပတ်။
ဥပမာ
သတ်မှတ်ထားသော တရားဝင်နံပါတ် ကြားကာလများပါရှိသော ထည့်သွင်းအကွက်-
<form>
<label for="points">Points:</label>
<input
type="number" id="points" name="points" step="3">
</form>
မှတ်ချက်- ထည့်သွင်းမှုကန့်သတ်ချက်များသည် မိုက်မဲခြင်းမဟုတ်ပါ၊ နှင့် JavaScript သည် တရားမဝင်ထည့်သွင်းမှုကို ထည့်သွင်းရန် နည်းလမ်းများစွာကို ပံ့ပိုးပေးပါသည်။ ထည့်သွင်းမှုကို ဘေးကင်းစွာ ကန့်သတ်ရန်၊ ၎င်းကို လက်ခံသူ (ဆာဗာ) မှလည်း စစ်ဆေးရပါမည်။
autofocus Attribute သည်
autofocusစာမျက်နှာကိုဖွင့်သည့်အခါ ထည့်သွင်းမှုအကွက်သည် အာရုံစူးစိုက်မှုကို အလိုအလျောက်ရရှိသင့်သည်ဟု ထည့်သွင်း ရည်ညွှန်းချက်က သတ်မှတ်သည်။
ဥပမာ
စာမျက်နှာကိုဖွင့်သည့်အခါ "ပထမအမည်" ထည့်သွင်းမှုအကွက်ကို အလိုအလျောက် အာရုံစူးစိုက်နိုင်စေသည်-
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname" autofocus><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname">
</form>
အမြင့် နှင့် အနံ Attributes
ထည့်သွင်းခြင်း heightနှင့် ရည်ညွှန်းချက်များသည် ဒြပ်စင်တစ်ခု၏ widthအမြင့်နှင့် အကျယ်ကို သတ်မှတ် ပေးသည်။<input
type="image">
အကြံပြုချက်- ပုံများအတွက် အမြင့်နှင့် width attribute နှစ်ခုလုံးကို အမြဲသတ်မှတ်ပေးပါ။ အမြင့်နှင့် အကျယ်ကို သတ်မှတ်ပါက၊ စာမျက်နှာကို တင်သောအခါတွင် ပုံအတွက် လိုအပ်သော နေရာလွတ်ကို သိမ်းဆည်းထားသည်။ ဤအရည်အချင်းများမရှိဘဲ၊ ဘရောင်ဇာသည် ပုံ၏အရွယ်အစားကို မသိနိုင်သည့်အပြင် ၎င်းအတွက် သင့်လျော်သောနေရာလွတ်ကို သိမ်းဆည်းထား၍မရပါ။ အကျိုးသက်ရောက်မှုသည် တင်နေစဉ်အတွင်း စာမျက်နှာအပြင်အဆင်သည် ပြောင်းလဲသွားလိမ့်မည် (ပုံများကို တင်နေစဉ်)။
ဥပမာ
အမြင့်နှင့် အကျယ် ရည်ညွှန်းချက်များဖြင့် ပုံတစ်ပုံကို တင်သွင်းရန် ခလုတ်အဖြစ် သတ်မှတ်ပါ-
<form>
<label for="fname">First name:</label>
<input
type="text" id="fname" name="fname"><br><br>
<label for="lname">Last
name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>
စာရင်းမှာ Attribute ပါ။
ထည့်သွင်း listရည်ညွှန်းချက်သည် <datalist><input> ဒြပ်စင်အတွက် ကြိုတင်သတ်မှတ်ထားသော ရွေးစရာများပါရှိသော ဒြပ်စင်ကို ရည်ညွှန်းသည်။
ဥပမာ
<datalist> တွင် ကြိုတင်သတ်မှတ်ထားသော တန်ဖိုးများပါသည့် <input> ဒြပ်စင်တစ်ခု-
<form>
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
အလိုအလျောက်ဖြည့်သွင်းသည့် အရည်အချင်း
ထည့်သွင်း autocompleteရည်ညွှန်းချက်သည် ဖောင်တစ်ခု သို့မဟုတ် အဖြည့်အကွက်တစ်ခုတွင် အလိုအလျောက်ဖြည့်သွင်းခြင်း သို့မဟုတ် ပိတ်သင့်သည်ရှိမရှိကို သတ်မှတ်ပေးသည်။
အလိုအလျောက်ဖြည့်သွင်းခြင်းသည် ဘရောင်ဇာအား တန်ဖိုးကို ခန့်မှန်းနိုင်စေပါသည်။ အသုံးပြုသူတစ်ဦးသည် အကွက်တစ်ခုတွင် စတင်ရိုက်သည့်အခါ၊ အစောပိုင်းရိုက်ထည့်ထားသော တန်ဖိုးများအပေါ် အခြေခံ၍ ကွက်လပ်တွင်ဖြည့်ရန် ရွေးချယ်စရာများကို ဘရောက်ဆာက ပြသသင့်သည်။
ရည်ညွှန်းချက်သည် အောက်ပါ အမျိုးအစားများ နှင့် autocompleteအလုပ်လုပ်သည် - စာသား၊ ရှာဖွေမှု၊ url၊ ဖုန်း၊ အီးမေးလ်၊ စကားဝှက်၊ ရက်စွဲရွေးချယ်သူများ၊ အပိုင်းအခြားနှင့် အရောင်။<form><input>
ဥပမာ
ထည့်သွင်းမှုအကွက်တစ်ခုအတွက် အလိုအလျောက်ဖြည့်သွင်းခြင်းနှင့် ပိတ်ခြင်းတို့ပါရှိသော HTML ဖောင်တစ်ခု။
<form action="/action_page.php" autocomplete="on">
<label for="fname">First
name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname"
name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="off"><br><br>
<input type="submit" value="Submit">
</form>
အကြံပြုချက်- အချို့သောဘရောက်ဆာများတွင် ၎င်းကိုလုပ်ဆောင်ရန်အတွက် အလိုအလျောက်ဖြည့်စွက်လုပ်ဆောင်ချက်ကို စတင်လုပ်ဆောင်ရန် လိုအပ်နိုင်သည် (ဘရောက်ဆာ၏မီနူးရှိ "နှစ်သက်ဖွယ်ရာများ" အောက်တွင်ကြည့်ပါ)။
HTML လေ့ကျင့်ခန်းများ
HTML Form နှင့် Input Elements များ
| Tag | Description |
|---|---|
| <form> | Defines an HTML form for user input |
| <input> | Defines an input control |
ရရှိနိုင်သော HTML တဂ်များအားလုံး၏စာရင်းအပြည့်အစုံအတွက်၊ ကျွန်ုပ်တို့၏ HTML Tag အကိုးအကားကို ဝင်ရောက်ကြည့်ရှု ပါ။