JavaScript学习笔记——对表单的操作

javascript-对表单的操作实例讲解

<form name="myform" id="form1" action="" method="post">姓名:<input type="text" name="names" id="names" value="zhangsan"><br/>年龄:<input type="text" name="age" value="19"><br/>性别：<input type="radio" name="sex" value="man">男 <input type="radio" name="sex" value="woman">女<br/>爱好:<input type="checkbox" name="like[]" value="play">玩  <input type="checkbox" name="like[]" value="run">跑步<input type="checkbox" name="like[]" value="study">学习<br/>毕业院校:<select name="school"><option>北京大学</option><option>清华大学</option><option>南开大学</option></select><br/>简介：<textarea cols="60" rows="10" name="info">后盾网视频教程创始人</textarea><br/><input type="button" value="提交">
</form>

一、获得表单引用
　　1>通过直接定位的方式来获取
　　document.getElementById();
　　document.getElementsByName();
　　document.getElementsByTagName();

      //var myform=document.getElementById("form1");//alert(myform.name);//var myform=document.getElementsByName("myform")[0];// alert(myform.name);

　　2>通过集合的方式来获取引用

　　document.forms[下标]
　　document.forms["name"]
　　document.forms.name

    //var myform=document.forms[0];//var myform=document.forms["myform"];//var myform=document.forms.myform;//alert(myform.name)

　　3>通过name直接获取“（只适用于表单）

　　document.name

    //var myform=document.myform;//alert(myform.name);

二、获得表单元素的引用

　　1>直接获取
　　document.getElementById();
　　document.getElementsByName();
　　document.getElementsByTagName();

     //直接获取// var names=document.getElementById("names").value;// alert(names)//var names=document.getElementsByName("names")[0].value// alert(names)

　　2>通过集合来获取
　　表单对象.elements 获得表单里面所有元素的集合
　　表单对象.elements[下标]
　　表单对象.elements["name"]
　　表单对象.elements.name

      //var eles=document.myform.elements.length;//alert(eles)//var names=document.myform.elements[0].value;//var names=document.myform.elements["names"].value;// var names=document.myform.elements.names.value;//alert(names)

　　3>直接通过name的形式
　　
　　表单对象.name

         //var age=document.myform.age.value;//alert(age);// var info=document.myform.info.value;// alert(info)

三、表单元素共同的属性和方法

　　1>获取表单元素的值
　　表单元素对象.value 获取或是设置值

     // document.getElementById("fom1").names//  document.forms[0].elements[0]

　　2>属性
　　disabled 获取或设置表单控件是否禁用 true false

    //disabled //var names=document.myform.names.disabled =true;//var school=document.myform.school.disabled =true;

　　form 指向包含本元素的表单的引用

     //form//var age=document.forms[0].elements.age.form//alert(age.name);

　　3>方法
　　blur()失去焦点
　　focus() 获得焦点

     //foucsvar name=document.forms.myform.elements.names.focus();

四、文本域
　　<input type="text" >
　　***********************************
　　操作文本域的值
　　value 属性设置或者获取值

   //文本域//var names=document.forms[0].elements.names.value="lisi";//alert(names)

　　***********************************

五、单选按钮

　　*******************************************
　　checked 返回或者设置单选的选中状态
　　true 选中 false 未选中

　　value 属性获取选中的值，必须先判断选中状态。

       var sex=document.myform.sex;sex[0].checked=true;for (var i=0; i<sex.length; i++) {if(sex[i].checked){alert(sex[i].value)}}

　　*******************************************

六、多选按钮

　　*******************************************
　　checked 返回或者设置单选的选中状态
　　true 选中 false 未选中

