HTML表单

1.单选按钮 type="radio"

同一组的单选按钮name属性值必须一致，因为单选的排他性依靠的就是这个name

	<!-- 下面两个的name属性都是game 他们只能选出其中的一个 -->
	<input type="radio" name="sex" value="man">男
	<input type="radio" name="sex" value="women">女

设置默认选中：添加 checked 属性

	<input type="radio" name="sex" value="man" checked>男
	<input type="radio" name="sex" value="women">女

JS获取当前选中单选框的值

var radios = document.querySelectorAll('input[name=sex]')
	function getVal(){
		radios.forEach(item => {
   			if(item.checked){
        		console.log(item.value)
    		}
		})
}

2.复选按钮 type=“checkbox”

为同一组的按钮设定相同的name

<input type="checkbox" name="hobby" value="reading">看书
<input type="checkbox" name="hobby" value="swimming">游泳
<input type="checkbox" name="hobby" value="basketball">打球

设置默认选中：添加 checked 属性

<input type="checkbox" name="hobby" value="reading" checked>看书
<input type="checkbox" name="hobby" value="swimming">游泳
<input type="checkbox" name="hobby" value="basketball" checked>打球

JS获取当前选中复选框的值

	var checks = document.querySelectorAll('input[name=hobby]')
		function getVal(){
  	  		var  arr = []
   			checks.forEach(item => {
        		if(item.checked) {
            		arr.push(item.value)
        		}
    		})
    	console.log(arr)
	}

3.下拉菜单

	<select name="fruit">
	  <option value="apple">Apple</option>
	  <option value="banana">Banana</option>
	  <option value="pear">Pear</option>
	  <option value="orange">Orange</option>
	</select>

默认会选中第一个option，也可以自己设置默认选中的option
方法：在要选中的option标签中添加 selected 属性

	<select name="fruits" id="fruit">
	  <option value="apple">Apple</option>
	  <option value="banana">Banana</option>
	  <option value="pear" selected>Pear</option>
	  <option value="orange">Orange</option>
	</select>

JS获取下拉菜单的值，哪个option被选中，他的value值就是select的value值

	var select = document.querySelector('#fruit')
	console.log(select.value)

4.表单默认选中的注意点

	<input type="radio" name="sex" value="man" checked>男
	<input type="radio" name="sex" value="women">女

实际上标签内的checked/selected属性只是页面渲染的时候初始化内存而已，真正生效的是内存中对应的值

以单选按钮的性别为例，默认为"男"，此时你手动选中切换为"女"，Dom结构如下

	<input type="radio" name="sex" value="man" checked>男
	<input type="radio" name="sex" value="women">女

这说明，Dom里面标签展示的checked属性不会随着操作而改变，它永远都是页面加载时的样子。这也意味着，要判断一个单选/多选框被选中，查看Dom标签展示的相关属性是不准确的，它永远是页面初始化时候的样子(即中看不中用)

想要获取表单的选中状态，只能使用点语法（不推荐getAttribute）

	document.querySelector('input').checked;

表单

	<form action="http://121.199.29.84:5588/user/login"  method="POST" enctype="application/x-www-form-urlencoded">
	    头像:<input type="file" name="file"><br>
	    账号:<input type="text" maxlength="20"><br>
	    密码:<input type="password" name="" id=""><br>
	    性别:<label>
	         <input type="radio" value="female" name="gender" checked>女
	        </label>
	        <label> 
	         <input type="radio" value="male" name="gender">男
	         </label><br>
	    籍贯:<select name="sel" id="">
	        <option value="">江苏</option>
	        <option value="">北京</option>
	        <option value="" selected>山西</option>
	        <option value="">陕西</option>
	        <option value="">黑龙江</option>
	        </select><br>
	    爱好:<label><input type="checkbox" name="hobbies" value="basketball">篮球</label>
	        <label><input type="checkbox" name="hobbies" value="football">足球</label>
	        <label><input type="checkbox" name="hobbies" value="web" checked>上网</label>
	        <label><input type="checkbox" name="hobbies" value="learn">学习</label><br>
	    留言板:<textarea cols="30" rows="15"></textarea><br>
	    <input type="submit" value="登录" >
	</form>