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事件来实现(最常用);

1

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 :当失去焦点时;

@沉木

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