HTML5的表单所有type类型

button:定义可点击的按钮(通常与 JavaScript 一起使用来启动脚本)。<br>
<input type="button" name="" id="" value="按钮"><br>
<br>

checkbox:定义复选框。<br> <input type="checkbox" name="" id=""><br> <input type="checkbox" name="" id="" checked><br> <br>

color:定义拾色器。<br> <input type="color" name="" id=""><br> <br>

color:定义 date 控件(包括年、月、日,不包括时间)。<br> <input type="date" name="" id=""><br> <br>

datetime:定义 date 和 time 控件(包括年、月、日、时、分、秒、几分之一秒,基于 UTC 时区)。<br> <form action="">生日 (日期和时间):<input type="datetime" name="" id=""> <input type="submit" name="" id="" value="提交"></form><br> <br>

datetime-local:定义 date 和 time 控件(包括年、月、日、时、分、秒、几分之一秒,不带时区)。<br> <input type="datetime-local" name="" id=""><br> <br>

month:定义 month 和 year 控件(不带时区)。<br> <input type="month" name="" id=""><br> <br>

week:定义 week 和 year 控件(不带时区)。<br> <input type="week" name="" id=""><br> <br> time:定义用于输入时间的控件(不带时区)。<br> <input type="time" name="" id=""><br> <br>
email:定义用于 e-mail 地址的字段。<br> <form action=""></form>E-mail:<input type="email" name="" id=""></form><br> <br>

file:定义文件选择字段和 "浏览..." 按钮,供文件上传。<br> <input type="file" name="" id=""><br> <br>

hidden:定义隐藏输入字段。<br> <input type="hidden" name="" id=""><br> <br>

image:定义图像作为提交按钮。<br> <input type="image" name="" id=""><br> <br>

number:定义用于输入数字的字段。<br> <input type="number" name="" id=""><br> <br>

password:定义密码字段(字段中的字符会被遮蔽)。<br> <input type="password" name="" id=""><br> <br> radio:定义单选按钮。<br> <input type="radio" name="" id=""><br> <input type="radio" name="" id="" checked><br> <br>

range:定义用于精确值不重要的输入数字的控件(比如 slider 控件)。<br> <input type="range" name="" id=""><br> <br>

reset:定义重置按钮(重置所有的表单值为默认值)。<br> <input type="reset" name="" id=""><br> <br>

search:定义用于输入搜索字符串的文本字段。<br> <input type="search" name="" id=""><br> <br>

submit:定义提交按钮。<br> <input type="submit" name="" id="" value="提交"><br> <br>

tel:定义用于输入电话号码的字段。<br> 输入电话:<input type="tel" name="" id=""><br> <br>

text:默认。定义一个单行的文本字段(默认宽度为 20 个字符)。<br> <input type="text" name="" id=""><br> <br>

url:定义用于输入 URL 的字段。<br> 添加你的主页网址:<input type="url" name="" id="">

 

显示效果:

 

posted @ 2016-08-08 14:04  H5·can  阅读(16739)  评论(0编辑  收藏  举报