-
1、基本表单验证特性介绍
2、代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- <form action="" method="post" novalidate> -->
<!-- <form action="" method="post" autocomplete="on"> -->
<form action="" method="post" >
<input type="file"><br><br>
<label for="">用户名</label>
<!--
1、required：表示该项必须填写，不然提交不了
2、autofocus：自动获取焦点
3、novalidate：在form上加，表示提交表单不验证
4、formnovalidate：在submit上加，表示提交表单不验证
5、正则^\d{5}[imooc]$：^\d以数字开头；{5}：五个数字；
[imooc]$以这五个字母的一个为结尾(总共6位；例如：12345c)
6、autocomplete：为on，输入一次，下一次再输入会自动提示；off则不是
-->
<input type="text" name="user" placeholder="请输入用户名"
required="required" autofocus><br><br>
<label for="">工号</label>
<input type="text" name="gonghao" placeholder="请输入工号"
pattern="^\d{5}[imooc]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- <form action="" method="post" novalidate> -->
<!-- <form action="" method="post" autocomplete="on"> -->
<form action="" method="post" >
<input type="file"><br><br>
<label for="">用户名</label>
<!--
1、required：表示该项必须填写，不然提交不了
2、autofocus：自动获取焦点
3、novalidate：在form上加，表示提交表单不验证
4、formnovalidate：在submit上加，表示提交表单不验证
5、正则^\d{5}[imooc]$：^\d以数字开头；{5}：五个数字；
[imooc]$以这五个字母的一个为结尾(总共6位；例如：12345c)
6、autocomplete：为on，输入一次，下一次再输入会自动提示；off则不是
-->
<input type="text" name="user" placeholder="请输入用户名"
required="required" autofocus><br><br>
<label for="">工号</label>
<input type="text" name="gonghao" placeholder="请输入工号"
pattern="^\d{5}[imooc]$"><br><br>
<input type="text" list="tips">
<datalist id="tips">
<option value="abc1"></option>
<option value="abc2"></option>
<option value="abc3"></option>
</datalist>
<br><br>
<input type="submit" value="按钮">
<input type="submit" value="formnovalidate" formnovalidate>
</form>
</body>
</html>
quot;><br><br>
<input type="text" list="tips">
<datalist id="tips">
<option value="abc1"></option>
<option value="abc2"></option>
<option value="abc3"></option>
</datalist>
<br><br>
<input type="submit" value="按钮">
<input type="submit" value="formnovalidate" formnovalidate>
</form>
</body>
</html>效果图：
3、label中for的补充
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" method="post" >
<!--
1、for 属性规定 label 与哪个表单元素绑定。
作用是 在点击label 时 会自动将焦点移动到绑定的元素上
-->
<label for="man">男</label>
<input type="radio" name="sex" id="man">
<label for="woman">女</label>
<input type="radio" name="sex" id="woman">
</form>
</body>
</html>效果图：
