HTML5新增的input元素属性:placeholder、required、autofocus、min、max等

HTML5 大幅度地增加与改良了 input 元素的属性,可以简单地使用这些属性来实现 HTML5 之前需要使用 JavaScript 才能实现的许多功能。

下面将详细介绍这些新增的 input 元素的属性。

属性 说明 属性 说明
placeholder 在输入框显示描述性或提示性文本 list 为文本框添加选择列表
required 表示此项为必填项 min range输入框的最低值
autofocus 设置自动获取焦点 max range输入框的最高值
autocomplete 是否保存输入值以备将来使用 step 输入型控件递增/减的梯度

HTML5新增的input元素类型和属性

《HTML5新增的input元素类型:number、range、email、color、date等》

《HTML5新增的input元素属性:placeholder、required、autofocus、min、max等》

1、placeholder 属性

当用户没有输入值时,输入型控件可以通过 placeholder 属性向用户显示描述说明或者提示信息。使用 placeholder 属性只需要将说明性文字作为该属性的值即可。除了普通的文本输入框,email、number、url 等其他类型的输入框也都支持 placeholder 属性。

属性用法如下:

html 复制代码
<form>
    账号:<input type="text" placeholder="请输入账号"/></br>
    密码:<input type="text" placeholder="请输入密码"/></br>
    <input type="submit" value="提交"/>
</form>

执行结果:

2、required 属性

一旦为某个输入型控件设置了 required 属性,就必须填写此项,否则无法提交表单。

属性用法如下:

html 复制代码
<form>
    电子邮箱:<input type="email" required /></br>
    <input type="submit" value="提交"/>
</form>

执行结果:

3、autofocus 属性

给文本框、选择框或按钮控件加上 autofocus 属性,当页面打开时,该控件将会自动获得光标焦点。

属性用法如下:

html 复制代码
用户名称:<input type="type" autofocus  />

4、autocomplete 属性

浏览器通过 autocomplete 属性能够知晓是否应该保存输入值以备将来使用。autocomplete 属性应该用来保护敏感用户数据,避免本地浏览器对它们进行不安全的存储。对于 autocomplete 属性,可以指定"on"、"off"、""(不指定)这3种值。

属性用法如下:

html 复制代码
<input type="text" autocomplete="on" />

5、list 属性

该元素类似于选择框(select),但是当用户想要设置的值不在选择列表之内时,允许其自行输入,该属性本身并不显示,而是当文本框获得焦点时以提示输入的方式显示。

属性用法如下:

html 复制代码
<fieldset>
    <legend>请输入搜索关键字:</legend>
    <input type="search" list="myList"/>
    <datalist id="myList">
        <option value="HTML5">HTML5</option>
        <option value="CSS3">CSS3</option>
        <option value="JavaScript">JavaScript</option>
    </datalist>
    <input type="submit" value="搜索"/>
</fieldset>

执行结果:

6、min、max 和 step 属性

通过设置 min 和 max 属性,可以将输入控件的数值输入范围限定在最低值和最高值之间。设置其 step 属性能够制定输入值递增或递减的梯度。

属性用法如下:

html 复制代码
数值1:<input type="number"  value="25" min="10" max="100" step="5"/></br>
数值2:<input type="range"  value="45" min="0" max="100" step="5"/>

执行结果:

相关推荐
知识分享小能手1 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
魔云连洲1 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell2 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
超级无敌攻城狮3 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel4 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
gnip4 小时前
JavaScript事件流
前端·javascript
CodeCraft Studio5 小时前
国产化Word处理组件Spire.DOC教程:使用 Python 将 Markdown 转换为 HTML 的详细教程
python·html·word·markdown·国产化·spire.doc·文档格式转换
赵得C5 小时前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件
wow_DG5 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(一):响应式原理
前端·javascript·vue.js
weixin_456904275 小时前
UserManagement.vue和Profile.vue详细解释
前端·javascript·vue.js