网页前端第八次培训笔记-CFANZ编程社区

1.学习资料

【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili

2.表单的获取以及下拉框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form id="myform1" name="myform1" action=""></form>
		<form id="myform2" name="myform2" action=""></form>
		<form id="myform" name="myform" action="" method="get">
			姓名:<input type="text" id="uname" name="uname" value="zhangsan" />
			<br />
			密码:<input type="password" id="upwd" name="upwd" value="1234"/>
			<br />
			<input type="hidden" id="uno" name="uno" value="隐藏域" />
			<br />
			个人说明:<textarea name="utron"></textarea>
			<br />
			<button type="button" onclick="getTX();">获取元素内容</button>
		</form>
		<script type="text/javascript">
		console.log(document.getElementById("myform1"));//id属性
		console.log(document.myform2);//name属性
		console.log("-----------")
		console.log(document.forms);
		console.log(document.forms[1]);
		console.log(document.forms['myform2']);
		console.log("-----------")
		
		function getTX(){
			var name=document.getElementById("uname").value;
			console.log(name);
			var upwd=document.getElementById("myform").upwd.value;
			console.log(upwd);
			var uno=document.getElementsByName("uno")[0].value;
			console.log(uno);
			var utron=document.getElementsByTagName("textarea")[0].value;
			console.log(utron);

			
			
		}
		
		</script>
	</body>
</html>

2.1 获取表单，单选按钮

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<select id="uform" name="uform">
			<option value="">请选择</option>
			<option value="beijing" selected="selected">北京</option>
			<option value="shanghai">上海</option>
			<option>杭州</option>
		</select>
		<button type="button" onclick="gethh()">获取下拉选项</button>
		
		<script type="text/javascript">
		function gethh(){
			var uform=document.getElementById("uform");//获取下拉框对象
			console.log(uform);
			var opts=uform.options;//获取下拉框的下拉选项列表
			console.log(opts);
			var index=uform.selectedIndex;//获取下拉框被选中项的索引
			console.log("选中项的下标:"+index);
			var val=uform.value;//获取下拉框被选中项的值
			console.log("被选中项的值:"+val);
			var val2=uform.options[index].value;//通过选中项的下标获取下拉框被选中的值
			console.log("被选中的值:"+val2);
			var txt=uform.options[index].text;//获取下拉框被选中的文本项
			console.log("被选中的文本:"+txt);
			//设置上海被选中的项
			uform.options[2].selected=true;
			
			
			
			
		}
		</script>
	</body>
</html>

2.2 提交按钮（submit一定要设置返回值当为false是阻止事件发生）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form id="my" action="https://www.baidu.com/?tn=62095104_34_oem_dg" method="get">
			姓名<input name="uname" id="uname"/>&nbsp;<span id="msg" style="font-size: 12px; color: #00FFFF;"></span> <br/>
			<button type="button" onclick="getl()">提交</button>
		</form>
		<form id="my2" action="https://www.baidu.com/?tn=62095104_34_oem_dg" method="get">
			姓名<input name="uname2" id="uname2"/>&nbsp;<span id="msg2" style="font-size: 12px; color: #00FFFF;"></span> <br/>
			<button type="submit" onclick="return get2()">提交</button>
		</form>
		<script type="text/javascript">
		function getl(){
			var name=document.getElementById("uname").value;
			if(empty(name)){
				document.getElementById("msg").innerHTML="姓名不能为空！"
				return;
				
			}
		
		
		document.getElementById("my").submit();
		}
		function empty(str){
			if(str==null||str.trim()==""){
				return true;
			}
			
			return false
		}
		function get2(){
			var name1=document.getElementById("uname2").value;
			if(empty(name1)){
				document.getElementById("msg2").innerHTML="姓名不能为空！"
				return false;
			}
			return true;
		}
		
		
		
		
		</script>
	</body>
</html>

当有信息时，会进行页面的跳转，因为我的action是百度