HTML <input> Attribute လို့ ရိုက် ထည့်ပါ။
ဥပမာ
ထည့်သွင်းမှုနယ်ပယ်နှစ်ခုပါရှိသော HTML ဖောင်တစ်ခု၊ စာသားအကွက်တစ်ခုနှင့် ပေးပို့ရန်ခလုတ်တစ်ခု-
<form action="/action_page.php">
<label for="username">Username: </label>
<input type="text"
id="username" name="username"><br>
<input type="submit" value="Submit">
</form>
အောက်တွင် နောက်ထပ် "စမ်းသုံးကြည့်ပါ" ဥပမာများ။
အဓိပ္ပါယ်နှင့် အသုံးပြုမှု
ရည်ညွှန်းချက် သည် ပြသမည့် ဒြပ်စင် အမျိုးအစား ကို typeသတ်မှတ်သည် ။
<input>
ရည်ညွှန်းချက် မသတ်မှတ်ထားပါ က type၊ ပုံသေအမျိုးအစားမှာ "စာသား" ဖြစ်သည်။
Browser ပံ့ပိုးမှု
| Attribute | |||||
|---|---|---|---|---|---|
| type | Yes | Yes | Yes | Yes | Yes |
အထားအသို
<input type="value">
ရည်ညွှန်းတန်ဖိုးများ
| Value | Description |
|---|---|
| button | Defines a clickable button (mostly used with a JavaScript to activate a script) |
| checkbox | Defines a checkbox |
| color | Defines a color picker |
| date | Defines a date control (year, month, day (no time)) |
| datetime-local | Defines a date and time control (year, month, day, time (no timezone) |
| Defines a field for an e-mail address | |
| file | Defines a file-select field and a "Browse" button (for file uploads) |
| hidden | Defines a hidden input field |
| image | Defines an image as the submit button |
| month | Defines a month and year control (no timezone) |
| number | Defines a field for entering a number |
| password | Defines a password field |
| radio | Defines a radio button |
| range | Defines a range control (like a slider control) |
| reset | Defines a reset button |
| search | Defines a text field for entering a search string |
| submit | Defines a submit button |
| tel | Defines a field for entering a telephone number |
| text | Default. Defines a single-line text field |
| time | Defines a control for entering a time (no timezone) |
| url | Defines a field for entering a URL |
| week | Defines a week and year control (no timezone) |
နောက်ထပ် ဥပမာများ
ထည့်သွင်းမှုအမျိုးအစား- ခလုတ်
နှိပ်သည့်အခါ JavaScript ကို အသက်ဝင်စေမည့် ခလုတ်တစ်ခု-
<input type="button" value="Click me" onclick="msg()">
ထည့်သွင်းမှုအမျိုးအစား- အမှတ်ခြစ်ပါ။
Checkboxes များသည် အသုံးပြုသူအား ကန့်သတ်ထားသော ရွေးချယ်မှုအရေအတွက်၏ တစ်ခု သို့မဟုတ် တစ်ခုထက်ပိုသော ရွေးချယ်မှုများကို ရွေးချယ်ခွင့်ပေးသည်-
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox"
id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label><br>
ထည့်သွင်းမှုအမျိုးအစား- အရောင်
အရောင်ရွေးချယ်မှုတစ်ခုမှ အရောင်တစ်ခုကို ရွေးပါ-
<label for="favcolor">Select your favorite color:</label>
<input type="color"
id="favcolor" name="favcolor">
ထည့်သွင်းမှုအမျိုးအစား- ရက်စွဲ
ရက်စွဲထိန်းချုပ်မှုကို သတ်မှတ်ပါ-
<label for="birthday">Birthday:</label>
<input type="date"
id="birthday" name="birthday">
ထည့်သွင်းမှုအမျိုးအစား- ရက်စွဲအချိန်-စက်တွင်း
ရက်စွဲနှင့် အချိန်ထိန်းချုပ်မှု သတ်မှတ်ပါ (အချိန်ဇုန်မရှိပါ)။
<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local"
id="birthdaytime" name="birthdaytime">
ထည့်သွင်းမှုအမျိုးအစား- အီးမေးလ်
အီးမေးလိပ်စာတစ်ခုအတွက် အကွက်တစ်ခု သတ်မှတ်ပါ (တင်သွင်းသည့်အခါ အလိုအလျောက် အတည်ပြုပေးမည်--
<label for="email">Enter your email:</label>
<input type="email"
id="email" name="email">
ထည့်သွင်းမှုအမျိုးအစား- ဖိုင်
ဖိုင်ရွေးချယ်သည့်အကွက်နှင့် "Browse..." ခလုတ်ကို သတ်မှတ်ပါ (ဖိုင်အပ်လုဒ်များအတွက်)-
<label for="myfile">Select a file:</label>
<input type="file"
id="myfile" name="myfile">
ထည့်သွင်းမှုအမျိုးအစား- ဝှက်ထားသည်။
ဝှက်ထားသောအကွက်ကို သတ်မှတ်ပါ (အသုံးပြုသူတစ်ဦးမှ မမြင်နိုင်)။
ဝှက်ထားသောအကွက်သည် ဖောင်တင်သည့်အခါ အပ်ဒိတ်လုပ်ရန် လိုအပ်သည့် ဒေတာဘေ့စ်မှတ်တမ်းကို မကြာခဏ သိမ်းဆည်းသည်-
<input type="hidden" id="custId" name="custId" value="3487">
ထည့်သွင်းမှုအမျိုးအစား- ပုံ
ပုံတစ်ပုံကို တင်သွင်းရန် ခလုတ်အဖြစ် သတ်မှတ်ပါ-
<input type="image" src="img_submit.gif" alt="Submit">
ထည့်သွင်းမှုအမျိုးအစား- လ
တစ်လနှင့် တစ်နှစ် ထိန်းချုပ်မှုကို သတ်မှတ်ပါ (အချိန်ဇုန်မရှိပါ)။
<label for="bdaymonth">Birthday (month and year):</label>
<input type="month"
id="bdaymonth" name="bdaymonth">
ထည့်သွင်းမှုအမျိုးအစား- နံပါတ်
နံပါတ်တစ်ခုထည့်သွင်းရန်အတွက် အကွက်တစ်ခုကို သတ်မှတ်ပါ (မည်သည့်နံပါတ်များကို လက်ခံသည်ကို ကန့်သတ်ချက်များလည်း သတ်မှတ်နိုင်သည်)။
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number"
id="quantity" name="quantity" min="1" max="5">
ကန့်သတ်ချက်များကို သတ်မှတ်ရန် အောက်ပါအရည်အချင်းများကို အသုံးပြုပါ။
- max - ခွင့်ပြုထားသော အများဆုံးတန်ဖိုးကို သတ်မှတ်သည်။
- min - ခွင့်ပြုထားသော အနည်းဆုံးတန်ဖိုးကို သတ်မှတ်သည်။
- အဆင့် - တရားဝင်နံပါတ် ကြားကာလကို သတ်မှတ်သည်။
- တန်ဖိုး - မူရင်းတန်ဖိုးကို သတ်မှတ်သည်။
ထည့်သွင်းမှုအမျိုးအစား- စကားဝှက်
စကားဝှက်အကွက်ကို သတ်မှတ်ပါ (စာလုံးများကို ဖုံးအုပ်ထားသည်)
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd">
ထည့်သွင်းမှုအမျိုးအစား- ရေဒီယို
ရေဒီယိုခလုတ်များသည် အသုံးပြုသူတစ်ဦးအား ကန့်သတ်အရေအတွက်ရွေးချယ်မှုတစ်ခုသာ ရွေးချယ်ခွင့်ပေးသည်-
<input type="radio" id="html" name="fav_language" value="HTML">
<label
for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language"
value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript"
name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
ထည့်သွင်းမှုအမျိုးအစား- အပိုင်းအခြား
အတိအကျတန်ဖိုးသည် အရေးမကြီးသော နံပါတ်တစ်ခုကို ထည့်ရန်အတွက် ထိန်းချုပ်မှုတစ်ခု (ဆလိုက်ဒါထိန်းချုပ်မှုကဲ့သို့) သတ်မှတ်ပါ။ ပုံသေအကွာအဝေးသည် 0 မှ 100 ဖြစ်သည်။ သို့သော်လည်း၊ min၊ max၊ နှင့် step attribute များဖြင့် လက်ခံထားသော နံပါတ်များကို ကန့်သတ်ချက်များ သတ်မှတ်နိုင်သည်။
<label for="vol">Volume (between 0 and 50):</label>
<input type="range"
id="vol" name="vol" min="0" max="50">
ကန့်သတ်ချက်များကို သတ်မှတ်ရန် အောက်ပါအရည်အချင်းများကို အသုံးပြုပါ။
- max - ခွင့်ပြုထားသော အများဆုံးတန်ဖိုးကို သတ်မှတ်သည်။
- min - ခွင့်ပြုထားသော အနည်းဆုံးတန်ဖိုးကို သတ်မှတ်သည်။
- အဆင့် - တရားဝင်နံပါတ် ကြားကာလကို သတ်မှတ်သည်။
- တန်ဖိုး - မူရင်းတန်ဖိုးကို သတ်မှတ်သည်။
ထည့်သွင်းမှုအမျိုးအစား- ပြန်လည်သတ်မှတ်ပါ။
ပြန်လည်သတ်မှတ်ရန် ခလုတ်ကို သတ်မှတ်ပါ (ပုံစံတန်ဖိုးအားလုံးကို မူရင်းတန်ဖိုးများအဖြစ် ပြန်လည်သတ်မှတ်သည်-
<input type="reset">
အကြံပြုချက်- ပြန်လည်သတ်မှတ်ခလုတ်ကို ဂရုတစိုက်အသုံးပြုပါ။ ပြန်လည်သတ်မှတ်ခြင်းခလုတ်ကို မတော်တဆဖွင့်မိသော သုံးစွဲသူများအတွက် ၎င်းသည် စိတ်အနှောင့်အယှက်ဖြစ်နိုင်ပါသည်။
ထည့်သွင်းမှုအမျိုးအစား- ရှာဖွေမှု
ရှာဖွေမှုအကွက်ကို သတ်မှတ်ပါ (ဆိုက်ရှာဖွေမှု သို့မဟုတ် Google ရှာဖွေမှုကဲ့သို့)
<label for="gsearch">Search Google:</label>
<input type="search"
id="gsearch" name="gsearch">
ထည့်သွင်းမှုအမျိုးအစား- တင်သွင်းပါ။
တင်သွင်းရန်ခလုတ်ကို သတ်မှတ်ပါ-
<input type="submit">
ထည့်သွင်းမှုအမျိုးအစား- ဖုန်း
တယ်လီဖုန်းနံပါတ်တစ်ခုထည့်ရန်အတွက် အကွက်တစ်ခုကို သတ်မှတ်ပါ-
<label for="phone">Enter your phone number:</label>
<input type="tel"
id="phone" name="phone"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
ထည့်သွင်းမှုအမျိုးအစား- စာသား
အသုံးပြုသူတစ်ဦးမှ စာသားထည့်သွင်းနိုင်သည့် တစ်ကြောင်းတည်းသော စာသားအကွက်နှစ်ခုကို သတ်မှတ်ပါ-
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label>
<input type="text"
id="lname" name="lname"><br>
ထည့်သွင်းမှုအမျိုးအစား- အချိန်
အချိန်တစ်ခုဝင်ရောက်ရန်အတွက် ထိန်းချုပ်မှုတစ်ခု သတ်မှတ်ပါ (အချိန်ဇုန်မရှိပါ)။
<label for="appt">Select a time:</label>
<input type="time"
id="appt" name="appt">
ထည့်သွင်းမှုအမျိုးအစား- url
URL တစ်ခုထည့်ရန်အတွက် အကွက်တစ်ခုကို သတ်မှတ်ပါ-
<label for="homepage">Add your homepage:</label>
<input type="url"
id="homepage" name="homepage">
အကြံပြုချက်- iPhone ရှိ Safari သည် url ထည့်သွင်းမှု အမျိုးအစားကို မှတ်မိပြီး ၎င်းနှင့် ကိုက်ညီစေရန် မျက်နှာပြင်ပေါ်ရှိ ကီးဘုတ်ကို ပြောင်းလဲခြင်း (.com ရွေးချယ်မှုကို ပေါင်းထည့်သည်)။
ထည့်သွင်းမှုအမျိုးအစား- ရက်သတ္တပတ်
တစ်ပတ်နှင့် တစ်နှစ် ထိန်းချုပ်မှုကို သတ်မှတ်ပါ (အချိန်ဇုန်မရှိပါ)။
<label for="week">Select a week:</label>
<input type="week"
id="week" name="week">
❮ HTML <input> tag