lwz blog

# 表单操作

# 表单Form

# 获得Form对象引用

  1. 通过直接定位的方式来获取
document.getElementById();
document.getElementsByName();
document.getElementsByTagName();
  1. 通过集合的方式来获取引用
document.forms[]
document.forms["name"]
document.forms.name
  1. 通过name直接获取（只适用于表单）
document.name

# Form 对象属性

属性 描述
action 接收请求的URL
elements 表单中的所有控件元素集合
length 表单控件的个数
enctype 编码类型 例：enctype=“multipart/form-data”
name 表单元素名称

# Form 对象方法

方法 描述
reset() 把表单的所有输入元素重置为它们的默认值。
submit() 提交表单。

# Form 对象事件

事件 描述
onreset 在重置表单元素之前调用。
onsubmit 在提交表单之前调用。

# 表单元素

# 获得表单元素的引用

  1. 直接获取
document.getElementById();
document.getElementsByName();
document.getElementsByTagName();
  1. 通过集合来获取
表单对象.elements 获得表单里面所有元素的集合
表单对象.elements[下标]
表单对象.elements["name"]
表单对象.elements.name
  1. 直接通过name的形式
表单对象.name

# 表单控件的属性

属性 描述
value 获取和设置值
disabled 获取或设置表单控件是否禁用值为true或 false
type 读取表单控件的类型
form 所在表单元素对象
readOnly 控件只读属性 Boolean 不能更改只能复制和读取
name 获取与设置name字段名

# 表单控件的事件

事件 描述
onblur 当失去焦点的时候
onfocus 当获取焦点的时候
onchange 当内容改变并失去焦点的时候
oninput 在用户输入时触发

# 表单控件的方法

方法 描述
focus() 获得焦点
blur() 失去焦点
select() 选择文本控件中的所有文本内容

# select控件

# select控件属性

属性 描述
length 选项的个数
size 取得size属性
multiple 是否是多选 Boolean类型
options 所有option选项
selectedIndex 设置或返回的选中索引值
selected 设置或返回选项的选中状态

# option控件属性

属性 描述
index 选项在options的索引值
selected 当前selected 是否选中 Boolean
text 文本内容
value value属性的值

注：标准DOM中如果没有value属性，返回text

# 单选、多选控件

属性 描述
checked 返回或者设置单选的选中状态，true选中 false 未选中
value 属性 获取选中的值，必须先判断选中状态。

← ajax的封装案例 →