【HTML】08-表单验证

<!--
    使用html提供的属性进行基础表单验证
        1.required属性：非空检验
        2.maxlength属性：最大内容长度
        3.min属性：数字最小值
        4.max属性：数字最大值
        5.step属性：数字步长值
        6.checked属性：默认选中
        7.pattern属性：引入正则表达式
        
    HTML提供的表单验证属性，功能性较弱，不安全。实际开发一般不使用。实际开发推荐使用表单验证的js插件：Validate.js
-->

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单验证</title>
	</head>
	<body>
		<form action="result.html" method="get">
			用户名：<input type="text" name="username" id="username" placeholder="必填" 
					required="required" maxlength="6"/>
			<br>
			年龄：<input type="number" name="age" id="age" min="10" max="100" step="10"/>
			<br>
			性别：<input type="radio" name="sex" value="1" required="required"/>男
				<input type="radio" name="sex" value="0" required="required"/>女
			<br>
			性别：<input type="radio" name="sex1" value="1" checked="checked"/>男
				<input type="radio" name="sex1" value="0" />女
			<br>
			爱好：<input type="checkbox" name="hobby" id="hobby_money" value="money" checked="checked"/>金钱
				<input type="checkbox" name="hobby" id="hobby_girl" value="girl" />女人
				<input type="checkbox" name="hobby" id="hobby_java" value="java" />JAVA
			<br>
			手机号码：<input type="text" name="mobile" id="mobile" pattern="^1[3456789]\d{9}$">
																	
			<br>
			邮箱：<input type="text" name="email" id="email" pattern="^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$" />
			<br>
			<input type="checkbox" name="agree" value="1" required="required"/>同意XXX网站用户安全条款。
			<br>
			<input type="submit"/>
		</form>
	</body>
</html>