value属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- value:设置或者获取表单元素的值，针对文本框，密码框，单选框，复选框，下拉框-->
<form action="" method="post">
用户名： <input type="text" name="uname" id="uname" /><br>
性别： <input type="radio" name="sex" value="man" />男
<input type="radio" name="sex" value="woman" checked />女<br>
<input type="button" id="btn1" value="设置文本框元素的值">
<input type="button" id="btn2" value="获取单选按钮选中的值">
</form>
<script>
var btn1=document.getElementById('btn1');
var btn2=document.getElementById('btn2');
var uname=document.getElementById('uname');
btn1.onclick=function(){
uname.value="hello";
}
btn2.onclick=function(){
//得到选中的按个按钮
var radioSex= document.getElementsByName('sex')[1];
console.log('选中的性别：'+radioSex.value);
}
</script>
</body>
</html>
![js---Dom(五)表单操作-LMLPHP]( "js---Dom(五)表单操作-LMLPHP")
checked属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- checked:设置或者获取表单元素的选中状态，如果元素被选中，则checked属性值为true,否则为false
，这个属性只能判断radio或checkbox的选中状态
-->
<form action="" method="post">
<input type="radio" name="sex" value="1">女
<input type="radio" name="sex" value="2">男
<!-- 如果button元素在表单中，默认点击它会提交表单,阻止它提交表单就加一个 type="button" -->
<button id="radio-btn" type="button">获取选中的性别</button>
</form>
<script>
var btn1 = document.getElementById('radio-btn');
//获取所有的radio
var sexs = document.getElementsByName('sex');
btn1.onclick = function() {
//循环所有的radio
for(var i = 0; i < sexs.length; i++) {
//判断当前的radio是否被选中
if(sexs[i].checked) {
console.log(sexs[i].value);
break;
}
}
}
</script>
</body>
</html>
![js---Dom(五)表单操作-LMLPHP]( "js---Dom(五)表单操作-LMLPHP")
selected属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- selected:设置或者获取表单元素的选中状态，如果元素被选中，则selected属性值为true,否则为false
，这个属性只能判断select的选中状态
-->
<form action="" method="post">
故乡：
<select id="city">
<option value="023">重庆</option>
<option value="021" selected>北京</option>
<option value="027">武汉</option>
<option value="020">上海</option>
</select>
<!-- 如果button元素在表单中，默认点击它会提交表单,阻止它提交表单就加一个 type="button" -->
<button id="radio-btn" type="button">获取选中的城市</button>
</form>
<script>
var btn1 = document.getElementById('radio-btn');
//获取所有的option
var options = document.getElementById('city').children;
btn1.onclick = function() {
//循环所有的opotion
for(var i = 0; i < options.length; i++) {
//判断当前的option是否被选中
if(options[i].selected) {
console.log("选中的城市："+options[i].value);
break;
}
}
}
</script>
</body>
</html>
![js---Dom(五)表单操作-LMLPHP]( "js---Dom(五)表单操作-LMLPHP")
disabled属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- disabled:设置或者获取表单元素的禁用，如果disabled为true，代表禁用元素，被禁用的元素不能触发任何事件，
disabled为false代表解除禁用，可以针对文本框，密码框，按钮等
-->
<form action="" method="post">
<input type="text" name="uname"/>
<!-- 如果button元素在表单中，默认点击它会提交表单,阻止它提交表单就加一个 type="button" -->
<button id="btn1" type="button">禁用文本框</button>
<button id="btn2" type="button">解禁文本框</button>
</form>
<script>
var btn1 = document.getElementById('btn1');
var btn12= document.getElementById('btn2');
//得到文本框
var uname= document.getElementsByName('uname')[0];
btn1.onclick=function(){
//true：禁用
uname.disabled=true;
}
btn2.onclick=function(){
//false:解除禁用
uname.disabled=false;
}
</script>
</body>
</html>
![js---Dom(五)表单操作-LMLPHP]( "js---Dom(五)表单操作-LMLPHP")