JavaScript高级程序设计学习笔记第十四章--表单

1.在 HTML 中,表单是由<form>元素来表示的,而在 JavaScript 中,表单对应的则是 HTMLFormElement 类型。 HTMLFormElement 继承了 HTMLElement,因而与其他 HTML 元素具有相同的默认属性。

2.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 特性。

3.获取表单引用的方式:

第一种:为其添加 id 特性,然后使用 getElementById()方法找到它。
第二种:通过 document.forms 可以取得页面中所有的表单。在这个集合中,可以通过数值索引或name 值来取得特定的表单。

可以同时为表单指定 id 和 name 属性,但它们的值不一定相同。

4.表单提交的方式:

  • 定义提交按钮:
1 <!-- 通用提交按钮 -->
2 <input type="submit" value="Submit Form">
3 <!-- 自定义提交按钮 -->
4 <button type="submit">Submit Form</button>
5 <!-- 图像按钮 -->
6 <input type="image" src="graphic.gif">

以定义提交按钮的方式提交表单会触发submit事件,可以选择在合适的时候取消事件。

  • 调用submit()方法:
1 var form = document.getElementById("myForm");
2 //提交表单
3 form.submit();

调用submit()方法提交表单不会书法submit()事件。

重置表单的方式:

  • 创建重置按钮:
1 <!-- 通用重置按钮 -->
2 <input type="reset" value="Reset Form">
3 <!-- 自定义重置按钮 -->
4 <button type="reset">Reset Form</button>

创建重置按钮会触发reset事件。

  • 调用reset()方法:
1 var form = document.getElementById("myForm");
2 //重置表单
3 form.reset();

调用reset()同样触发reset事件。

表单字段:

每个表单都有elements 属性,该属性是表单中所有表单元素(字段)的集合。这个 elements 集合是一个有序列表,其中包含着表单中的所有字段,例如<input>、 <textarea>、 <button>和<fieldset>。每个表单字段在 elements 集合中的顺序,与它们出现在标记中的顺序相同,可以按照位置和 name 特性来访问它们。例如:

1 var form = document.getElementById("form1");
2 //取得表单中的第一个字段
3 var field1 = form.elements[0];
4 //取得名为"textbox1"的字段
5 var field2 = form.elements["textbox1"];
6 //取得表单中包含的字段的数量
7 var fieldCount = form.elements.length;

共有的表单字段属性:

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

共有的表单字段方法:

  • focus():用于将浏览器的焦点设置到表单字段,即激活表单字段,使其可以响应键盘事件。
  • blur():从元素中移走焦点。在调用 blur()方法时,并不会把焦点转移到某个特定的元素上;仅仅是将焦点从调用这个方法的元素上面移走而已。

共有的表单字段事件:

  • blur:当前字段失去焦点时触发。
  • change:对于<input>和<textarea>元素,在它们失去焦点且 value 值改变时触发;对于<select>元素,在其选项改变时触发。经常用于验证用户在字段中输入的数据。
  • focus:当前字段获得焦点时触发。

文本框脚本:

两种方式来表现文本框:一种是使用<input>元素的单行文本框,另一种是使用<textarea>的多行文本框。

select():用于选择文本框中的所有文本。这个方法不接受参数,可以被任何时候调用。select()方法触发了select事件。

取得选择的文本:selectionStart 和 selectionEnd属性,

选择部分文本:setSelectionRange()方法,这个方法接收两个参数:要选择的第一个字符的索引和要选择的最后一个字符之后的字符的索引。

HTML5 约束验证API:

必填属性:在表单字段中指定了 required 属性,例如: <input type="text" name="username" required>

type属性新增加的值:"email"和"url",浏览器会为其增加验证机制。

数值的范围:"number"、 "range"、 "datetime"、 "datetime-local"、 "date"、 "month"、 "week",还有"time"。可以指定 min 属性(最小的可能值)、 max 属性(最大的可能值)和 step 属性(从 min 到 max 的两个刻度间的差值),stepUp()和 stepDown()接受一个参数,就是要在当前值基础上加上或减去的数值。

新增的pattern属性:这个属性的值是一个正则表达式,用于匹配文本框中的值。

检测有效性:使用 checkValidity()方法可以检测表单中的某个字段是否有效。validity 属性则会告诉你为什么字段有效或无效。

禁用验证:设置 novalidate 属性,可以告诉表单不进行验证。

表单序列化:

时间: 2024-12-28 01:32:52

JavaScript高级程序设计学习笔记第十四章--表单的相关文章

