HTML5新增的from表单input属性
HTML5新增的from表单input属性
德顺
发布于 2019-11-13 14:50:01
发布于 2019-11-13 14:50:01
代码可运行
运行总次数：0
代码可运行
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">(adsbygoogle = window.adsbygoogle || []).push({});
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2017-04-18)，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
