HTML5_表单

最新推荐文章于 2022-05-06 17:43:38 发布

Silent Land

最新推荐文章于 2022-05-06 17:43:38 发布

阅读量553

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/weixin_44757417/article/details/105650898

版权

HTML 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

新增的表单事件

oninput:监听当前指定元素内容的改变，只要内容改变（添加内容，删除内容），就会触发
onkeyup:键盘弹起的时候触发，每一个键弹起都会触发一次

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="">
			用户名：<input type="text" name="userName" id="userName"><br>
			电话：<input type="tel" name="userPhone" id="userPhone"><br>
			<input type="submit">
		</form>
		<script type="text/javascript">
			/* 1.oninput:监听当前指定元素内容的改变，只要内容改变（添加内容，删除内容），就会触发 */
			document.getElementById("userName").oninput=function(){
				console.log("oninput:"+this.value);
			}
			/* 2.onkeyup:键盘弹起的时候触发，每一个键弹起都会触发一次 */
			document.getElementById("userName").onkeyup=function(){
				console.log("onkeyup:"+this.value);
			}
		</script>
	</body>
</html>

运行：
在这里插入图片描述

oninvalid

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="">
			用户名：<input type="text" name="userName" id="userName"><br>
			电话：<input type="tel" name="userPhone" id="userPhone" pattern="^1/d{10}$"><br>
			<input type="submit">
		</form>
		<script type="text/javascript">
			/* 1.oninput:监听当前指定元素内容的改变，只要内容改变（添加内容，删除内容），就会触发 */
			document.getElementById("userName").oninput=function(){
				console.log("oninput:"+this.value);
			}
			/* 2.onkeyup:键盘弹起的时候触发，每一个键弹起都会触发一次 */
			document.getElementById("userName").onkeyup=function(){
				console.log("onkeyup:"+this.value);
			}
			/* oninvalid:当验证不通过时触发 */
			document.getElementById("userPhone").oninvalid=function(){
				/* 设置默认的提示信息 */
				this.setCustomValidity("请输入合法的11位手机号");
			}
		</script>
	</body>
</html>

运行效果：
在这里插入图片描述

进度条

progress:进度条
meter:度量器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- max:最大值
		 value:当前进度值
		 -->
		<progress max="100" value="50"></progress>
		
		<!-- 度量器 -->
		<!-- high:规定的较高的值 
		low:规定较低的值
		max：最大值
		min:最小值
		value：当前度量值
		-->
		<meter max="100" min="0" high="80" value="30"></meter>
	</body>
</html>

效果：
在这里插入图片描述

表单综合案列

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/form.css"/>
	</head>
	<body>
		
		<form action="#">
			<fieldset>
				
				<legend>学生档案</legend>
				<label for="userName">姓名:</label>
				<input type="text" name="userName" id="userName" placeholder="请输入用户名" />
				
				<label for="userPhone">手机号码：</label>
				<input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"/>
				
				<label for="email">邮箱地址：</label>
				<input type="email" name="email" id="email" required="required">
				
				<label for="collage" >所属学院：</label>
				<input type="text" name="collage" id="collage" list="cList" placeholder="请选择"/>
				<datalist id="cList">
					<option value ="前端移动开发"></option>
					<option value ="java学院"></option>
					<option value ="C++学院"></option>
				</datalist>
				
				<label for="score">入学成绩:</label>
				<input type="number"  id="score" value="0"	max="100"  />
				
				<label for="level">基础水平：</label>
				<meter id="level" max="100" min="0" low="59" high="90"></meter>
				
				<label>入学日期：</label>
				<input type="date" name="inTime" id="inTime"  />
				
				<label>入学日期：</label>
				<input type="date" name="leaveTime" id="leaveTime"  />
				<input type="submit" name="" id="" value="提交" />
			</fieldset>
		</form>
		<script type="text/javascript">
			document.getElementById("score").oninput=function(){
				document.getElementById("level").value=this.value;
			}
		</script>
	</body>
</html>

form.css

*{
	padding: 0;
	margin: 0;
	}
	form{
		width:600px;
		margin: 20px auto;
	}
	form>fieldset{
		
		padding: 10px;
	}
	meter,input{
		width: 600px;
		height: 40px;
		line-height: 40px;
		margin: 10px 0;
		/* 清除所带来的浮雕效果 */
		border: none;
		border: 1px solid #ccc;
		/*设置圆角 */
		border-radius: 4px;
		font-size: 16px;
		padding-left: 5px;
		/* width=内容+padding+boder */
		/* 盒模型 */
		box-sizing: border-box;
		
	}
	p{
		color: blue;
	}
	meter{
		padding-left: 0px;
	}