第八次网页前端培训笔记(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.getELementsByTagName(""标签名/元素名");
                    通过标签名获取表单元素对象
            2．获取单选按钮
                注:相同的一组单选按钮，需要设置相同的name属性值
                1. document.getElementByName( ""name属性值"");
                    通过name属性值获取
                2．判断单选按钮是否选中
                    checked 选中状态
                    在JS代码中
                        checked=true表示选中
                        checked=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" id="uname" name="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>
			 
			 <hr />
			 <br>
			 <input type="text" name="inputName" class="test" value="aaa"/>
			 <input type="radio" name="rad" class="test" value="1"/>  男
			 <input type="radio" name="rad" class="test" value="2"/>  女
			 <button type="button" onclick="getRadio()">获取单选按钮</button>
			 <hr>
			 <br>
			 全选/全不选: <input type="checkbox" id="control" onclick="checkAllonNot()" />
			 <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">获取多选按钮</button>
			 <br>
			 <hr>
			 <br>
			 来自:
				<select id="ufrom" name="ufrom" >
					 <option value =  "">请选择</option>
					 <option value="beijing" selected="selected">北京</option>
					 <option value="shanghai">上海</option>
					 <option >杭州</option>
			 </select>
			
			 <button type="button" onclick="getselect()">huo取下拉按钮</button>

			 


		</form>
		 
		 <script type="text/javascript">
		 function getRadio(){
			 
		 }
		 function checkFan(){
			 
		 }
		 function getcheckBox(){
			 
		 }
		 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); 
			 }
		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 val = ufrom.value;
			var a = 2;
			console.log("被选中项的值:" + val);
			var val2 = ufrom.options[index].value;
			console.log("被选中项的值:"+ val2);//获取下拉框被选中项的文本
			var txt = ufrom. options[index].text;
			console.log("被选中项的文本:" + txt);
			
			//设置上海选中
			ufrom.options[2].selected = true;



		}
		
		 </script>

三、提交表单

            一．使用普通按钮type="button"
                1．给按钮绑定click点击事件,绑定函数
                2．在函数中,进行表单校验(非空校验、合法性校验等)
                3，如果校验通过，则手动提交表单
                    表单对象.submit();
            二．使用提交按钮type="submit""
                1.给按钮绑定click点击事件,绑定函数
                2．函数需要有返回值，返回true或false(如果return false，则表单不会提交;如果return true,则表单提交
                    onclick = "return 函数名()"
                3．在函数中,进行表单校验(非空校验、合法性校验等)
                4·如果校验通过,返回true;如果校验不通过则返回false
            三．使用提交按钮type="submit""
                1.给按钮绑定click点击事件,绑定函数
                2．函数需要有返回值，返回true或false(如果return false，则表单不会提交;如果return true,则表单提交
                    onsubmit = "return 函数名()"
                3．在函数中,进行表单校验(非空校验、合法性校验等)
                4·如果校验通过,返回true;如果校验不通过则返回false

 <form id="myform" name="myform" action="http://www.baidu.com" method="get" >
			姓名: <input name="uname" id="uname"/> &nbsp; 
			<span id="msg" style="font-size: 12px;color: red;"></span><br />
			<button type="button" onclick="submitForm1()">提交</button>
		 </form>
		 <hr>
		 <form id="myform2" name="myform2" action="http://www.baidu.com" method="get" >
		 			姓名: <input name="uname2" id="uname2"/> &nbsp; 
		 			<span id="msg2" style="font-size: 12px;color: red;"></span><br />
		 			<button type="submit" onclick="return submitForm2()" >提交</button>
		 </form>
		 
		 <form id="myform3" name="myform3" action="http://www.baidu.com" method="get" >
		 			姓名: <input name="uname3" id="uname3"/> &nbsp; 
		 			<span id="msg3" style="font-size: 12px;color: red;"></span><br />
		 			<button type="submit" onclick="return submitForm3()" >提交</button>
		 </form>
		 
		 <script type="text/javascript">
		 
		 
		 
		 
	  /**
	  	 *使用提交按钮   type = submit"" 
	  	 *表单校验
	  	 *提交表单
	  */
	   function submitForm2(){
		   //得到文本框的值
		   var uname = document.getElementById( "uname2" ).value;
		   //判断是否为空
		   if (isEmpty(uname)) {//为空
		   			 //设置提示信息(设置span元素的值)
		   			 document.getElementById("msg2" ).innerHTML = "*姓名不能为空! ";
		   			 //阻止表单提交
		   			  return false;
		   			}
						return true;
					
		  
		   
		   
	   }
	   
	   /**
	   	 *使用提交按钮   type = submit"" 
	   	 *表单校验
	   	 *提交表单
	   */
	    function submitForm3(){
	   		   //得到文本框的值
	   		   var uname = document.getElementById( "uname3" ).value;
	   		   //判断是否为空
	   		   if (isEmpty(uname)) {//为空
	   		   			 //设置提示信息(设置span元素的值)
	   		   			 document.getElementById("msg3" ).innerHTML = "*姓名不能为空! ";
	   		   			 //阻止表单提交
	   		   			  return false;
	   		   			}
	   						return true;	   
	    }
	   
	   /**
	   	 *使用普通按钮   type = button"" 
	   	 *表单校验
	   	 *提交表单
	   */
		 function submitForm1() {
		 //得到文本框的值
		 var uname = document.getElementById( "uname" ).value;
		 //判断是否为空
		 if (isEmpty(uname)) {//为空
			 //设置提示信息(设置span元素的值)
			 document.getElementById("msg" ).innerHTML = "*姓名不能为空! ";
			 //阻止表单提交
			 return;
			}

		 
		 
		 //手动提交表单
		 document.getElementById("myform" ) . submit();
		 }
		
				/**
				*判断字符串是否为空
				如果为空，返回true
				如果不为空，返回false
				*trim(o :字符串方法,去除字符串前后空格
				* @param {object} str
				*/
		
		function isEmpty(str) {
		//判断是否为空
		if ( str == null || str.trim() ==""){
			return true;
		}
			return false;
		}

		</script>