【html】表单元素

最新推荐文章于 2024-11-11 19:29:13 发布

银色徽章

最新推荐文章于 2024-11-11 19:29:13 发布

阅读量58

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_43854567/article/details/130194288

版权

常用的表单元素：

输入框
单选框
复选框
密码框
下拉框
文本域

表单元素通用属性
name value

输入框、单选框、复选框、密码框通过input标签的type属性及进行选择设置，单元框和复选框通过相同的name属性进行绑定，而下拉框通过select标签内的option标签绑定，option可以通过加入selected属性进行预选择，单选框用checked进行预选择

<form action="">
<!--输入框-->
<input type='text' name = 'input1' value = 'input1'><br>
<input type='radio' name = 'sex' value = 'man'>男
<input type='radio' name = 'sex' value = 'women'>女<br>
<!--复选框-->
<input type='checkbox' name = 'instrest' value = ''>看电视
<input type='checkbox' name = 'instrest' value = ''>打篮球
<input type='checkbox' name = 'instrest' value = ''>听音乐
<!--进行预选-->
<input type='checkbox' checked name = 'instrest' value = ''>学习<br>

<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

获取表单元素的值

https://blog.csdn.net/m0_46547715/article/details/121641621

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript">
         function func(){
         	//获取文本框，密码框的内容使用document.表单name.元素name.value
         	var txt=document.myform.txt.value;
         	var pwd=document.myform.pwd.value;
         	console.log(txt);
         	console.log(pwd);
         	//获取单选框，复选框的值使用document.getElementsByName('');可以获得一个数组了
         	var rad = document.getElementsByName('ra');
         	for(var i=0;i<rad.length;i++){
         		if(rad[i].checked==true){
         			console.log(rad[i].value);
         			console.log(rad[i].nextSibling.nodeValue);
         		}
         	}
         	var chec = document.getElementsByName('check');
         	for(var i=0;i<chec.length;i++){
         		if(chec[i].checked==true){
         			console.log(chec[i].value);
         			console.log(chec[i].nextSibling.nodeValue);
         		}
         	}
         	//获取下拉列表的值和文本
         	var select = document.getElementById("s1");
         	var value = select.value;
         	console.log(value);
         	var option = select.options;
         	var index = select.selectedIndex;
         	var text = select.options[index].text;
         	console.log(text);
         }
	</script>
</head>
<body>
<form name="myform">
	<!--文本框&&密码框-->
	用户名：<input id="cd" type="text" name="txt"/><br/>
	密码：<input type="password" name="pwd"/></br>
	<!--单选框&&复选框-->
	<input type="radio" name="ra" value="1" />姐姐
	<input type="radio" name="ra" value="2" />爸爸
	<input type="radio" name="ra" value="3" />妈妈<br/>
	<input type="checkbox" name="check" value="1" />牛奶
	<input type="checkbox" name="check" value="2" />鸡蛋
	<input type="checkbox" name="check" value="3" />面包<br/>
	<!--下拉列表-->
	<select id="s1">
		<option value="1">上海</option>
		<option value="2">广东</option>
		<option value="3">北京</option>
	</select>
	<input type="button" value="提交" onclick="func()" />
</form>
</body>
</html>