JavaScript
一 ,表单的基础知识在HTML中,表单由form标签,在javascript中,表单对应HTMLFormElement类型,HTMLFormElement类型继承HTMLElement类型,所有它和其他的Element元素有相同的默认属性,同时它也有自己的属性和方法: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 特性。要取得form表单元素的方法有: var form=document.getElementById('form1'); //通过id来取得表单元素var firstForm=document.forms[0]; //通过document.forms来取得页面中的所有表单元素,通过索引值'0‘,取得第一个表单元素var form2=document.forms['form2']; //通过document.forms来取得页面中的所有表单元素,通过name值取得特定的表单元素提交表单:
以这种方式提交表单时,浏览器会在将请求发送给服务器之前触发 submit 事件。这样,有机会验证表单数据,并据以决定是否允许表单提交。阻止这个事件的默认行为就可以取消表单提交在JS中同样可以以编程的方式调用submit()方法来提交表单:
在重置表单时,所有表单字段都会恢复到页面刚加载完毕时的初始值用JS方法来重置表单:
表单字段:每个表单都有Element属性,该属性是表单中所有表单元素(字段)的集合。这个集合是一个有序列表,每个表单字段在element集合中出现的顺序,与在标记中出现的先后顺序相同,可以按位置和name值来访问他们。常见的表单字段有input,select,fieldset,要取得表单中的表单字段:
共有的表单字段属性:disabled:布尔值,表示当前字段是否被禁用。form:指向当前字段所属表单的指针;只读。name:当前字段的名称。readOnly:布尔值,表示当前字段是否只读。tabIndex:表示当前字段的切换(tab)序号。type:当前字段的类型,如'checkbox'、 'radio',等等。value:当前字段将被提交给服务器的值。对文件字段来说,这个属性是只读的,包含着文件在计算机中的路径除了 form 属性之外,可以通过 JavaScript 动态修改其他任何属性。能够动态修改表单字段属性,意味着我们可以在任何时候,以任何方式来动态操作表单。用户可能会重复单击表单的提交按钮。在涉及信用卡消费时,这就是个问题:因为会导致费用翻番。为此,最常见的解决方案,就是在第一次单击后就禁用提交按钮。只要侦听 submit 事件,并在该事件发生时禁用提交按钮即可 :
除了
共有的表单字段方法 :每个表单字段都有两个方法: focus()和 blur()。使用 focus()方法,可以将用户的注意力吸引到页面中的某个部位。例如,在页面加载完毕后,将焦点转移到表单中的第一个字段。
HTML5 为表单字段新增了一个 autofocus 属性。在支持这个属性的浏览器中,只要设置这个属性,不用 JavaScript 就能自动把焦点移动到相应字段。例如:与 focus()方法相对的是 blur()方法,它的作用是从元素中移走焦点:document.forms[0].elements[0].blur();change事件:对于和
取得选择的文本 :虽然通过 select 事件可以知道用户什么时候选择了文本,但仍然不知道用户选择了什么文本。HTML5 通过一些扩展方案解决了这个问题,以便更顺利地取得选择的文本。该规范采取的办法是添加两个属性: selectionStart 和 selectionEnd。
IE9+、 Firefox、 Safari、 Chrome 和 Opera 都支持这两个属性。 IE8 及之前版本不支持这两个属性,而是提供了另一种方案。 IE8 及更早的版本中有一个 document.selection 对象,其中保存着用户在整个文档范围内选择的文本信息
过滤输入:经常会要求用户在文本框中输入特定的数据,或者输入特定格式的数据。
以上代码实现对表单字段中输入的数据的控制,只允许输入数字想要屏蔽哪些非数字的键,而不像屏蔽哪些基本键和按下ctrl键的操作。自动切换焦点:使用 JavaScript 可以从多个方面增强表单字段的易用性。其中,最常见的一种方式就是在用户填写完当前字段时,自动将焦点切换到下一个字段。为增强易用性,同时加快数据输入,可以在前一个文本框中的字符达到最大数量后,自动将焦点切换到下一个文本框。比如对于下面的表单字段而言:
HTML5约束验证API为了在将表单提交到服务器之前验证数据,HTML5 新增了一些功能。必填字段:required,例子比如:type属性:'email'类型要求输入的文本必须符合电子邮件地址的模式,而'url'类型要求输入的文本必须符合 URL 的模式。pattern属性:这个属性的值是一个正则表达式,用于匹配文本框中的值。例子如:禁用验证:通过设置 novalidate 属性,可以告诉表单不进行验证。 例子如:
三,选择框脚本选择框是通过
移除选项:DOM 的 removeChild()方法,为其传入要移除的选项,如下面的例子所示:selectbox.removeChild(selectbox.options[0]); //移除第一个选项其次,可以使用选择框的 remove()方法 :selectbox.remove(0); //移除第一个选项最后一种方式,就是将相应选项设置为 null:selectbox.options[0] = null; //移除第一个选项要清除选择框中所有的项,需要迭代所有选项并逐个移除它们 :
这个函数每次只移除选择框中的第一个选项。由于移除第一个选项后,所有后续选项都会自动向上移动一个位置,因此重复移除第一个选项就可以移除所有选项了。移动和重排选项:如果为 appendChild()方法传入一个文档中已有的元素,那么就会先从该元素的父节点中移除它,再把它添加到指定的位置 :
表单序列化:表单序列化简单说就是将,各表单字段按名值对的形式进行url编码。表单序列化有以下规则:对表单字段的名称和值进行 URL 编码,使用和号(&)分隔。不发送禁用的表单字段。只发送勾选的复选框和单选按钮。不发送 type 为'reset'和'button'的按钮。多选选择框中的每个选中的值单独一个条目。在单击提交按钮提交表单的情况下,也会发送提交按钮;否则,不发送提交按钮。也包括 type为'image'的元素。