html表单详情

获取表单

1.document.getElementById("id属性值")；
通过from标签的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("------");
		//获取所有的表单对象
		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属性值")；
通过表单元素的name属性值获取
（4）document.getElementsByTaName("标签名/元素名")；
通过标签名获取表单元素对象

2.获取下拉选项

（1）获取下拉框对象
var 对象 = document.getElementById("id属性值")；
（2）获取下拉框的下拉选项列表
var options = 下拉框对象.options；
（3）获取下拉框被选中项的索引
var index = 下拉框对象.selectedIndex；
（4）获取下拉框被选中项的值
var 值 = 下拉框对象.value
（5）通过选中项的下标获取下拉框被选中项的值
 var 值 = 下拉框对象.option[index].value；
（6）获取下拉框被选中项的文本
var 文本值 = 下拉框对象.option[index].text；
 注：
1.获取下拉框选中项的值时，
如果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" id="uname" name="uname" value="xiaoming"><br>
				密码:<input type="password" id="upwd" name="upwd" value="123456"><br />
				<input type="hidden" id="uno" name="uno" value="隐藏域">
				个人说明:<textarea name="intro"></textarea><br>
				<button type="button" onclick="getTxt();">获取元素内容<tton>
			</form>
			
			
		<form>
			来自：
			    <select id="ufrom" name="ufrom">
					<option value="">请选择</option>
					<option value="beijing" selected="selected">北京</option>
					<option value="shanghai">上海</option>
					<option>杭州</option>
				<lect>
				<button type="button" onclick="getSelect()">获取下拉选项<tton>
			</form>
		<script type="text/javascript">
			function getTxt(){
			    document.getElementById("id属性值");
				var uname = document.getElementById("uname");
				console.log(uname);
				//表单对象.表单元素的name属性值；
				var pwd = document.getElementById("myform");
				console.log(pwd);
				//document.getElementsByName("name属性值")；
				var uno = document.getElementsByName("uno")[0].value;
				console.log(uno);
				//document.getElementsByTaName("标签名/元素名")；
				var intro = document.getElementsByTagName("textarea")[0].value;
				console.log(intro);
			}
			
			
			function getSelect(){
				//获取下拉框
				var ufrom = document.getElementById("ufrom");
				console.log(ufrom);
				//获取下拉框的下拉选项列表
				var optS = ufrom.options;
				console.log(optS);
				//获取下拉框的被选中项的索引
				var index = ufrom.selectedIndex;
				console.log("选中项的下标："+index);
				//获取下拉框被选中项的值
				var val1 = ufrom.value;
				console.log("被选中项的值：" + val1);
				//通过选中项的下标获取下拉框被选中项的值
				var val2 = ufrom.options[index].value;
				console.log("被选中项的值：" + val2);
				//获取下拉框被选中项的文本
				var txt = ufrom.options[index].text;
				console.log("被选中项的文本：" + txt);
			}
		</script>

提交表单
                    一、使用普通按钮  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，则表单提交)
                        οnsubmit="return 函数名 ()"
                    3.在函数中，进行表单校验（非空校验、合法性校验等）
                    4.如果校验通过，返回true；如果校验不通过，返回false

<form id="myform1" name="myform1" action="" method="get">
					姓名:<input name="uname1" id="uname1">
					<span id="msg1" style="font-size:12px;color: red;"></span><br>
					<button type="button" onclick="submitForm1()">提交</button>
				</form>
		<hr>
		<form id="myform2" name="myform2" action="" 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>
		<hr>
		<form id="myform3" name="myform3" action="" 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("uname1").value;
				//判断是否为空
				if(isEmpty(uname)){
				//为空
				//设置提示信息，阻止表单提交（设置span元素的值）
				document.getElementById("msg1").innerHTML = "*姓名不能为空";
				return ;
				}
				//手动提交表单
				document.getElementById("myform1").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){
				//判断字符串是否为空
				//如果为空，返回true
				if(str == null||str.trim() == ""){
					return  true; 
				}
				return false;
			}
		</script>