JavaScript高级程序设计学习笔记第十五章--使用Canvas绘图

一.基本用法 1.要使用<canvas>元素,必须先设置其 width 和 height 属性,指定可以绘图的区域大小.能通过 CSS 为该元素添加样式,如果不添加任何样式或者不绘制任何图形,在页面中是看不到该元素的. 2.要在这块画布(canvas)上绘图,需要取得绘图上下文.而取得绘图上下文对象的引用,需要调用getContext()方法并传入上下文的名字.在使用<canvas>元素之前,首先要检测 getContext()方法是否存在,这一步非常重要.检测可以用如下方法进行:

《javascript高级程序设计》笔记(十四)

表单脚本 (一)表单的基础知识 1.提交表单 使用<input>或<button>将其type特性设置为submit后便可定义提交按钮,图片按钮通过将<input>的type特性值设置为"image"来定义. 使用preventDefault()方法阻止表单提交.一般在表单数据无效而不能发送给服务器时可以这么做. //取得事件对象 event = EventUtil.getEvent(event); //阻止默认事件 EventUtil.preven

JavaScript高级程序设计学习笔记--引用类型

Object类型 对象字面量表示法: var person={ name:"Nicholas", age:29, 5:true }; 这人例子会创建一个对象,包含三个属性:name,age和5.但这里的数值属性名会自动转换为字符串. 对象属性的访问:点表示法和方括号语法 alert(person["name"]); // "Nicholas" alert(person.name); // "Nicholas" 从功能上看,这两

javascript高级程序设计 第十四章--表单脚本

javascript高级程序设计 第十四章--表单脚本 在HTML中表单由<form>元素表示,在js中表单对应的是HTMLFormElement类型,这个类型也有很多属性和方法:取得表单元素的引用还是为它添加id特性,用DOM操作来获取表单元素:提交表单:把<input>或<button>元素的type特性设置为"submit",图像按钮把<input>元素的type特性设置为"image",也可以调用submit(

JavaScript高级程序设计学习笔记--基本概念

1.语句 ECMAScript中的语句以一个分号结尾:如果省略分号,则由解析器确定语句的结尾,如下例所示: var sum=a+b //即使没有分号也是有效的语句--推荐 var diff=a-b; //有效的语句--推荐 虽然语句结尾的分号不是必需的,但我们建议任何时候都不要省略它.两个原因:1.加上分号可以避免很多错误 2.加上分号也会在某些情况下增进代码的性能,因为这样解析器就不必再花时间 推测应该在哪里插入分号了. 2.变量 var message="hi"; 像这样初始化变量

JavaScript高级程序设计学习笔记--错误处理与调试

try-catch语句 只要代码中包含finally子句,则无论try或catch语句块中包含什么代码--甚至return语句,都不会阻止finally子句的执行,来看下面这个函数: function testFinally(){ try{ return 2; }catch(error){ return 1; }finally{ return 0; } } 调用这个函数会返回0(PS:但我实际执行的时候会先返回0,再返回2) 抛出错误 与try-catch语句相配的还有一个throw操作符,用于

JavaScript高级程序设计学习笔记--面向对象程序设计

工厂模式 虽然Object构造函数或对象字面量都可以用来创建单个对象,但这些方式有个明显的缺点:使用同一个接口创建很多对象,会产生大量的重复代码.为解决这个问题,人们开始使用 工厂模式的一种变体. function createPerson(name,age,job){ var o=new Object(); o.name=name; o.age=age; o.job=job; o.sayName=function(){ alert(this.name); }; return o; } var

Javascript高级程序设计学习笔记

3. 基本概念 基本数据类型:Undefined,Null,Boolean,Number,String. 复杂数据类型:Object. 3.6 语句 switch比较值时用的是全等运算符 “===” ,因此不会进行类型转换.例如 “10” 不等于10. 3.7 函数 ECMAScript函数不介意传递进来多少个参数,也不在乎参数的类型.即使定义的函数只接受两个参数,在调用的时候也可以传递任意多个或者0个.因为ECMAScript的参数在内部是用一个数组表示的,在函数体内部可以通过argument

JavaScript高级程序设计学习笔记--高级技巧

惰性载入函数 因为浏览器之间行为的差异,多数JavaScript代码包含了大量的if语句,将执行引导到正确的代码中,看看下面来自上一章的createXHR()函数. function createXHR(){ if (typeof XMLHttpRequest != "undefined"){ return new XMLHttpRequest(); } else if (typeof ActiveXObject != "undefined"){ if (typeo