博主信息
R࿆ebirth༢局外人
博文
12
粉丝
0
评论
0
访问量
2130
积分:0
P豆:24

html5表单的required属性使用

2021年10月10日 11:39:32阅读数:54博客 / R࿆ebirth༢局外人

描述

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

定义和用法

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

语法使用

1

   

<input required="required">

   

1

2

3

4

5

   

<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无效

效果

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

如何自定义提示文字

1

   

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

   

如何让required失效

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

1

2

3

4

5

   

<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属性,禁用整个表单的验证功能

1

2

3

4

5

   

<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属性。


版权申明:本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
  • html5教程:本文为大家介绍了html5中新增控件和,具有一定参考作,希望能够帮助到大家。
    html中合并两个元格应该使是“colspan”,“colspan”定义元格应该横跨列数,其语法是“<td colspan="number">”。
    在html中,可以使required来设置必填项,需要在input元素标签中添加“required="required"”样式即可。
    HTML与HTML5区别有:1、HTML5支持SVG,而在HTML中只有将它与Flash等不同技术结合在一起才能使矢量图形;2、HTML5使Web SQL库,而HTML中只有浏览器缓存才可于此目
    html5设置文字颜色灰色方法:使【text-shadow】向文本设置阴影,语法为【object.style.textShadow=“2px 2px #ff0000”】。
    在html中,可以使cellspacing即可去除边框间隙,只需要给格元素设置“cellspacing="0px"”样式即可。
    HTML5中添加了data-*方式来自定义,所谓data-*实际上上就是data-前缀加上自定义名,使这样结构可以进行数据存放。使data-*可以解决自定义混乱无管理现状。
    在javascript中,可以使style设置字体效果,语法格式“对象.style.=值”。Style对象代一个样式声明。可从应样式文档或元素访问Style对象。
    有forhtml元素:1、label元素;for与label元素一起使时,for指定标签绑定到哪个元素。
    css达式就是在css使expression()连接一段JavaScript达式,css值是JavaScript达式结果;语法格式“css:expression(JavaScript

    2021-04-29

    优化方法:1、简化注释;2、简化颜色代码;3、使代替多行,即使简写;4、当值为0时省略位;5、同时设定多个元素;6、删除空白和换行;7、设定过期时间,使GZip。
    在html中,可以使border-spacing来设置格间距,该设置相邻元格边框间距离(仅于“边框分离”模式),语法格式“border-spacing:水平间距 垂直间距;”。
    我们以前一直在使placeholders,但以前必须要JavaScript实现而HTML5里给JavaScript标记提供async使JavaScript能异步加载执行,本文将详细介绍该功能
    HTML中设置元格颜色方法:1、给td标签设置bgcolor,语法<td bgcolor="颜色值">;2、使background-color,语法“&
    HTML5中,class可以定义元素类名,常于指向样式类(class选择器),也可于JavaScript中, 将修改HTML元素类名,修改样式;语法格式“<element class
    PHP中$_POST被广泛应于收集数据,在HTML form标签指定该:"method="post"。
    html格隐藏行方法:1、在tr(行)标签中,使style添加“display:none”样式;2、在tr(行)标签中,使style添加“visibility:hidden”
    在css中,可以使border-collapse来去掉格中重复边框,该可以设置格边框是折叠为一边框还是分开,只需要将值设置为collapse即可把重叠边框合并在一起,成为一个边框,
    css设置字体大小名是“font-size”,该使css中示尺寸位(px、em、rem等)设置字体大小,也可以使百分号等位来设置。
    在css中可以通过“word-spacing”来设置间距,其使语法如“p{word-spacing:30px;}”,该可以使词间距变小,也可以变大。