欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

JavaScript对form表单内容进行操作

程序员文章站 2022-03-08 19:25:40
...
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input id="ji" />
		<input type="button"  value="提交" onclick="d()"/>
		<input type="password" id="password"/>
		<input type="button"  value="提交" onclick="d1()"/>
		<textarea id="ta"></textarea>
		<input type="button"  value="提交" onclick="d2()"/>
		<input type="hidden" id="t"/>
		<input type="button"  value="提交" onclick="d3()"/>
		<script>
			/*文本框*/
			document.getElementById("ji").focus();
			function d(){
				var element = document.getElementById("ji");
				console.log(element.value) ;
				element.value = "jim";
				element.readOnly = true;
				element.disabled = true;
			}
			/*密码框*/
			document.getElementById("password").focus();
			function d1(){
				var element = document.getElementById("password");
				console.log(element.value) ;
				element.value = "hao";
				element.readOnly = true;/*只读，不可编辑，可以在Sevelet获取*/
				element.disabled = true;/*不可编辑，不可以在Sevelet获取*/
			}
			/*文本域*/
			document.getElementById("ta").focus();
			function d2(){
				var element = document.getElementById("ta");
				console.log(element.value) ;
				element.value = "hao";
				element.readOnly = true;
				element.disabled = true;
			}
			/*隐藏框，且没有focus()，与readOnly方法*/
			function d3(){
				var element = document.getElementById("t");
				console.log(element.value) ;
				element.value = "hao";
			}
		</script>
		<!--单选框-->
		<input type="radio" name="sex"  value="0"/>女
		<input type="radio" name="sex"  value="1"/>男
		<input type="button" value="提交" onclick="t1()"/>
		<script>
			function t1(){
				var elements = document.getElementsByName("sex");/*多个用复数，下同*/
				for(var i=0;i<elements.length;i++){
					var element = elements[i];
					console.log(element.checked+","+element.value);
				}
			}
			document.getElementsByName("sex")[1].checked = true;
			document.getElementsByName("sex")[0].disabled = true;
		</script>
		<!--复选框-->
		<input type="checkbox" name="hobby"  value="0"/>篮球
		<input type="checkbox" name="hobby"  value="1"/>足球
		<input type="checkbox" name="hobby"  value="2"/>乒乓球
		<input type="button" value="提交" onclick="t2()"/>
		<script>
			function t2(){
				var elements = document.getElementsByName("hobby");
				for(var i=0;i<elements.length;i++){
					var element = elements[i];
					console.log(element.checked+","+element.value);
				}
			}
			document.getElementsByName("hobby")[1].checked = true;
			document.getElementsByName("hobby")[0].disabled = true;
		</script>
                <!--下拉框-->
		<select id="province">
			<option value="">--请选择--</option>
			<option value="1">河南省</option>
			<option value="2">河北省</option>
			<option value="3">湖北省</option>
		</select>
		<input type="button" value="提交" onclick="t3()"/>
		<script>
			function t3(){
				var element = document.getElementById("province");
				var options = element.options;
				for(var i=0;i<options.length;i++){
					var option = options[i];
					console.log(option.selected+","+option.value);
				}
			}
			document.getElementById("province").options[2].selected = true;
			document.getElementById("province").options[1].disabled = true;
		</script>
		</body>
</html>

 

上一篇： bad interpreter: No such file or directory

下一篇： 自然语言处理库——TextBlob

推荐阅读