js的form基础知识点

  

在HTML 中,表单是由<form>元素来表示的,而在JavaScript 中,表单对应的则是HTMLForm-
Element 类型。HTMLFormElement 继承了HTMLElement,因而与其他HTML 元素具有相同的默认属
性。不过,HTMLFormElement 也有它自己下列独有的属性和方法。

  •  acceptCharset:服务器能够处理的字符集;等价于HTML 中的accept-charset 特性。
  •  action:接受请求的URL;等价于HTML 中的action 特性。
  •  elements:表单中所有控件的集合(HTMLCollection)。
  •  enctype:请求的编码类型;等价于HTML 中的enctype 特性。
  •  length:表单中控件的数量。
  •  method:要发送的HTTP 请求类型,通常是"get"或"post";等价于HTML 的method 特性。
  •  name:表单的名称;等价于HTML 的name 特性。
  •  reset():将所有表单域重置为默认值。
  •  submit():提交表单。
  •  target:用于发送请求和接收响应的窗口名称;等价于HTML 的target 特性。

获取表单

1 //通过id方式
2 var form = document.getElementById("formID");
3 //通过document.forms可以获得页面所有的表单
4 var form1 = document.forms[1];
5 //获取表单的name来找到这个表单,不过这种方式容易出错,将来的浏览器可能不兼容
6 var form2 = document.forms['form2'];

提交表单

1 //js方式
2 var form = document.getElementById("formID");
3 //提交表单    
4 form.submit();

  点击按钮,或者回车就可以提交了

1 <!--表单方式-->
2 <input type="submit" value="submit button"/>
3 <!--按钮方式-->
4 <button type="submit">submit button</button>
5 <!--图像方式-->
6 <input type="image" src="image.png"/>

阻止表单提交

1 //阻止提交表单
2 EventUtil.addHandler('form',"submit",function(event){
3     //获得事件对象
4     event = EventUtil.getEvent(event);
5     //阻止默认事件
6     EventUtil.preventDefault(event);
7 })

获取表单字段

1 var form = document.getElementById("form1");
2 //获取表单中的第一个字段
3 var field = form.elements[0];
4 //获取name为用户名的字段
5 var field1 = form.elements['usename'];
6 //获取表单字段的个数
7 var formcount = form.elements.length;

表单字段的共有属性

  • disabled:布尔值,表示当前字段是否被禁用。
  • form:指向当前字段所属表单的指针;只读。
  • name:当前字段的名称。
  • readOnly:布尔值,表示当前字段是否只读。
  • tabIndex:表示当前字段的切换(tab)序号。
  • type:当前字段的类型,如"checkbox"、"radio",等等。
  • value:当前字段将被提交给服务器的值。对文件字段来说,这个属性是只读的,包含着文件在计算机中的路径。

 待续...

posted @ 2016-10-12 14:16  yerr1990  阅读(237)  评论(0编辑  收藏  举报