HTML5新增的from表单input属性

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="请输入用户名"><br>
    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"><br>
<input type="number" min="0" max="60" step="12"><br>
<input type="email"><br>
<input type="url"><br>
<input id="range" type="range" min="0" max="10" step="1" value="5"><br>
<input type="tel" pattern="^[1][3,4,5,7,8][0-9]{9}$"><br>
<input type="color" id="color"><br>
<input type="image" src="xiaoma.jpg"><br>
<input type="month"><br>
<input type="week"><br>
<input type="time"><br>
<input type="datetime-local"><br>

查看效果