HTML5-新增表单input属性

新增表单属性

form控件主要新增的属性:

  • autocomplete 是否启用表单的自动完成功能,取值:on(默认)、off

  • novalidate 提交表单时不进行校验,默认会进行表单校验

autocomplete属性

概念:autocomplete属性规定input 控件是否启用自动完成功能

语法:

html 复制代码
<input type="text" autocomplete="属性值" />

属性值:

  • on:默认值。表示开启,浏览器会尝试自动完成输入框中的输入,以提供对以前输入过的值的可能匹配

  • off:表示关闭,禁用浏览器或网页自动填充功能

autocomplete属性适用于所有文本框型的input元素

实例:

html 复制代码
<form action="" method="post">
            <input type="text" autocomplete="on" list="tips">
            <datalist id="tips">
                <option value="数学"></option>
                <option value="语文"></option>
                <option value="英语"></option>
                <option value="化学"></option>
            </datalist>
        </form>

运行结果

novalidate属性

概念:novalidate属性就是来禁用form元素的所有文本框内置的验证功能

语法:

html 复制代码
<form novalidate>
    ...
</form>

实例:

html 复制代码
<form action="" novalidate>
<p>
        <label for="email">电子邮件:</label>
        <input type="email" name="email" id="email" />
</p>
<p>
        <label for="tel">手机号码:</label>
        <input type="tel" name="tel" id="tel"/>
</p>
        <input type="submit" value="提交" />
</form>

运行结果

新增表单input元素属性

新增表单元素属性:

  • autofocus 设置初始焦点元素
  • placeholder 提示文字

  • required 是否必填

  • autocomplete 是否启用该表单元素的自动完成功能,跟上面表单属性一样

  • pattern 使用正则表达式(RegExp后面会讲解),进行数据校验

  • list 使文本元素具有下拉列表的功能,需要配置datalis t和option标签一起使用

autofocus属性

概念:autofocus属性来实现文本框自动获取焦点

语法:

html 复制代码
<input type='text' autofocus="autofocus" />

属性值

  • autofocus:表示文本框自动获取焦点。

autofocus属性适用于所有文本框型的input元素

实例:

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

运行结果

placeholder属性

概念:placeholder属性为文本框添加提示内容

语法:

html 复制代码
<input type="text" placeholder="提示内容" />

placeholder属性适用于所有文本框型的input元素

实例:

html 复制代码
<input type="text" placeholder="请输入你的账号" />
<br/>
<input type="password" placeholder="请输入你的密码" />

运行结果

required属性

概念:required属性来定义文本框输入内容不能为空,如果文本框为空,则不允许提交

语法:

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

required属性适用于所有文本框型的input元素

实例:

html 复制代码
<input type="text" required />
<br/>
<input type="submit" value="提交">

运行结果

pattern属性

概念:pattern属性为文本框添加验证功能

语法:

html 复制代码
<input type="text" pattern="正则表达式" />

在新增表单元素那节当中介绍过,email,url,tel这3个类型的input 元素,本质上都内置了pattern属性,因此它们会自动进行相关匹配验证。可以用novalidate属性将其禁用验证机制。

实例:

html 复制代码
<input type="text" pattern="^[a-zA-Z]\w{2,9}$" />
<br/>
<input type="submit" value="提交" />

运行结果

list属性

概念:使文本具有下拉列表的功能,但需要datalist和option标签一起使用

语法:

html 复制代码
<input type="text" list="datalist中的id">
        <datalist id="list">
            <option value=""></option>
            <option value=""></option>
            <option value=""></option>
        </datalist>

实例:

html 复制代码
<input type="text" name="city" id="city" list="cityList">
        <datalist id="cityList">
            <option value="南京"></option>
            <option value="北京"></option>
            <option value="上海"></option>
            <option value="广东"></option>
        </datalist>

运行结果

相关推荐
木木黄木木8 分钟前
HTML5手写签名板项目实战教程
前端·html·html5
姑苏洛言31 分钟前
基于微信小程序实现幸运大转盘页面
前端
前端极客探险家34 分钟前
如何实现一个支持拖拽排序的组件:React 和 Vue 版
前端·vue.js·react.js·排序算法
yanyu-yaya37 分钟前
devextreme-react/scheduler 简单学习
前端·学习·react.js
limit for me42 分钟前
react使用eventBus在不同模块间进行通信
前端·react.js
__不想说话__1 小时前
面试官问我React组件和state的关系,我指了指路口的红绿灯…
前端·javascript·react.js
一个小潘桃鸭1 小时前
需求:对表格操作列中的操作进行局部刷新
前端
番茄比较犟1 小时前
Combine知识点switchToLatest
前端
北京_宏哥1 小时前
🔥《爆肝整理》保姆级系列教程-玩转Charles抓包神器教程(15)-Charles如何配置反向代理
前端·面试·charles
Process1 小时前
前端图片技术深度解析:格式选择、渲染原理与性能优化
前端·面试·性能优化