DOM操作表单

1. 获取表单元素

**方法：**通过form.name可以获取到相应的表单元素

<form>
<input type="text" name = "UserName" value="我是value">

//单选
<input type="radio" name = "sex" value = "男" >男
<input type="radio" name = "sex" value = "女" checked>女

//多选
<input type="checkbox" name= "hobby">吃饭
<input type="checkbox" name= "hobby">睡觉
<input type="checkbox" name= "hobby">打豆豆

//下来列表
<select name="selt">
	<option>1</option>
	<option>2</option>
	<option>3</option>
	<option>4</option>
</select>
</form>
var xForm = document.getEelementdByTagName("form");
console.log(form.user.value); -->我是value;

//单选按钮
console.log(form.sex);-->[input,input,value:"女"]
console.log(form.sex.value);-->女 //打印有checked属性的value值:

//复选按钮
console.log(form.hobby);--> [input, input, input, value: ""]

//下拉列表
console.log(form.selt); -->会把整个下拉列表都打印出来;

2. 表单事件

1. 提交事件（onsubmit）

<form action="">
    <input type="text" name="userName">
    <input type="submit">
    <input type="reset">
</form>

// JavaScript
var xFrom = document.getElementByTagName("form")[0];
//点击提交时判断是否为空，为空则不提交;
				return true：默认 允许提交
                return false：不允许提交
xForm.onsubmit = function(){
	if(xForm.userName.value == ""){
		alert("请输入");
		return false;
	}else{
		return true;
	}
}

2. 重置事件（onreset）

//是否重置
		return true : 默认 重置
        return false : 不重置
xForm.onreset = function(){
	var s = confirm("是否重置");//带选择的对话框;
	console.log(s);//有返回值，确定-->true  取消-->false
	if(s == true){
		return true;
	} else{
		return false;
	}
}

3. 获得/失去焦点事件（onfocus、onblur、onchange）

oFrom.onfocus():获取焦点事件;
oFrom.onblur():获取焦点事件;

//获得焦点时添加背景颜色
oForm.userName.onfocus = function () {
        this.style.background = "pink";
    }
//失去焦点时返回默认背景颜色
oFrom.userName.onblur = function(){
	this.style.background = "";
}
//失去焦点的时候，输入框中的值发生变的时候调用
oFrom.userName.onchange = function(){
	console.log(this.value);
}

3. 表单方法

1. oForm.submit();提交
2. oForm.reset();重置
3. input.focus();自动获取焦点的方法
4. input.blur();自动失去焦点的方法
5. input.select();默认选中方法