input整理
在HTML5中,<input>元素增加了许多新的属性、控件。本文章分别对这两方面进行介绍。
<input>元素在HTML5中新增加的属性有:autocomplete 、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、max、min、minlength、pattern、placeholder、readonly、required等等。
新增加的属性描述如下:
autocomplete :是否显示与现在输入内容相匹配的历史输入记录。
1 2 3 4 | < form action="#" > < p >验证码:< input type="text" autocomplete="off" /></ p > < input type="submit" /> </ form > |
autofocus :当页面加载完成后,此元素获得焦点
1 2 | < p >姓名:< input type="text" placeholder="请输入真实姓名" /></ p > < p >地址:< input type="text" autofocus /></ p > |
placeholder :设置文本控件的预先显示内容
1 | 姓名:< input type="text" placeholder="请输入真实姓名" /> |
required :设置控件是否为必填项
1 2 3 4 | < form action="#" > < p >用户名:< input type="text" name="loginName" required /></ p > < input type="submit" /> </ form > |
<input>元素的type属性的值,决定了<input>元素显示什么控件。
HTML5中,给<input>增加了许多新的控件,如color、date、email、month、number、range、search、tel、time、url、week等等。
若浏览器不支持新的控件,将默认以文本框展示(type="text")。
<input>元素type属性的值:
type="color" :颜色控件
1 | < input type="color" /> |
type="date" :日期控件
1 | < input type="date" value="2016-04-29" /> |
type="email" :电子邮件地址输入框
1 | < input type="email" multiple /> |
type="month" :年月控件
1 | < input type="month" value="2016-04" /> |
type="number" :数值输入框
1 | < input type="number" value="11.5" /> |
type="range" :滑动条
1 | < input type="range" max="100" min="0" value="80" /> |
type="search" :搜索框
1 | < input type="search" /> |
type="tel" :电话号码输入框
1 | < input type="tel" /> |
type="time" :时间控件
1 | < input type="time" value="12:30" /> |
type="url" :网址输入框
1 | < input type="url" /> |
type="week" :周数控件
1 | < input type="week" value="2016-W01"/> |
type="output" 定义一个计算结果
1 2 3 4 5 | < form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0 < input type="range" id="a" value="50">100 +< input type="number" id="b" value="50"> =< output name="x" for="a b"></ output > </ form > |
type="reset" 定义重置按钮。重置按钮会清除表单中的所有数据
1 2 3 4 5 | < form action="#" method="get"> < input > < input type="reset" value="Reset" /> < input type="submit" value="Submit" /> </ form > |
type="datalist" 指定一个预先定义输入控件选项列表
1 2 3 4 5 6 7 8 9 | < input list="browsers"> < datalist id="browsers"> < option value="Internet Explorer"> < option value="Firefox"> < option value="Chrome"> < option value="Opera"> < option value="Safari"> </ datalist > |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步