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

执行结果:

相关推荐
浮游本尊4 分钟前
React 18.x 学习计划 - 第五天:React状态管理
前端·学习·react.js
-睡到自然醒~9 分钟前
[go 面试] 前端请求到后端API的中间件流程解析
前端·中间件·面试
洛卡卡了17 分钟前
Sentry 都不想接,这锅还让我背?这xx工作我不要了!
前端·架构
咖啡の猫21 分钟前
Vue 实例生命周期
前端·vue.js·okhttp
JNU freshman35 分钟前
vue 之 import 的语法
前端·javascript·vue.js
剑亦未配妥36 分钟前
Vue 2 响应式系统常见问题与解决方案(包含_demo以下划线开头命名的变量导致响应式丢失问题)
前端·javascript·vue.js
凉柚ˇ39 分钟前
Vue图片压缩方案
前端·javascript·vue.js
慧一居士39 分钟前
vue 中 directive 作用,使用场景和使用示例
前端
慧一居士41 分钟前
vue 中 file-saver 功能介绍,使用场景,使用示例
前端
文心快码BaiduComate1 小时前
文心快码3.5S实测插件开发,Architect模式令人惊艳
前端·后端·架构