首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >HTML5新增的from表单input属性

HTML5新增的from表单input属性

作者头像
德顺
发布2019-11-13 14:50:01
发布2019-11-13 14:50:01
2K00
举报
文章被收录于专栏:前端资源前端资源
运行总次数:0

HTML4原有标签属性:

代码语言:javascript
代码运行次数:0
运行
复制
<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以下的不支持);

示例:

代码语言:javascript
代码运行次数:0
运行
复制
<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 定义年月日时分;

示例:

代码语言:javascript
代码运行次数:0
运行
复制
<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 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档