温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

html5表单中的required属性怎么使用

发布时间:2022-02-21 10:21:36 来源:亿速云 阅读:356 作者:iii 栏目:开发技术

这篇文章主要讲解了“html5表单中的required属性怎么使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“html5表单中的required属性怎么使用”吧!

定义和用法

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

如何自定义提示文字

用户名
<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属性怎么使用这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI