【HTML】08-表单验证

最新推荐文章于 2024-05-09 21:24:37 发布

JeffHan^_^

最新推荐文章于 2024-05-09 21:24:37 发布

阅读量721

点赞数 1

分类专栏： HTML教程文章标签： html5 html 前端

本文链接：https://blog.csdn.net/Jeffhan_java/article/details/123368846

版权

HTML教程专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!--
    使用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>

JeffHan^_^

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
【HTML】08-表单验证

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

扫一扫