JS操作HTML表单元素-优快云博客

本文链接：https://blog.youkuaiyun.com/CellIce/article/details/107428516
<body>
		<form id="login" action="http://www.baidu.com/s">
			<input type="text" name="wd"/>
			<input type="text" name="wd"/>
			<input type="button" value="登录" onclick="login()"/>
		</form>
		
		<input id="name"/>
		
		<input type="button" value="测试" onclick="t()"/>
		<script>
		/*	document.getElementById("name").focus();
			function t(){
				var element = document.getElementById("name");//根据id获取标签属性
				console.log(element.value);//在控制台输出value值，即内容
				element.value="jim";//向表单中添加默认值
				element.readOnly=true;//设置只读
				element.disabled=true;//设置禁用
				//文本框以及密码框的作用方式与之一致
			}*/
		</script>
		<br />
		<input type="radio" name="sex" value="0"/>女
		<input type="radio" name="sex" value="1"/>男
		<input type="button" value="测试" onclick="t1()"/>
		<script>
			document.getElementsByName("sex")[0].checked=true;//设置默认选中
			document.getElementsByName("sex")[1].disabled=true;//设置禁用
			function t1(){
				var elements = document.getElementsByName("sex");//因为是单选框，有多个值，需要使用name来进行获取
				for(var i = 0;i<elements.length;i++){
					console.log(elements[i].checked+","+elements[i].value);//输出是否选中以及所对应的的value值
				}
			}		
			
		</script>
		<br />
		<input type="checkbox" name="hobby" value="1"/>足球
		<input type="checkbox" name="hobby" value="2"/>篮球
		<input type="checkbox" name="hobby" value="3"/>羽毛球
		<input type="button" value="测试" onclick="t2()"/>
		<script>
			document.getElementsByName("hobby")[1].checked=true;//设置默认选中
			document.getElementsByName("hobby")[1].disabled=true;//设置禁用
			function t2(){
				var elements = document.getElementsByName("hobby");//获取标签属性值
				for(var i = 0;i<elements.length;i++){
					console.log(elements[i].checked+","+elements[i].value);//输出多选框是否选中以及所对应的的value值
				}
			}
		</script>
		<br />
		<br />
		<select id="province">
			<option>---请选择---</option>
			<option value="0">---北京---</option>
			<option value="1">---上海---</option>
			<option value="2">---天津---</option>
		</select>
		<input type="button" value="测试" onclick="t3()"/>
		
		<script>
			function t3(){
				var element = document.getElementById("province");//根据id获取下拉列表
				var options = element.options;//获取下拉列表的属性值
				for(var i = 1;i<options.length;i++){
					console.log(options[i].selected+","+options[i].value);//输出下拉列表是否选中以及对应的value值
				}
			}
			document.getElementById("province").options[1].selected=true;//设置默认选中
			document.getElementById("province").options[3].disabled=true;//禁用某一下拉选项
			document.getElementById("province").disabled=true;//禁用下拉列表
		</script>
	</body>
表单校验
