发表于： 2022-11-28 20:20:41
0 385
JavaScript 表单概述
表单介绍
一个表单有三个基本组成部分：
表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。
表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。
JavaScript与表单
JS最初的应用就是用于分担服务器处理表单的责任，打破依赖服务器的局面，尽管目前web和javascript都有了长足的发展，web表单依然没有为许多常见的任务提供现成的解决方案，很多开发人员不仅会在验证表单的时候使用javascript，而且还会用来增强一些标准表单控件的默认行为。
表单练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<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>
明天计划：完成接下来的任务
返回列表
评论