JavaScript 表单专题
2024-06-02 20:55:52
JavaScript 表单专题
- 访问表单的方式
- 访问form表单控件的方式
- Form 表单对象
- Form 对象集合
- Form 对象属性
- Form 对象方法
- Form 对象事件句柄
- 单行文本框
- Text 对象
- Text 对象属性
- Text 对象方法
- 多行文本框
- Textarea 对象属性
- Textarea 对象方法
- Select 下拉列表
- Select 对象集合
- Select 对象属性
- Select 对象方法
- 级联菜单
- 下拉列表多项移动
- 单选和复选框
- 属性
- 方法
访问表单的方式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>访问表单的方式</title><style type="text/css">form{width: 300px;height: 100px;background:green;margin: 25px;}</style>
</head>
<body><form action="" name="myform1">表单1</form><form action="" name="myform2">表单2</form><form action="" name="myform3">表单3</form><form action="" name="myform4">表单4</form><script>//方式1：通过TagName或ID访问document.getElementsByTagName("form")[0].style.background = "red";//方式2：通过forms属性的索引值访问document.forms[1].style.background = "blue";//方式3：通过forms属性的表单name值访问document.forms["myform3"].style.background = "orange";//方式4：直接通过name值访问;不推荐使用，因为页面中表单较多的情况下容易出现相同namemyform4.style.background = "pink";</script>
</body>
</html>
访问form表单控件的方式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>通过name访问指定表单控件</title>
</head>
<body><form action="" name="myform">userName:<input type="text" name="username"><br>password:<input type="password" name="password"><br><input type="submit" id="tijiao" onclick="getValue()"></form><script>function getValue(){var form1 = document.forms[0];// 方式一：通过elements访问// var userN = form1.elements[0].value;// alert(userN);//方式二：通过控件的name访问或修改var userN = form1.username.value = "hhh";alert(userN);form1.password.style.background = "pink";}</script>
</body>
</html>
Form 表单对象
Form 对象代表一个HTML表单
在HTML文档中每出现一此，Form对象就会被创建
Form 对象集合
- elements[ ]：包含表单中所有控件元素的数组
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Form对象集合</title>
</head>
<body><form action="" name="myform"><p>昵称：<input type="text" name="name"></p><p>密码：<input type="password" name="password"></p><p><input type="submit" value="提交"></p></form><script>function getForm(){var fele = myform.elements;// alert(fele.length);for(var i = 0; i < fele.length; i++){if(fele[i].type == "submit"){fele[i].style.background = "orange";}else{fele[i].style.background = "green";}}}getForm();</script>
</body>
</html>
Form 对象属性
- action：设置或返回表单的action属性
- length：返回表单中的控件元素数目
- id/name/target/method
Form 对象方法
- reset()：把表单的所有输入元素重置为它们的默认值
- submit()：提交表单
Form 对象事件句柄
- onreset：在重置表单元素之前调用（对象是form表单）
- onsubmit：在提交表单之前调用（对象是form表单）
单行文本框
Text 对象
Text 对象属性
- accessKey：设置或返回访问文本域的快捷键
- alt：设置或返回当前浏览器不支持文本域时供显示的替代文本
- defaultValue：设置或返回文本域的默认值
- disabled：设置或返回文本域是否应被禁用
- form：返回一个对包含文本域的表单对象的引用
- maxLength：设置或返回文本域中最大字符数
- readOnly：设置或返回文本域是否应该是只读的
- tabIndex：设置或返回文本域的tab键控制次序
- id/name/size/type/value…
Text 对象方法
- blur()：从文本域上移开焦点
- focus()：在文本域上设置焦点
- select()：选取文本域中的内容
<form action="" method="get" name="form1"><p>测试内容：<input type="text" name="txt" value="测试文本框"></p><input type="button" value="按钮" onclick="eve()"></form><script>function eve(){var txt = document.forms["form1"].txt;// alert(txt);// txt.focus();//获得焦点// txt.blur();//失去焦点txt.select();//选取文本域的内容}</script>
多行文本框
Textarea 对象属性
- accessKey：设置或返回访问文本域的快捷键
- cols：设置或返回textarea的宽度
- rows：设置或返回textarea的高度
Textarea 对象方法
- blur()：从文本域上移开焦点
- focus()：在文本域上设置焦点
- select()：选取文本域中的内容
Select 下拉列表
Select 对象集合
- options[ ]：返回包含下拉列表中的所有选项的一个数组
Select 对象属性
- length：返回下拉列表中的选项数目
- multiple：设置或返回是否选择多个项目
- selectedIndex：设置或返回下拉列表中被选项目的索引号
- size：设置或返回下拉列表中的可见行数
- id/name/disabled/form/tabIndex
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>下拉列表</title><style type="text/css">select{width: 150px;background: pink;}textarea{width: 150px;}</style>
</head>
<body><form name="form1" action=""><!-- size:设置显示项目数 --><select name="sel" size=3 onchange="mySelect()" multiple> <option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option><option value="4">选项4</option><option value="5">选项5</option></select><br><textarea name="show" rows="5"></textarea></form><script>function mySelect(){// var len = document.form1.sel.options.length;//5var len = document.form1.sel.options;//返回一个options数组// alert(len[0].value);//1// alert(len[0].text);//选项1// var len2 = document.form1.sel.length;//返回下拉列表数目// alert(len2);//5var str = "";for(var i = 0; i < len.length; i++){if(document.form1.sel.options[i].selected){str += document.form1.sel.options[i].text + "\n";}}// alert(str);document.form1.show.value = str;}</script>
</body>
</html>
Select 对象方法
add()：向下拉列表指定位置添加一个选项
语法：selectObject.add(option, index);remove()：从下拉列表中删除一个选项
语法：selectObject.remove(index)blur()/focus()
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>数组元素添加到下拉列表</title>
</head>
<body><form name="form1" action=""><select name="sel" size="3"><option value="1">选项一</option><option value="2">选项二</option><option value="3">选项三</option></select><input type="button" value="addOpt" onclick="addOpt()"><input type="button" value="delOpt" onclick="delOpt()"></form><script>var count=0;function addOpt(){var FORM = document.form1.sel;//添加一个选项// var op = new Option("添加文本"+count, "值");// FORM.add(op);FORM.add(new Option("添加文本"+count, "值"), 2)count++;}//删除一个选项function delOpt(){var FORM = document.form1.sel;//方式一：将options属性长度设置为0，删除所有// FORM.options.length = 0;// 方式二：指定索引值删除// FORM.remove(2);var index = FORM.selectedIndex;FORM.remove(index);}</script></body>
</html>
级联菜单
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>级联菜单</title>
</head>
<body><form action="" name="form1">选择省份：<select name="sel1" size="1" onchange="changeMenu()"><option value="广东省">广东省</option><option value="广西省">广西省</option><option value="山东省">山东省</option><option value="山西省">山西省</option></select><select name="sel2" size="1"><option value="广州市">广州市</option><option value="深圳市">深圳市</option><option value="佛山市">佛山市</option></select></form><script>var arr = [];arr["广东省"] = ["广州市", "深圳市", "佛山市"];arr["广西省"] = ["梧州市", "桂林市", "南宁市"];arr["山东省"] = ["青岛市", "威海市", "大齐市"];arr["山西省"] = ["孟州市"];function changeMenu(){var sel1 = document.form1.sel1;// alert(sel1.options[sel1.selectedIndex].text);var list = arr[sel1.options[sel1.selectedIndex].text];// alert(list);var sel2 = document.form1.sel2;// removeMenu(sel2);alert(sel2[0].value);for(var i = 0; i < list.length; i++){sel2.options[i] = new Option(list[i], i);}}//清空sel2列表function removeMenu(menu){for(var i = 0; i < menu.options.length; i++){menu.options[i] = null;}}</script>
</body>
</html>
下拉列表多项移动
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>下拉列表多项移动</title><style type="text/css">select{width: 100px;height: 100px;}</style>
</head>
<body><form action="" name="form1"><select name="sel_1" multiple><option value="A">1</option><option value="B">2</option><option value="C">3</option><option value="D">4</option><option value="E">5</option><option value="F">6</option></select><input type="button" value="<<" onclick="changeSel(document.form1.sel_2, document.form1.sel_1)"><input type="button" value=">>" onclick="changeSel(document.form1.sel_1, document.form1.sel_2)"><select name="sel_2" multiple></select></form><script>function changeSel(s1, s2){// var sel_1 = document.form1.sel_1;// alert(sel_1.selectedIndex + " " + sel_1.options[sel_1.selectedIndex].text)while(s1.selectedIndex != -1){var index = s1.selectedIndex;var str1 = s1.options[index].text;s1.remove(index);s2.add(new Option(str1));}}</script>
</body>
</html>
单选和复选框
通常使用input元素来创建单选和复选框，两者属性和方法相同，具有input元素共有的其他属性和方法
属性
- checked：设置或返回checkbox是否被选中，true为选中，反之为false
- defaultChecked：返回checked属性的默认值
- id/form/name/type/disabled…
方法
- click()：模拟在checkbox中的一次鼠标点击
- blur()、focus()
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>单选和复选框</title>
</head>
<body><form action="" name="form1"><input type="radio" name="rad" value="A">A<input type="radio" name="rad" value="B">B<input type="radio" name="rad" value="C">C</form><script>// alert(form1.rad.length);// alert(form1.rad[1].value);// form1.rad[0].defaultChecked = true;//默认选中form1.rad[1].click();//模拟点击事件</script><hr><form action="" name="form2" onclick="return check2()"><input type="checkbox" name="boxc" value="A">A<input type="checkbox" name="boxc" value="B">B<input type="checkbox" name="boxc" value="C">C<input type="checkbox" name="boxc" value="D">D<input type="checkbox" name="boxc" value="E">E</form><script>// alert(form2.boxc.length);// alert(form2.boxc[3].value);// form2.boxc[0].defaultChecked = true;// form2.boxc[2].click();function check2(){var num = 0;var len = document.form2.boxc.length;for(var i = 0; i < len; i++){if(document.form2.boxc[i].checked){num++;}}if(num > 2){alert("最多只能选择两个");return false;}}</script><hr><form action="" name="form3"><p>选择课程</p><p>全选 <input type="checkbox" name="all" value="全选" onclick="checkAll(this.checked)"></p><p><input type="checkbox" name="CLASS" value="HTML5">HTML5<input type="checkbox" name="CLASS" value="PHP">PHP<input type="checkbox" name="CLASS" value="JAVA">JAVA</p></form><script>function checkAll(c){// var arr = document.getElementsByName("CLASS");var arr = form3.CLASS;alert(arr.length);if(c){for(var i = 0; i < arr.length; i++){arr[i].checked = true;}}else{for(var i = 0; i < arr.length; i++){arr[i].checked = false;}}}// checkAll();</script>
</body>
</html>
JavaScript 表单专题相关推荐
- JavaScript 表单与表单验证
JavaScript 表单 JavaScript 表单验证 HTML 表单验证可以通过 JavaScript 来完成. 以下实例代码用于判断表单字段(fname)值是否存在,如果存在,则弹出信息,否则 ...
- javascript 表单验证大全（一）
javascript 表单验证大全(一) 5.身份证验证:包括15位和18位.function idNumber(s)//身份证验证 {regu1=/^[1-9]\d{7}((0\d)|(1[0-2] ...
- 10个强大的Javascript表单验证插件推荐
创建一个JavaScript表单验证插件,可以说是一个繁琐的过程,涉及到初期设计.开发与测试等等环节.实际上一个优秀的程序员不仅是技术高手,也应该是善假于外物的.本文介绍了10个不错的JavaScri ...
- html表单验证js代码,JavaScript表单验证实现代码
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证 JavaScript 表单验证 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输 ...
- js html form,JavaScript 表单
JavaScript 表单 JavaScript 表单验证 HTML 表单验证可以通过 JavaScript 来完成. 以下实例代码用于判断表单字段(fname)值是否存在, 如果不存在,就弹出信息, ...
- Jeecg开发平台 - Online表单专题课程
Online表单专题课程 lesson one 一.online表单开发简单介绍 1.在线开发,通过在线配置,实现单表.树形列表.一对多表的建表及信息维护 2.除了基本的增删改查业务操作,提供更为强大 ...
- 15个最佳的 JavaScript 表单验证库
客户端验证在任何项目都是不够的,因为 JavaScript 可以直接忽略,人们可以提交请求到服务器. 然而这并不意味着客户端验证都没必要了,很多时候我们需要在用户提交到服务器之前给予提示.JavaSc ...
- 15个非常实用的JavaScript表单验证库
来源:web前端开发 https://mp.weixin.qq.com/s/p9s9cmAt2MZeCgmD2LC5Sg 客户端验证在任何项目都是不可缺少的,很多时候我们需要在用户提交到服务器之前给予 ...
- html自动验证邮件地址格式,JavaScript表单验证和邮箱格式验证的方法
JavaScript 表单验证 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证. 被 JavaScript 验证的这些典型的表单数据有: 用户是否已填写表单 ...
最新文章
- 武汉python培训班排行榜-比较靠谱的武汉Python培训机构是哪个？
- 了解 WPF 中的路由事件和命令
- I am too vegetable to all kill the 51nod problems on level 2 and 3.
- python numpy 中 np.mean(a) 跟 a.mean() 的区别
- c语言线性表库函数大全,数据结构(C语言版)-线性表习题详解
- 两台服务器之间mysql数据库怎么做同步_MySQL 数据库同步结构总结
- 继承单例模式 php_解决 PhpStorm 对 用单例模式实例化PHP类时，代码自
- qt creator纯C或C++项目在windows下的命令行中文乱码解决
- 苹果手机怎么在照片上添加文字_不管用什么手机，这样操作一下，就能直接给照片添加文字...
- 如果你毕业想进央企, 那就选这些大学, 性价比很高
- 计算机为什么获取mac地址,电脑获取mac地址失败怎么办
- 幽默的最高境界——这才叫幽默
- JS判断选择的时间是否大于当前时间
- Android 开发：（十四）NavigationBar篇-自定义顶部导航栏
- 利用jQuery实现图片轮播
- Z世代成消费主力，还呗布局消费分期正当时
- js制作一个简单的div弹窗：
- 转载java基础总结大全（使用）
- 3.5.CentOS7下安装配置Zookeeper集群与一键启动小脚本
- Eclipse+Java+Swing+Mysql实现自助存取款机(ATM)系统