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:当前字段将被提交给服务器的值。对文件字段来说,这个属性是只读的,包含着文件在计算机中的路径。
待续...