DOM表单操作
1.value属性
value - 设置或返回表单字段的值。
<body>
姓名：<input type="text" id="user-name">
<button id="text-btn">设置文本输入框内容</button>
<script>
// 设置或获取文本框的value值
var userName = document.getElementById("user-name");
var textBtn = document.getElementById("text-btn");
textBtn.onclick = function () {
// 设置value值
userName.value = "ande";
// 获取value值
console.log(userName.value);
};
</script>
</body>
2.checked属性
checked - 作用于表单中的checkbox和radio，用于设置或判断表单的当前状态。
<body>
<input type="radio" class="sex" value="1">女
<input type="radio" class="sex" value="2">男
<button id="radio-btn">获取选中的性别</button>
<script>
// 获取单选框的value值
var radio = document.getElementsByClassName("sex");
// 1.设置“男”被选中
for (var i = 0; i < radio.length; i++) {
if(radio[i].value==="2") {
// checked设置性别“男”被选中
radio[i].checked = true;
}
}
// 2.获取被选中的性别
var sexBtn = document.getElementById("radio-btn");
sexBtn.onclick = function () {
for (var i = 0; i < radio.length; i++) {
// checked判断是否处于选中状态
if (radio[i].checked) {
console.log("选中的性别：" + radio[i].value);
}
}
};
</script>
</body>
3.selected属性
selected - 作用于表单中的select，用于设置或返回选项的selected属性的值。
<body>
故乡：<select id="city">
<option value="023">重庆</option>
<option value="021" selected>北京</option>
<option value="027">武汉</option>
<option value="020">上海</option>
</select>
<button id="select-btn">获取选中的城市</button>
<script>
// 获取选中城市的value值
var city = document.getElementById("city");
// 1.设置“武汉”被选中
for (var i = 0; i < city.children.length; i++) {
if (city.children[i].value === "027") {
// selected设置城市“武汉”被选中
city.children[i].selected = true;
}
}
// 2.获取被选中的城市
var cityBtn = document.getElementById("select-btn");
cityBtn.onclick = function () {
for (var i = 0; i < city.children.length; i++) {
// selected判断哪个城市被选中
if (city.children[i].selected) {
console.log("选中的城市：" + city.children[i].value);
}
}
}
</script>
</body>
4.disabled属性
disabled 属性可设置或返回是否应禁用文本框。
被禁用的 input 元素既不可用，也不可点击。可以设置 disabled 属性，直到满足某些其他的条件为止（比如选择了一个复选框等等）。
<body>
<input type="radio"> 男
<input type="radio" id="sex"> 女
<input type="radio"> 未知
<script>
var sex = document.getElementById("sex");
// 设置性别“女”不能被选中
sex.disabled = true;
// 获取性别“女”的状态
console.log(sex.disabled)
</script>
</body>
***加粗样式***注意：disabled属性也可以用于button标签。
5.表单事件操作
onsubmit() 作用于表单上面，当表单提交时触发。
onreset() 作用于表单上面，当表单重置时触发。
<body>
<form action="http://www.baidu.com" id="form">
<input type="text" name="username" placeholder="请输入用户名..."> <br>
<input type="password" name="password" placeholder="请输入密码...">
<br>
</form>
<button id="submit">提交数据</button>
<button id="reset">重置数据</button>
<script>
var form = document.getElementById("form");
// 提交数据
var submit = document.getElementById("submit");
submit.onclick = function () {
form.submit();
};
// 重置数据
var reset = document.getElementById("reset");
reset.onclick = function () {
form.reset();
};
</script>
</body>