<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form action="">
<!-- 文本框 -->
<input type="text" id="a" class="b" name="user" value="用户名">
<!-- 单选框(有默认checked) -->
<input type="radio" name="sex" value="1" checked>男
<input type="radio" name="sex" value="0">女
<!-- 单选框(没有默认checked) -->
<input type="radio" name="fruit" value="1">苹果
<input type="radio" name="fruit" value="0">橘子
</form>
</body>
<script>
var oForm = document.getElementsByTagName('form')[0];
// 首先获取到form元素对象
console.log(oForm, typeof oForm);
// 通过以下三种方式可以获取到相应的表单元素(只测试文本框,其他类型一样)
// 1、id属性值(测试过class属性值不可以)
console.log(oForm.a);
// 2、name属性值
console.log(oForm.user);
// 3、elements[index/id]方法,通过索引或者id都可以获取到(只适用于表单内部元素)
console.log(oForm.elements[0]);
console.log(oForm.elements["a"]);
// 继续获取对应的value值
console.log(oForm.a.value)
console.log(oForm.user.value);
console.log(oForm.elements[0].value);
console.log(oForm.elements["a"].value);
// 注意:
// 1、单选框如果没有默认checked(选中状态),则获取到value值为空
console.log(oForm.fruit)
console.log(oForm.fruit.value);
// 2、如果有默认checked(选中状态),则可以获取到已选中的value值
console.log(oForm.sex)
console.log(oForm.sex.value);
// 3、单选框可以通过赋值原先对应的value值,设置选中状态
oForm.fruit.value = 1;
oForm.sex.value = 0;
// 用途:
// 1、更简便的获取表单数据传递给后端
// 2、相关信息表编辑修改前,使用for..in..循环自动回填已有数据,尤其是单选框选种状态
</script>
</html>
对应的结果如下: