获取表单 document.getElementById(“id属性值”)，通过表单的id属性值获取属性对象document.表单的name属性值，通过表单的name属性值获取表单对象document.forms[下标]，通过指定下标获取表单元素document.forms[表单的name属性值获取]，通过表单的name属性值获取表单对象document.forms:获取HTML文档中所有的表单对象
<body><!-- 获取表单(前两种常用)1.document.getElementById("id属性值");通过表单的id属性值获取属性对象2.document.表单的name属性值;通过表单的name属性值获取表单对象3.document.forms[下标]通过指定下标获取表单元素4.document.forms[表单的name属性值获取];通过表单的name属性值获取表单对象document.forms:获取HTML文档中所有的表单对象--><form id="myform1" name="myform1" action=""></form><form id="myform2" name="myform2" action=""></form><script type="text/javascript">// 1.document.getElementById("id属性值");console.log(document.getElementById("myform1"));// 2.document.表单的name属性值;console.log(document.myform2);// 获取所有的表单对象console.log(document.forms);// 3.document.forms[下标];console.log(document.forms[0]);// 4.document.form[表单的name属性值];console.log(document.forms['myform2']);</script></body>
获取表单元素 获取input元素获取单选按钮获取多选按钮获取下拉框对象
<meta charset="utf-8"><title>获取表单元素</title></head><body><!-- 获取表单元素1.获取input元素1.document.getElementById("id属性值");通过元素的id属性值获取表单元素对象2.表单对象.表单元素的name属性值;通过表单对象中对应的元素的name属性值获取3.document.getElementsByName("name属性值");通过表单元素的name属性值获取4.document.getElementByTagName("标签名/元素名");通过标签名获取表达单元素对象2.获取单选按钮注:相同的一组单选按钮,需要设置相同的name属性值1.document.getElementByName("name属性值");name属性值获取2.判断单选按钮是否选中checked 选中状态在JS代码中checked=true 表示选中check=false 表示不选中在HTML标签中checked=checked或checked 表示选中不设置checked属性表示不选中3.获取单选按钮的值元素.value;3.获取多选按钮与单选按钮相同4.获取下拉框对象1.获取下拉框对象var 对象 = document.getElementById("id属性值");2.获取下拉框的下拉选项列表var options = 下拉框对象.options;3.获取下拉框被选中项的索引var index = 下拉框对象.selectedIndex;4.获取下拉框被选中项的值var 值 = 下拉框对象.value;5.通过选中项的下标获取下拉框被选中项的值var 值 = 下拉框对象.options[index].value;6.获取下拉框被选中项的文本var 文本值 = 下拉框对象.options[index].text;注:1.获取下拉框选中项的值时:(value)如果option标签设置了value属性值,则获取value属性对应的值;如果option标签未设置value属性值,则获取的是option双标签中的文本值2.下拉框的选中状态选中状态:selected=selected 或 selected 或 selected=true未选中状态:不设置selected属性 或 selected=false--><form id="myform" name="myform" action="" method="get"> <!-- 文本框 -->姓名：<input type="text" name="uname" id="uname" value="zs" /><br><!-- 密码框 -->密码：<input type="password" id="upwd" name="upwd" value="1234"><br><!-- 隐藏域 --><input type="hidden" id="uno" name="uno" value="隐藏域" /><!-- 文本域 -->个人说明：<textarea name="intro"></textarea><br><!-- 按钮 --><button type="button" onclick="getTxt();">获取元素内容</button><br><hr ><br><input type="text" name="inputName" id="test" value="aaa" /><input type="radio" class="test" name="rad" id="test" value="1" />男<input type="radio" class="test" name="rad" id="test" value="2" /> 女<button type="button" onclick="getRadio()">获取单选按钮</button><br><hr ><br>全选/全不选: <input type="checkbox" id="control" onclick="checkAllOrNot()"><button type="button" onclick="checkFan()">反选</button><br><input type="checkbox" name="hobby" value="sing" />唱歌<input type="checkbox" name="hobby" value="dance" /> 跳舞<input type="checkbox" name="hobby" value="rap" /> 说唱<button type="button" onclick="geCheckBox()">获取多选按钮</button><hr ><br>来自:<select id="ufrom" name="ufrom"><option value ="-1">请选择</option><option value ="0" selected="selected">北京</option><option value ="1">上海</option></select><br><button type="button" onclick="getSelect()">获取下拉选项</button></form><script type="text/javascript">// 获取元素内容function getTxt(){// 1.document.getElementById("id属性值");var uname = document.getElementById("uname").value;console.log(pwd);// 2.表单对象.表单元素的name属性值;var pwd = document.getElementById("myform").upwd.value;console.log(pwd);// 3.document.getElementsByName("name属性值");var uno = document.getElementsByName("uno")[0].value;console.log(uno);// 4.document.getElementsByTagName("标签/元素名");var intro = document.getElementsByTagName("textarea")[0].value;console.log(intro);}// 获取单选按钮function getRadio(){// 通过name属性值获取单选按钮/* var radios = document.getElementsByName("rad");// 判断并遍历if (radios != null && radios.length > 0 ){// 遍历for (var i = 0 ; i < radios.length; i++) {console.log("值:"+radios[i].value+",是否选中:"+radios[i].checked);}}*/ // 通过class属性值获取var cla = document.getElementsByClassName("test");console.log(cla);if(cla != null && cla.length > 0 ){for(var i=0; i<cla.length ;i++){// 判断input元素的类型 typeif( cla[i].type == "text" ){// 文本框console.log("文本框的值:"+cla[i].value);}else if(cla[i].type == "radio"){console.log("值:"+cla[i].value+",是否选中:"+cla[i].checked);}} }}function checkAllOrNot(){}// 反选function checkFan(){// 通过复选框的name属性值获取var checkboxs = document.getElementsByName("hobby");//判断if (checkboxs != null && checkboxs.length > 0 ) {// 遍历for(var i = 0; i < checkboxs.length; i++) {// 设置选中状态 (取反)checkboxs[i].checked = !checkboxs[i].checked;}}}function geCheckBox(){}function getSelect(){}</script></body>
提交表单 使用普通按钮 type=“button”使用提交按钮 type=“submit”使用表单提交 type=“submit”
<body><!-- 提交表单一.使用普通按钮type="button"1.给按钮绑定click点击事件,绑定函数2.在函数中,进行表单校验(非空校验\合法性校验等)3.如果校验通过,则手动提交表单表单对象.submit();二.使用提交按钮type="submit"1.给按钮绑定click点击事件,绑定函数2.函数需要有返回值,返回true或者false(如果return false,则表单不会提交,如果return true或不return则仍然提交)οnclick="return 函数名()"3.在函数中进行表单校验(非空校验,合法性校验等)4.如果校验通过返回true;如果校验不通过,则返回false三.使用表单提交 type="submit"1.给表单form元素绑定submit提交事件,绑定函数2.函数需要有返回值,返回true或者false(如果return false,则表单不会提交,如果return true或不return则仍然提交)onsubmit = "return 函数名()"3.在函数中进行表单校验(非空校验,合法性校验等)4.如果校验通过返回true;如果校验不通过,则返回false--><!-- 使用普通按钮 type="button" --><form id="myform" name="myform" action="" method="get">姓名:<input name="uname" id="uname" /> <span id="msg" style="font-size: 16px; color: orangered;"></span><br><button type="button" onclick="submitForm1()">提交</button></form><hr><!-- 使用提交按钮 type="submit" --><form id="myform2" name="myform2" action="" method="get">姓名:<input name="uname2" id="uname2" /> <span id="msg2" style="font-size: 16px; color: orangered;"></span><br><button type="submit" onclick="return submitForm2()">提交</button></form><hr><!-- 使用提交按钮 type="submit" --><form id="myform3" name="myform3" action="" method="get" onsubmit="return submitForm3()">姓名:<input name="uname3" id="uname3" /> <span id="msg3" style="font-size: 16px; color: orangered;"></span><br><button type="submit">提交</button></form><script type="text/javascript">/*表单校验提交表单*/ function submitForm1(){// 得到文本框的值var uname = document.getElementById("uname").value;//判断是否为空if( isEmpty(uname) ){//为空// 设置提示信息(设置span元素的值)document.getElementById("msg").innerHTML = "*姓名不能为空!";// 阻止表单提交return;}// 手动提交表单document.getElementById("myform").submit();}/*** 使用提交按钮 type="submit"* 按钮绑定提交事件*/function submitForm2(){// 得到文本框的值var uname = document.getElementById("uname2").value;//判断是否为空if( isEmpty(uname) ){//为空// 设置提示信息(设置span元素的值)document.getElementById("msg2").innerHTML = "*姓名不能为空!";// 阻止表单提交return false;}else{return true;}// 手动提交表单document.getElementById("myform2").submit();}/*** 使用提交按钮 type="submit"* 表单绑定提交事件*/function submitForm3(){// 得到文本框的值var uname = document.getElementById("uname3").value;//判断是否为空if( isEmpty(uname) ){//为空// 设置提示信息(设置span元素的值)document.getElementById("msg3").innerHTML = "*姓名不能为空!";// 阻止表单提交return false;}else{return true;}// 手动提交表单document.getElementById("myform3").submit();}/*** 判断字符串是否为空* 如果为空,返回true* 如果不为,返回false* * trim():字符串方法,去除字符串前后空格* @param {Object} str */function isEmpty(str){// 判断是否为空if(str == null || str.trim() == "") {return true;}return false;}</script></body>
