	<body>
		<!-- 
			獲取表單
				1、document.表單名稱
				2、document.getElementById(表單 id);
				3、document.forms[表單名稱]
				4、document.forms[索引]; //從 0 開始
		 -->
		<form id='myform' name="myform" action="" method="post"></form>
		<form id='myform2' name="myform2" action="" method="post"></form>
		
		<script type="text/javascript">
			//1、document.表單名稱
			var form = document.myform;
			console.log(form);
			
			//2、document.getElementById(表單 id);
			var myform2 = document.getElementById("myform2");
			console.log(myform2);
			
			//3、document.forms[表單名稱]
			var forms = document.forms;
			console.log(forms);
			console.log(forms['myform2']);
			
			//4、document.forms[索引]; //從 0 開始
			console.log(forms[0]);
		</script>
	</body>

表單的元素以及值獲取

	<body>
		<!-- 
			獲取元素的值
				獲取表單元素的值
					表單元素節(jié)點(diǎn).value;       取值
					表單元素節(jié)點(diǎn).value = "值";  設(shè)置值
					
					文本框，密碼框，單選，多選
					
				獲取非表單元素的內(nèi)容
					元素節(jié)點(diǎn).innerHtml = "值";   設(shè)置值
					元素節(jié)點(diǎn).innerHtml; 		 取值
				
				
			獲取input元素
				1)、通過 id 獲?。?document.getElementById(元素 id);
				2)、通過 form.名稱 形式獲取: myform.元素名稱;    name屬性值
				3)、通過 name 獲取 數(shù)組 :document.getElementsByName(name屬性值)[索引] // 從0開始
				4)、通過 tagName   數(shù)組 :document.getElementsByTagName('input')[索引] // 從0開始
				
			獲取單選按鈕
				前提：將一組單選按鈕設(shè)置相同的name屬性值
				?	(1)獲取單選按鈕組：
						document.getElementsByName("name屬性值");
				  	(2)遍歷每個(gè)單選按鈕，并查看單選按鈕元素的checked屬性
				?		若屬性值為true表示被選中，否則未被選中	
				?	選中狀態(tài)設(shè)定：  checked='checked'  或  checked='true'  或  checked	
				?	未選中狀態(tài)設(shè)定：   沒有checked屬性   或  checked='false'
				
				
			多選框
				前提：設(shè)置一組多選框?yàn)橄嗤琻ame屬性值
				(1)獲取多選按鈕組：
					document.getElementsByName("name屬性值");
				(2)遍歷每個(gè)多選按鈕，并查看多選按鈕元素的checked屬性
				?	若屬性值為true表示被選中，否則未被選中	
				?	選中狀態(tài)設(shè)定：  checked='checked'  或  checked='true'  或  checked	
				?	未選中狀態(tài)設(shè)定：   沒有checked屬性   或  checked='false'
				
				
			獲取下拉選項(xiàng)
				1）獲取 select 對象：
					var ufrom = document.getElementById("ufrom");
				2）獲取選中項(xiàng)的索引：
					var idx = ufrom.selectedIndex;
			?	3）獲取選中項(xiàng) options 的 value屬性值：
					var val = ufrom.options[idx].value;
				?	注意：當(dāng)通過options獲取選中項(xiàng)的value屬性值時(shí)，
				?		若沒有value屬性，則取option標(biāo)簽的內(nèi)容
				?		若存在value屬性，則取value屬性的值
			?	4）獲取選中項(xiàng) options 的 text：
					var txt = ufrom.options[idx].text;
					
			?		選中狀態(tài)設(shè)定：selected='selected'、selected=true、selected
			?		未選中狀態(tài)設(shè)定：不設(shè)selected屬性 
				
		 -->
		 
		<form id='myform' name="myform1" 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="隱藏域" />
			個(gè)人說明:<textarea name="intro"></textarea>
			<button type="button" onclick="getTxt();" >獲取元素內(nèi)容</button>
		</form>
		
		


		<!-- 操作單選 -->
		<form action="" name="myform">
			<input type="text" name="inputName" value="aaa" />
			<input type="radio" name="rad" value="1" />	1
			<input type="radio" name="rad" value="2"  /> 2
			<button type="button" onclick="getRadio();" >獲取單選內(nèi)容</button>
		</form>
		
		


		<!-- 操作多選 -->
		<form action="" name="myform">
			<input type="text" name="inputName" value="aaa" />
			<input type="checkbox" name="hobby" value="1" />  1
			<input type="checkbox" name="hobby" value="2"  /> 2
			<input type="checkbox" name="hobby" value="3"  /> 3
			<button type="button" onclick="getCheckbox();" >獲取多選內(nèi)容</button>
		</form>
		
		<!-- 獲取下拉框 -->
		<form id='myform' name="myform9" action="" method="">		
			來自:
			<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();" >獲取多選內(nèi)容</button>
		</form>
		
		<script type="text/javascript">
			//獲取元素內(nèi)容
			function getTxt(){
				// 1)、通過 id 獲?。篸ocument.getElementById(元素 id);
				var uname = document.getElementById("uname");
				console.log(uname.value);
				
				//2)、通過 form.名稱形式獲取: myform.元素名稱;    name屬性值
				var upwd = document.myform1.upwd;
				console.log(upwd);
				console.log(upwd.value);
				
				//3)、通過 name 獲取 :document.getElementsByName(name屬性值)[索引] // 從0開始
				var hid = document.getElementsByName("uno")[0];
				console.log(hid.value);
				
				// 4)、通過 tagName 數(shù)組 :document.getElementsByTagName('input')[索引] // 從0開始
				var texta = document.getElementsByTagName("textarea")[0];
				console.log(texta.value);
			}
			
			//獲取單選按鈕中選中項(xiàng)
			function getRadio(){
				//獲取所有單選
				var rads = document.getElementsByName("rad");
				
				//遍歷每個(gè)單選
				for(var i = 0; i < rads.length; i++){
					if(rads[i].checked){
						console.log(rads[i].value);
					}
				}
			}
		
			//獲取多選按鈕中選中項(xiàng)
			function getCheckbox(){
				//獲取所有多選
				var hobbys = document.getElementsByName("hobby");
				
				//遍歷每個(gè)多選
				var str ="";
				for(var i = 0; i < hobbys.length; i++){
					if(hobbys[i].checked){
						str += hobbys[i].value + ",";
					}
				}
				console.log(str.substring(0,str.length-1));
			}
			
			//獲取下拉選項(xiàng)
			function getSelect(){
				//獲取下拉框
				var select = document.getElementsByName("ufrom")[0];
				//獲取下拉框的選項(xiàng)
				var options = select.options;
				//獲取下拉框選中索引
				var index = select.selectedIndex;
				//獲取選中項(xiàng) 
				console.log(options[index]);
				//獲取選中項(xiàng)的值
				console.log(select.value);
			}
		</script>
	</body>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: