html5表单的required属性使用


Posted in HTML / CSS onJuly 07, 2021

描述

今天无意之中发现form有自带非空判断功能,查了资料发现,required 属性是 HTML5 中的新属性

定义和用法

required 属性是一个布尔属性
required 属性规定必需在提交之前填写输入字段。
如果使用该属性,则字段是必填(或必选)的。
注释:required 属性适用于以下 类型:text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。
 

语法使用

<input required="required">
<form method="post" action="">
       用户名<input type="text" id="username" required="required"><br>
       密码<input type="password" id="password" required><br>
       <input type="submit" value="登录" >
   </form>

注意:
1:required和required="required"效果是一样的,只不过前者是简写
2:必须要用form标签把代码包裹起来才有效
3:点击的按钮必须要是submit类型,类型为button无效

效果

就是一个简单的提示要输入改文本框

html5表单的required属性使用

如何自定义提示文字

用户名<input type="text" id="username" required oninvalid="setCustomValidity('请输入您的姓名');" oninput="setCustomValidity('');">

如何让required失效

1:把按钮类型变成button而不是submit
2:提交按钮添加formnovalidate属性

<form method="post" action="">
		   用户名<input type="text" id="username" required="required"><br>
		   密码<input type="password" id="password" required><br>
		   <input type="submit" value="登录" formnovalidate >
	   </form>

3:在元素中添加novalidate属性,禁用整个表单的验证功能

<form method="post" action="" novalidate>
		   用户名<input type="text" id="username" required="required"><br>
		   密码<input type="password" id="password" required><br>
		   <input type="submit" value="登录" >
	   </form>

4,pattern属性 - 使用正则表达式验证
(1)不必使用^和$字符表示要匹配字段值得开头和结尾。
(2)只设置pattern的话,空值也会通过。如果不允许空,则还要加上required属性。

到此这篇关于html5表单的required属性使用的文章就介绍到这了,更多相关html5表单required属性内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
Nov 21 HTML / CSS
css3给背景图片加颜色遮罩的方法
Nov 05 HTML / CSS
CSS实现半透明边框与多重边框的场景分析
Nov 13 HTML / CSS
Css3实现无缝滚动防抖
Sep 14 HTML / CSS
利用简洁的图片预加载组件提升html5移动页面的用户体验
Mar 11 HTML / CSS
HTML5 canvas实现雪花飘落特效
Mar 08 HTML / CSS
详解使用HTML5的classList属性操作CSS类
Oct 13 HTML / CSS
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
Jan 09 HTML / CSS
HTML5新增加标签和功能概述
Sep 05 HTML / CSS
HTML5 WebSocket实现点对点聊天的示例代码
Jan 31 HTML / CSS
html原生table实现合并单元格以及合并表头的示例代码
May 07 HTML / CSS
CSS实现鼠标悬浮动画特效
May 07 HTML / CSS
html输入两个数实现加减乘除功能
Jul 01 #HTML / CSS
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
关于CSS浮动与取消浮动的问题
html5调用摄像头实例代码
Jun 28 #HTML / CSS
CSS 伪元素::marker详解
深入理解margin塌陷和margin合并的解决方案
CSS实现章节添加自增序号的方法
You might like
模仿OSO的论坛(二)
2006/10/09 PHP
PHP编码规范的深入探讨
2013/06/06 PHP
php对图像的各种处理函数代码小结
2013/07/08 PHP
phpmailer简单发送邮件的方法(附phpmailer源码下载)
2016/06/13 PHP
jQuery 阴影插件代码分享
2012/01/09 Javascript
javascript获取作用在元素上面的样式属性代码
2012/09/20 Javascript
jQuery中siblings()方法用法实例
2015/01/08 Javascript
jquery-tips悬浮提示插件分享
2015/07/31 Javascript
jquery点击缩略图切换视频播放特效代码分享
2015/09/15 Javascript
详解前端自动化工具gulp自动添加版本号
2016/12/20 Javascript
基于jquery实现五星好评
2017/11/18 jQuery
js中getter和setter用法实例分析
2018/08/14 Javascript
vue+Element-ui实现分页效果实例代码详解
2018/12/10 Javascript
使用vuex解决刷新页面state数据消失的问题记录
2019/05/08 Javascript
webpack的tree shaking的实现方法
2019/09/18 Javascript
vue组件是如何解析及渲染的?
2021/01/13 Vue.js
js实现简单商品筛选功能
2021/02/02 Javascript
python操作日期和时间的方法
2014/03/11 Python
实现python版本的按任意键继续/退出
2016/09/26 Python
详解python Todo清单实战
2018/11/01 Python
Django 创建新App及其常用命令的实现方法
2019/08/04 Python
使用TensorFlow搭建一个全连接神经网络教程
2020/02/06 Python
pandas数据拼接的实现示例
2020/04/16 Python
python--shutil移动文件到另一个路径的操作
2020/07/13 Python
Python爬虫制作翻译程序的示例代码
2021/02/22 Python
英国天然抗衰老护肤品品牌:Nakin Skin Care
2019/04/16 全球购物
护理学毕业生自荐信
2013/10/02 职场文书
临床医师专业个人自我评价范文
2013/11/07 职场文书
生产部主管岗位职责
2014/01/06 职场文书
法律专业求职信
2014/05/24 职场文书
保研推荐信格式
2015/03/25 职场文书
2016最新离婚协议书范本及程序
2016/03/18 职场文书
JavaScript 去重和重复次数统计
2021/03/31 Javascript
Python 恐龙跑跑小游戏实现流程
2022/02/15 Python
未发现nvidia显卡怎么办?Win11系统中未检测到nvidia显卡解决教程
2022/04/08 数码科技
mysql如何查询连续记录
2022/05/11 MySQL