HTML 5 input标签的输入类型type的属性值汇总

最近项目里面用的input标签比较多，所以在此列出input标签里面的输入类型。

image.png

---

文本类型：text

最基本的输入类型，这里不作阐述

---

按钮类型：button

<input type="button"  name="advancedLevel" value="我是按钮" />

image.png

---

复选框类型：checkbox

 <input type="checkbox" name="vehicle" value="Bike" />我有一辆自行车<br />
 <input type="checkbox" checked name="vehicle" value="Car" />我有一辆汽车<br />

image.png

---

单选框类型：radio

  <input type="radio" name="sex" value="male" />男性<br />
  <input type="radio" name="sex" checked value="female" />女性<br />

image.png

---

颜色类型：color

<input type="color"  name="advancedLevel" value="advancedLevelValue" />

image.png

---

日期和时间选择器类型：date

<input type="date"  name="advancedLevel" value="advancedLevelValue" />

image.png

---

文件类型：file

 <input type="file" name="img" />

image.png image.png

hidden类型：hidden。隐藏hidden所在的input

image.png
image.png

---

密码类型：password。密码字段中的字符会被遮蔽（显示为星号或实心圆）

 Password: <input type="password" name="pwd" value="" maxlength="8" /><br />

image.png

---

重置类型：reset。会把所有表单字段重置为初始值

image.png

<form action="xxxx" method="get">
  Email: <input type="text" name="email" /><br />
  Pin: <input type="text" name="pin" maxlength="4" /><br />
  <input type="reset" value="重置" />
</form>

---

提交类型：submit。会把form里面的input的内容传递到action所指向的页面

<form action="xxx" method="get">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="提交" />
</form>

image.png

---

数字类型：number。

数字: <input type="number" name="points" min="1" max="10" />

image.png
image.png

---

PS:当然还有其他输入类型，这里只列出了我平时用的最多的。可以进入这个链接测试下