HTML 输入类型
- အရှေ့ပိုင်း စာပေါင်း HTML ပါဝင်သည် စာရင်း အက္ခရာ
- နောက်ပိုင်း စာပေါင်း HTML ပါဝင်သည် အလက္ခဏာ
本章描述 元素的输入类型。
输入类型：text
定义供文本输入的单行输入字段：
အကျိုးသက်
<form> အမည်:<br> <br> နောက်အမည်:<br> </form>
以上 HTML 代码在浏览器中看上去是这样的：
输入类型：password
အသုံးပြု密码字段：
အကျိုးသက်
<form> User name:
<br> User password:
</form>
以上 HTML 代码在浏览器中看上去是这样的：
注释：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 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 代码在浏览器中看上去是这样的：
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 代码在浏览器中看上去是这样的：
Input Type: button
<input type="button"> အသုံးပြုဘေ့စ်。
အကျိုးသက်
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
以上 HTML 代码在浏览器中看上去是这样的：
HTML5 输入类型
HTML5 增加了多个新的输入类型：
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
注释：老式 web 浏览器不支持的输入类型，会被视为输入类型 text。
输入类型：number
用于应该包含数字值的输入字段。
您能够对数字做出限制。
根据浏览器支持，限制可应用到输入字段。
အကျိုးသက်
<form> Quantity (between 1 and 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>
အမှုထမ်း အမျိုးအစား: date
<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 ပြီးနောက် ရက်စွဲကို ရယူပါ: Enter a date after 2000-01-01:<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> ရက်စွဲ (ရက် နှင့် စံတော်ချိန်): </form>
输入类型：email
用于应该包含电子邮件地址的输入字段。
根据浏览器支持，能够在被提交时自动对电子邮件地址进行验证。
某些智能手机会识别 email 类型，并在键盘增加 ".com" 以匹配电子邮件输入。
အကျိုးသက်
<form> အီးမေးပါ <input type="email" name="email"> </form>
အက်တမ်း အမျိုးအစား: search
<input type="search"> ရှာဖွေ အက်တမ်း ပါဝင်သည် ကို ပါဝင်သော အက်တမ်း ပုံစံ (ရှာဖွေ အက်တမ်း ပုံစံ ကို သုံးနိုင်ပါ)
အကျိုးသက်
<form> Google ကို ရှာဖွေပါ <input type="search" name="googlesearch"> </form>
အက်တမ်း အမျိုးအစား: tel
<input type="tel"> ဖုံးကြီး အမှတ် ပါဝင်သည် ကို ပါဝင်သော အက်တမ်း ပုံစံ
အချို့ ဘရောက်လာသူ ထောက်ခံမှု မှာ ဖုံးကြီး အမျိုးအစား ကို ထောက်ခံသည်
အကျိုးသက်
<form> ဖုံးကြီး <input type="tel" name="usrtel"> </form>
အက်တမ်း အမျိုးအစား: url
<input type="url"> URL အမှတ် ပါဝင်သည် ကို ပါဝင်သော အက်တမ်း ပုံစံ
ဘရောက်လာသူ ထောက်ခံမှု အရ ပြောင်းလဲမှု ဖြစ်ပေါ်လာ ကြောင်း မှာ ကျပ်နှံး အမှတ် အကြောင်းအရာ ကို အတိုင်း သုံးနိုင်ပါ
အချို့ ဖုံးကြီး ဖုံးကြီး က အားကစား အမှတ် အမျိုးအစား ကို သတိပြု ပြီး ကျပ်နှံး ကျပ်နှံး အက်တမ်း ကို ကိုယ်တိုင် ပေါင်းစပ်ပါ
အကျိုးသက်
<form> သင်၏ အမြဲချက် ဝိုင်းပါ <input type="url" name="homepage"> </form>
- အရှေ့ပိုင်း စာပေါင်း HTML ပါဝင်သည် စာရင်း အက္ခရာ
- နောက်ပိုင်း စာပေါင်း HTML ပါဝင်သည် အလက္ခဏာ