　　value 属性获取选中的值，必须先判断选中状态。

      var likes=document.forms.myform["like[]"];likes[2].checked=true;for (var i=0; i<likes.length; i++) {if(likes[i].checked){alert(likes[i].value);}

　　*******************************************

七、下拉框

　　************************************************
　　selected 设置或返回下拉框的选中状态
　　true 选中 false 未选中

　　selectedIndex 设置或返回下拉框被选中的索引号

       //var school=document.myform.school;// var school=document.myform.school.options;//alert(school.length)//selected设置选中状态//school[1].selected=true;//selectedIndex设置选中状态//school.selectedIndex=2;

　　************************************************

八、文本区域

***************************************
<textarea></textarea>
value 操作值

<form name="myform"><textarea name="info" rows="7" cols="60"></textarea>
</form>

var str=info.value;

***************************************

九、验证表单

1.事件
onsubmit 当表单提交的时候触发的事件
onblur
onfocus
onchange

2.return false; 阻止事件的默认行为(适用于所有事件)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>javascript-对表单的操作实例讲解(上)</title>
<script>function check (obj) {if(obj.names.value==""){alert("姓名不能为空");return false;}if(obj.age.value==""){alert("年龄不能为空");return false;}var statu=0;for (var i=0; i<obj.sex.length; i++) {if(obj.sex[i].checked){statu=1;}}if(!statu){alert("性别不能为空");return false;}}
</script>
</head><body>
<form name="myform" id="form1" action="" method="post" onsubmit=" return check(this)">姓名:<input type="text" name="names" id="names" ><br/>年龄:<input type="text" name="age" ><br/>性别：<input type="radio" name="sex" value="man">男 <input type="radio" name="sex" value="woman">女<br/>爱好:<input type="checkbox" name="like[]" value="play">玩  <input type="checkbox" name="like[]" value="run">跑步<input type="checkbox" name="like[]" value="study">学习<br/>毕业院校:<select name="school"><option>北京大学</option><option>清华大学</option><option>南开大学</option></select><br/>简介：<textarea cols="60" rows="10" name="info">后盾网视频教程创始人</textarea><br/><input type="submit" value="提交">
</form></body>
</html>

十、提交方法

表单的方法
表单对象.submit()

<script>window.onload=function  () {var subs=document.myform.subs;subs.onclick=function  () {document.myform.action="1.html";document.myform.submit();}setTimeout(function  () {document.myform.action="2.html";document.myform.submit();},4000)}
</script>

转载于:https://www.cnblogs.com/tonglin0325/p/4717180.html

JavaScript学习笔记——对表单的操作相关推荐

JavaScript学习笔记（三）--操作运算符
JavaScript中的运算符有很多,主要分为算术运算符,比较运算符,逻辑运算符,三目运算符.一元运算符.位运算符等.这些运算符都有一些属于自己的运算规则,下面就为大家介绍一下JavaScript中的 ...
JavaScript学习笔记系列2:Dom操作(一)
一.什么是Dom? DOM------>Document Object Model 直接翻译就是文档对象模型. DOM------>定义了表示和修改文档所需的对象.这些对象的行为和属性以及 ...
JavaScript学习笔记07【6个经典案例——电灯开关、轮播图、自动跳转首页、动态表格、表格全选、表单验证】
Java后端学习路线笔记汇总表[黑马程序员] w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符. ...
JavaScript 学习笔记（1）
1. 何为 Jscript JScript 是一种解释型的.基于对象的脚本语言. 局限性: 1) 不能使用该语言来编写独立运行的应用程序 2) 没有对读写文件的内置 ...
JavaScript学习笔记06【高级——JavaScript中的事件】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
JavaScript学习笔记之DOM篇，带你全面了解什么是DOM
DOM在前面的JavaScript学习笔记(一)–JS基础里简单提到过,它是浏览器厂商提供的用来控制html / css 的代码的文档对象模型,是JavaScript的重要组成部分,现在带大家详细了解 ...
JavaScript学习笔记（三）---事件、正则表达式、ES6、运动
JavaScript学习笔记(三)---事件.正则表达式.ES6.运动 27.insertbefore 28.滚动条及事件 29.事件及事件对象 30.鼠标事件对象的属性 31.案例:图片随鼠标移动 ...
JavaScript 学习笔记（二）
JavaScript 学习笔记(二) 文章目录 JavaScript 学习笔记(二) 一 JSON 1. JSON 对象什么是JSON对象 JSON对象与Javascript对象的区别在JavaS ...
JavaScript学习笔记(四)(DOM)
JavaScript学习笔记(四) DOM 一.DOM概述二.元素对象 2.1 获取方式 (1).通过ID获取一个元素对象,如果没有返回null (2).通过`标签名`获取一组元素对象,,如果没有返 ...
JavaScript学习笔记（四）---闭包、递归、柯里化函数、继承、深浅拷贝、设计模式
JavaScript学习笔记(四)---闭包.递归.柯里化函数.继承.深浅拷贝.设计模式 1. 匿名函数的使用场景 2.自运行 3.闭包 3.1前提: 3.2闭包 4.函数对象的三种定义方式 5.th ...

JavaScript学习笔记——对表单的操作

JavaScript学习笔记——对表单的操作相关推荐

最新文章

热门文章