HTML——JS—表单事件+表单提交_html js 表单提交-优快云博客

本文链接：https://blog.youkuaiyun.com/piduocheng0577/article/details/104942332

表单事件
表单提交

表单事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
        //表单事件中
				//	onfocus 获取焦点
				//	onblur  失去焦点
				//	oninput --- 检测输入
				//				----- 评论的字数的限制
				//	onsubmit ---- 表单提交事件

		<form action="" method="get">
			<p>用户名：<input class="username" type="text" name="uname" value="xiaomu"></p>
			<p>密码：<input class="psw" type="password" name="upsw" value="123456"></p>
			<p>
				<textarea class="comment" name="ucom" cols="80"></textarea>
				<span class="word_num">0</span>/<span class="total_num">50</span>
			</p>
			<p><input type="submit" value="登陆"></p>
		</form>
		
		
		<script>
			var name_input = document.querySelector(".username")
			
			// 获取焦点
			name_input.onfocus = function(){
				this.style.color = "red"
			}
			// 失去焦点
			name_input.onblur = function(){
				this.style.color = "black"
			}
			
			/**
			 * 字数限制的案例
			 */
			// 评论区
			var comment_input = document.querySelector(".comment")
			// 当前字数的标签
			var cur_num_span = document.querySelector(".word_num")
			// 获取一下总字数
			var total_num = parseInt(document.querySelector(".total_num").innerText)
			
			// 给评论框添加监听事件
			comment_input.oninput = function(e){
				// 获取数据的字数  --- 内容的长度
				var len = this.value.length
				if(len > total_num){
					// 内容长度大于了总字数
					alert("长度超过了限制字数")
					// 再输入的话 允许输入 但是只拿前total_num个
					this.value = this.value.substr(0, total_num)
				}
				// 显示当前字数的标签 重新设置数据
				cur_num_span.innerText = this.value.length + ""
			}
			
		</script>
	</body>
</html>

表单提交

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="#" method="get"  onsubmit="return true">
			<p>用户名：<input class="username" type="text" name="uname"></p>
			<p>密码：<input class="psw" type="password" name="upsw"></p>
			
			<p><input type="submit" value="登陆"></p>
		</form>
		
		<script>
			/**
			 * 存在的用户名  xiaomu
			 * 密码         xiamu123
			 * 
			 * 如果输入的用户名密码是这个  允许其登陆成功
			 * 否则就不允许提交成功
			 */
			
			
		</script>
	</body>
</html>