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. 表单方法
- oForm.submit();提交
- oForm.reset();重置
- input.focus();自动获取焦点的方法
- input.blur();自动失去焦点的方法
- input.select();默认选中方法