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 相关文章推荐
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
Mar 09 HTML / CSS
CSS3 3D立方体效果示例-transform也不过如此
Dec 05 HTML / CSS
纯CSS实现预加载动画效果
Sep 06 HTML / CSS
详解css3 mask遮罩实现一些特效
Oct 24 HTML / CSS
纯CSS绘制漂亮的圆形图案效果
May 07 HTML / CSS
CSS3的first-child选择器实战攻略
Apr 28 HTML / CSS
CSS3实现自定义Checkbox特效实例代码
Apr 24 HTML / CSS
CSS3田字格列表的样式编写方法
Nov 22 HTML / CSS
HTML5 语音搜索(淘宝店语音搜素)
Jan 03 HTML / CSS
html5 Canvas画图教程(1)—画图的基本常识
Jan 09 HTML / CSS
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
Oct 26 HTML / CSS
使用canvas对多图片拼合并导出图片的方法
Aug 28 HTML / CSS
html输入两个数实现加减乘除功能
Jul 01 #HTML / CSS
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
关于CSS浮动与取消浮动的问题
html5调用摄像头实例代码
Jun 28 #HTML / CSS
CSS 伪元素::marker详解
深入理解margin塌陷和margin合并的解决方案
CSS实现章节添加自增序号的方法
You might like
转生史莱姆:萌王第一次撸串开心到飞起,哥布塔撸串却神似界王神
2018/11/30 日漫
php学习笔记 类的声明与对象实例化
2011/06/13 PHP
php ci框架中加载css和js文件失败的原因及解决方法
2014/07/29 PHP
PHP函数eval()介绍和使用示例
2014/08/20 PHP
php调用KyotoTycoon简单实例
2015/04/02 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
thinkPHP3.2.2框架行为扩展及demo示例
2018/06/19 PHP
ExtJS TabPanel beforeremove beforeclose使用说明
2010/03/31 Javascript
Javascript实现的鼠标经过时播放声音
2010/05/18 Javascript
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
2013/04/21 Javascript
JavaScript中的toDateString()方法使用详解
2015/06/12 Javascript
js实现的后台左侧管理菜单代码
2015/09/11 Javascript
简单实现轮播图效果的实例
2016/07/15 Javascript
input file上传 图片预览功能实例代码
2016/10/25 Javascript
jQuery 常见小例汇总
2016/12/14 Javascript
jQuery模拟爆炸倒计时功能实例代码
2017/08/21 jQuery
微信小程序传值以及获取值方法的详解
2019/04/29 Javascript
Javascript 对象(object)合并操作实例分析
2019/07/30 Javascript
使用uni-app开发微信小程序的实现
2019/12/13 Javascript
Python的math模块中的常用数学函数整理
2016/02/04 Python
python编写简单爬虫资料汇总
2016/03/22 Python
python矩阵的转置和逆转实例
2018/12/12 Python
HTML5标签嵌套规则详解【必看】
2016/04/26 HTML / CSS
英国儿童图书网站:Scholastic
2017/03/26 全球购物
现代家居用品及礼品:LBC Modern
2018/06/24 全球购物
巴西香水和化妆品购物网站:The Beauty Box
2019/09/03 全球购物
FragranceNet中文网:北美健康美容线上零售商
2020/08/26 全球购物
丝芙兰墨西哥官网:Sephora墨西哥
2020/05/30 全球购物
区三好学生主要事迹
2014/01/30 职场文书
评析教师个人的自我评价
2014/02/19 职场文书
个人借款担保书
2014/04/02 职场文书
三年级班级文化建设方案
2014/05/04 职场文书
政风行风自查自纠报告
2014/10/21 职场文书
故意杀人案辩护词
2015/05/21 职场文书
2016新年致辞
2015/08/01 职场文书
浅谈golang package中init方法的多处定义及运行顺序问题
2021/05/06 Golang