HTML5新增的from表单input属性

HTML4原有标签属性：

<input type="text">    <!--文本框-->
<input type="password">    <!--密码框-->
<input type="checkbox">    <!--复选按钮-->
<input type="radio">    <!--单选按钮-->
<input type="submit">    <!--提交按钮-->
<input type="button">    <!--按钮-->
<input type="reset">    <!--复位按钮-->
<input type="file">    <!--文件上传-->

HTML5新增标签属性：

required：1->输入框不能为空; 2->浏览器需要对当前输入框做验证;
autofocus：输入框自动聚焦;
placeholder：占位符，提示用户输入（IE9以下的不支持）;

示例：

<form action="#">
    <input type="text" required autofocus name="username" placeholder="请输入用户名">
    required浏览器自动判断;autofocus自动聚焦<br>
    <input type="tel" pattern="^[1][3,4,5,7,8][0-9]{9}$" require><br>
    <input type="submit">
</form>

search 搜索框：用户输入时右边有清空按钮;

number 定义用户输入数字：min起始数值,max最大数值,step点击一次增加的数值;

email 定义用户输入邮箱;

url 定义用户输入网址：用户的软键盘会自动出现.www .com 等网址相关输入（手机专属）;

range 滑动条：min最小数值,max最大数值,step一次增加的数值;

tel 定义用户输入手机号：pattern属性：正则 -> 允许开发者直接在输入框定义正则，验证用户输入是否匹配;
color 定义颜色;

image 图片按钮：src：定义图片路径;

month 定义月份;

week 定义周;

time 定义时分;

datetime-local 定义年月日时分;

示例：

<input type="search">
<input type="number" min="0" max="60" step="12">
<input type="email">
<input type="url">
<input id="range" type="range" min="0" max="10" step="1" value="5">
<input type="tel" pattern="^[1][3,4,5,7,8][0-9]{9}$">
<input type="color" id="color">
<input type="image" src="xiaoma.jpg">
<input type="month">
<input type="week">
<input type="time">
<input type="datetime-local">

未经允许不得转载：Web前端开发资源网 » HTML5新增的from表单input属性

推荐阅读：

阿里巴巴矢量图标库 iconfont 的使用方法

联通沃云服务器拒绝连接请求如何开放端口

HTML img src图片路径不存在，则显示一张默认图片的方法

【笔记】微信小程序注册、发布流程及首页自动跳转

设置 letter-spacing 后文字不能居中的解决方法