html5表单的required属性使⽤
描述
今天⽆意之中发现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="">
htmlradio多选怎么用⽤户名<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属性内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章,希望⼤家以后多多⽀持!
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论