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"/>

执行结果:

相关推荐
excel5 小时前
ES6 中函数的双重调用方式:fn() 与 fn\...``
前端
可乐爱宅着6 小时前
全栈框架next.js入手指南
前端·next.js
你的人类朋友7 小时前
什么是API签名?
前端·后端·安全
会豪9 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子9 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶9 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子9 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_10 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
小徐_233310 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
RoyLin10 小时前
TypeScript设计模式:适配器模式
前端·后端·node.js