前端:JS/32/form对象(表单)(form对象的属性,方法和事件),受返回值影响的两个事件(onclick事件,onsubmit事件),获取表单的元素对象的三种方式,表单的提交和验证方法总结
form 对象(表单)一个<form>标记,就是一个<form>对象;1,form对象的属性name :表单的名称,主要用来让JS来控制表单;action :表单的数据处理程序(PHP文件);method :表单的提交方式,取值:GET(地址栏,默认,不安全),POST(邮寄,安全的)enctype :表单数据的编码方式;2,form对象的方法submit() :提交表单,
form 对象(表单)
一个<form>标记,就是一个<form>对象;
1,form对象的属性
name :表单的名称,主要用来让JS来控制表单;
action :表单的数据处理程序(PHP文件);
method :表单的提交方式,取值:GET(地址栏,默认,不安全),POST(邮寄,安全的)
enctype :表单数据的编码方式;
2,form对象的方法
submit() :提交表单,与<input type=“submit”/>功能一样;
reset() :重置表单,与重置按钮功能一样;
3,form对象的事件
onsubmit :当单击提交按钮时;并数据发往服务器之前发生,主要用来“在表单提交之前进行表单验证”
onreset :当单击重置按钮时;
事件返回值
1,事件的返回值,会影响对象的默认动作;
2,当且仅当事件返回false ,则终止默认动作的执行,如果事件返回true或空,则默认动作继续执行;
受返回值影响的事件只有两个:onclick事件,onsubmit事件;
例:onsubmit =“return checkForm()”//当checkForm()返回false时,onsubmit事件被终止,提交按钮的按顺序执行的一系列代码中,在onsubmit事件以后的过程也被跳过了,不再执行;
获取表单元素对象
1,通过网页元素的id来获取对象,例:document.getElementById(id);
2,通过HTML标签名来获取对象,例:parentNode.getElementByTagName(tagName);
3,通过表单的name属性来获取表单元素对象,表单中所有元素的起点都必须是document对象;
语法:document.formObj.elementObj
访问试是三层结构其中,formObj代表表单对象,elementObj代表表单元素对象;
例:var username_length = document.form2.username.value.length;
表单的提交和验证方法总结
1,使用submit 按钮,结合form标记的onsubmit事件来实现(最常用);
2,submit按钮,结合onclick事件,实现表单的验证和提交
例:<tiput type=“submit” value=“提交表单” οnclick=“return checkForm()” />
3,button按钮(普通按钮),结合submit()提交表单方法实现表单的验证和提交
input对象
一个<input>标记,就是一个input对象;
1,input对象的属性(以type=text为例)
name :表单元素的名称;
value :表单元素的值,用户输入的内容,可以通过该属性来获取;
size :表单的长度;
maxlength :表单元素的最大长度(最多可输的字符数);
disabled :禁用属性;
readonly :只读属性;
2,input对象的方法
focus() :获得焦点的方法(定位光标);
blur() :失去焦点的方法(移走光标);
select() :选中文本的方法;
3,input对象的事件
onfocus :当获得焦点时;
onblur :当失去焦点时;
@沉木
更多推荐
所有评论(0)