在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 特性。

获取表单

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

提交表单

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

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

 <!--表单方式-->
<input type="submit" value="submit button"/>
<!--按钮方式-->
<button type="submit">submit button</button>
<!--图像方式-->
<input type="image" src="data:image.png"/>

阻止表单提交

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

获取表单字段

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

表单字段的共有属性

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

待续...

js的form基础知识点的更多相关文章

  1. 小程序基础知识点讲解-WXML + WXSS + JS,生命周期

    小程序基础 小程序官方地址,小程序开发者工具,点击此处下载.在微信小程序中有一个配置文件project.config.json,此文件可以让开发者在不同设备中进行开发. 微信小程序共支持5种文件,wx ...

  2. js基础知识点收集

    js基础知识点收集 js常用基本类型 function show(x) { console.log(typeof(x)); // undefined console.log(typeof(10)); ...

  3. fastclick 源码注解及一些基础知识点

    在移动端,网页上的点击穿透问题导致了非常糟糕的用户体验.那么该如何解决这个问题呢? 问题产生的原因 移动端浏览器的点击事件存在300ms的延迟执行,这个延迟是由于移动端需要通过在这个时间段用户是否两次 ...

  4. CSS 基础知识点 样式 选择器 伪类

    CSS 基础知识点汇集 版权声明:这篇博客是别人写的,大神博客地址 : https://www.cnblogs.com/Mtime/p/5184685.html 1.CSS 简介 CSS 指层叠样式表 ...

  5. .NET基础知识点

    .NET基础知识点   l  .Net平台  .Net FrameWork框架   l  .Net FrameWork框架提供了一个稳定的运行环境,:来保障我们.Net平台正常的运转   l  两种交 ...

  6. JavaScript基础知识点

    本书目录 第一章:  JavaScript语言基础 第二章:  JavaScript内置对象第三章:  窗口window对象第四章:  文档document对象第五章:  表单form对象第六章:   ...

  7. TypeScript 基础知识点整理

    一.TypeScript的特点 1.支持ES6规范 2.强大的IDE支持(集成开发环境) 允许为变量指定类型,减少你在开发阶段犯错误的几率. 语法提示,在IDE编写代码时,它会根据你所处的上下文把你能 ...

  8. 基础知识点 关于 prototype __proto__

    基础知识点 关于 prototype  __proto__ 供js新手参考 JavaScript 的一些基础知识点: 在 JavaScript 中,所有对象 o 都拥有一个隐藏的原型对象(在 Fire ...

  9. 实现同时提交多个form(基础方法) 收集

    实现同时提交多个form(基础方法) 收集 分类: 1.2-JSP 1.3-J2EE 1.1J2se 1.0-Java相关2011-12-01 20:59 1644人阅读 评论(0) 收藏 举报 bu ...

随机推荐

  1. jquery下常用正则表达式整理(可直接粘贴使用)

    与正则表达式做比较的方法 var _val = '1234'; var _ev = /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z] ...

  2. 这些年正Android - 身在他乡

    “从不敢想到想去做到,做到我想的,事实证明我并不像他们想象的那样脆弱.我只是需要一盏灯,一架钢琴,一支麦克风.曾经想象过做一名医生救死扶伤,也曾想过做律师,做记者,做奥运冠军,但是都没有结果.因为我最 ...

  3. 《开源安全运维平台OSSIM最佳实践》

    <开源安全运维平台OSSIM最佳实践> 经多年潜心研究开源技术,历时三年创作的<开源安全运维平台OSSIM最佳实践>一书即将出版.该书用80多万字记录了,作者10多年的IT行业 ...

  4. iOS学习之代码块(Block)

    代码块(Block) (1)主要作用:将一段代码保存起来,在需要的地方调用即可. (2)全局变量在代码块中的使用: 全局变量可以在代码块中使用,同时也可以被改变,代码片段如下: ;//注意:全局变量 ...

  5. String类常用方法

    1.String类的特点,字符串一旦被初始化就不会被改变. 2.String对象定义的两种方式 ①String s = "affdf";这种定义方式是在字符串常量池中创建一个Str ...

  6. cucumber:环境安装

    1.安装RubyInstallerhttp://rubyinstaller.org/downloads/注意:安装目录结构不要太深安装完成后在命令行运行: ruby –v 可以查看是否安装成功2.安装 ...

  7. vs签入签出--TFS进行源代码管理

    工作项是项目管理的基本元素.工作项说明了要做什么事(例如任务),出了什么问题(例如Bug),除此之外,我们还需要将程序一行一行地写出来,TFS的源代码管理控制系统,就能帮助我们管理这一行行的代码,一个 ...

  8. 浅析tomcat nio 配置

    [尊重原创文章摘自:http://blog.csdn.net/yaerfeng/article/details/7679740] tomcat的运行模式有3种.修改他们的运行模式.3种模式的运行是否成 ...

  9. 过渡transitioin

    一,什么是过渡(transition)? 1,transition 允许 CSS 元素的属性值在一定的时间区间内平滑地过渡. 2,可以在不使用 Flash 动画或 JavaScript 的情况下,在元 ...

  10. Ubuntu 14.10安装SecureCRT 7.3(转)

    原文 :http://blog.csdn.net/chszs/article/details/40623169 1.软件准备 Ubuntu14.04 x64 下载SecureCRT7.3的版本:scr ...