一、获取表单
1.document.getElementById("id属性值")；
通过from标签的id属性值获取表单对象
2.docunment.表单的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>
<form id= "myform3" name="myform3" action=""></form>
<script type="text/javascript">
//1.document.getElementById("id属性值")；
console.log(document.getElementById("myform1"));
//2.docunment.表单的name属性值；
console.log(document.forms);
//3.document.forms[下标]；
console.log(document.forms[0]);
//4.document.forms[表单的name属性值]；
console.log(document.forms['myform2']);
</script>二、获取表单元素
1.获取input元素
1.document.getElementById("id属性值");
通过元素的id属性获取表单元素对象
2.表单对象.表单元素的name属性值：
通过表单对象中对应的元素的name属性值获取
3.document.getElementsByName("name属性值")：
通过表单元素的内幕属性值获取
4.document.getElementsByTagName("标签名/元素名")
通过标签名获取表单元素对象
/*获取input元素*/
function getTxt(){
//1.document.getElementById("id属性值");
var uname = document.getElementById("uname").value;
console.log(uname);
// 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);
}2.获取单选按钮
注:相同的一组单选按钮，需要设置相同的name属性值
1.document.getElementByName("name属性值")；
通过name属性值获取
2.判断单选按钮是否选中
checked选中状态
在JS代码中
checkeed=true 表示选中
heckedfalse 表示不选中
在HTML标签中
checked=checked或checked 表示选中
不设置checked属性 表示不选中
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
//获取下拉框对象
var ufrom=document.getElementById("ufrom");
console.log(ufrom);
//获取下拉框的下拉选项列表
var opts=ufrom.options;
console.log(opts);
//获取下拉框被选中项的索引
var index=ufrom.selectedIndex;
console.log("选中项的下标:"+index);
//获取下拉框被选中项的值
var val = ufrom.value;
console.log("被选中项的值:" +val);
//通过选项中项的下标获取下拉框被选中项的值
var val2=ufrom.options[index].value;
console.log("被选中项的值:"+val2);
//获取下拉框被选中项的文本
var txt=ufrom.options[index].text;
console.log("被选中项的值:"+txt);
三、 提交表单
一、使用普通按钮，type="button"
1.给按钮绑定click点击事件，绑定函数
2.在函数中，进行表单校验(非空校验、合法性校验等)
3.如果校验通过，则手动提交表单
表单对象.submit();
<!-- 使用普通按钮 type="button" -->
<form id="myform" name="myform" action="http://www.baidu.com" method="get" >
姓名:<input name="uname" id="uname"/>
<span id="msg" style="font-size:12px;color:red;"></span><br/>
<button type ="button" onclick="submitForm1()">提交</button>
</form>二、使用提交按钮 type="submit"
1.给按钮绑定click点击事件，绑定函数
2.函数需要有返回值，返回true或false(如果return false，则表单不会提交；如果return true或不return，则表单提交)
οnclick="return 函数名()"
3.在函数中，进行表单校验(非空校验、合法性校验等)
4.如果校验通过，返回true；如果校验不通过则返回false。
<!-- 使用提交按钮 type="sumbit" -->
<form id="myform2" action="http://www.baidu.com" method="get" >
姓名:<input name="uname2" id="uname2"/>
<span id="msg2" style="font-size:12px;color:red;"></span><br/>
<button type ="submit" onclick="return submitForm2()">提交</button>
</form>三、使用提交按钮 type="sumbit"
1.给表单form元素绑定sumbit提交事件，绑定函数
2.函数需要有返回值，返回true或false(如果return false，则表单不会提交；如果return true或不return，则表单提交)
οnsubmit="return 函数名()"
3.在函数中，进行表单校验(非空校验、合法性校验等)
4.如果校验通过，返回true；如果校验不通过则返回false。
<!-- 使用提交按钮 type="sumbit" -->
<form id="myform3" action="http://www.baidu.com" method="get" onsubmit="return submitForm3()" >
姓名:<input name="uname3" id="uname3"/>
<span id="msg3" style="font-size:12px;color:red;"></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();
}
function submitForm2(){
//得到文本框的值
var uname = document.getElementById("uname2").value;
//判断是否为空
if(isEmpty(uname)){ //为空
//设置提示信息(设置span元素的值)
document.getElementById("msg2").innerHTML = "*姓名不能为空";
//阻止表单提交
return false;
//手动提交表单
}
return true;
}
function submitForm3(){
//得到文本框的值
var uname = document.getElementById("uname3").value;
//判断是否为空
if(isEmpty(uname)){ //为空
//设置提示信息(设置span元素的值)
document.getElementById("msg3").innerHTML = "*姓名不能为空";
//阻止表单提交
return false;
//手动提交表单
}
return true;
}
function isEmpty(str){
//判断是否为空
if(str == null || str.trim()==""){
return true;
}
return false;
}
</script>
