JavaScript的form表单操作

最新推荐文章于 2024-04-20 13:50:15 发布

liulu璐

最新推荐文章于 2024-04-20 13:50:15 发布

阅读量134

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_43566612/article/details/107424980

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="1.css" />
	</head>
	<body>
		<form action="https://www.baidu.com/s">
			<input type="password" id="password" />
			<input type="text" id="name" />
			<textarea id="summmy"></textarea>
			<input type="hidden" id="qbj" />
			<input type="button" value="搜索" onclick="test1()" />
			<input type="button" value="搜索" onclick="test()" />
		</form>

		<script type="text/javascript">
			
			
			/* 文本框 */
			document.getElementById("name").focus();/* 光标焦点选定 */
			function test() {
				var element = document.getElementById("name");
				console.log(element.value);
				element.value = "tom";
				element.readOnly = true;
				element.disable = true;
			}


			/* 密码框 */
			document.getElementById("password").focus();
			function test() {
				var element = document.getElementById("password");
				console.log(element.value);
				element.value = "tom";
				element.readOnly = true;
				element.disable = true;
			}
			/* 隐藏框 */
			/* 	无readOnly    focus */
			function test1() {
				var element = document.getElementById("password");
				console.log(element.value);
				element.value = "jim";
                        element.disable = true;
			}
			/* 文本域 */
			document.getElementById("summmy").focus();

			function test() {
				var element = document.getElementById("summmy");
				console.log(element.value);
				element.value = "tom";
				element.readOnly = true;
				element.disabled = true;
			}
			
			
		</script>

		<!-- 单选框 -->
		<form>
			<input type="radio" name="sex" value="0" />男
			<input type="radio" name="sex" value="1" />女
			<input type="button" value="按钮" onclick="test3()" />
		</form>
		<script type="text/javascript">
			function test3() {
				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")[0].checked = true;
			document.getElementsByName("sex")[1].disabled = true;
		</script>


		<!-- 复选框 -->
		<form>
			<input type="checkbox" name="ball" value="0" />篮球
			<input type="checkbox" name="ball" value="1" />足球
			<input type="checkbox" name="ball" value="2" />乒乓球
			<input type="button" value="按钮" onclick="test4()" />
		</form>
		<script type="text/javascript">
			function test4() {
				var elements = document.getElementsByName("ball");
				for (var i = 0; i < elements.length; i++) {
					var element = elements[i];
					console.log(element.checked + "," + element.value);
				}
			}
			document.getElementsByName("ball")[0].checked = true;
			document.getElementsByName("ball")[1].disabled = true;
		</script>



		<!-- 下拉列表 -->
		<select id="province">
			<option value="">--请选择--</option>
			<option value="001">--北京市--</option>
			<option value="002">--天津市--</option>
			<option value="003">--山西省--</option>
			<option value="004">--河南省--</option>
		</select>
		<input type="button" value="按钮" onclick="test5()" />
		<script type="text/javascript">
			function test5() {
				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[1].selected = true;
			document.getElementById("province").disabled = true;
		</script>

	</body>
</html>

liulu璐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript的form表单操作

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="1.css" /> </head> <body> <form action="https://www.baidu.com/s"> &l.
复制链接

扫一扫