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.表单提交的方式:

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

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

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

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

重置表单的方式:

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

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

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

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

表单字段:

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

 var form = document.getElementById("form1");
//取得表单中的第一个字段
var field1 = form.elements[0];
//取得名为"textbox1"的字段
var field2 = form.elements["textbox1"];
//取得表单中包含的字段的数量
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 属性,可以告诉表单不进行验证。

表单序列化:

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

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

    一.基本用法 1.要使用<canvas>元素,必须先设置其 width 和 height 属性,指定可以绘图的区域大小.能通过 CSS 为该元素添加样式,如果不添加任何样式或者不绘制任何图 ...

  2. javascript高级程序设计学习笔记

    javascript高级程序设计,当枕头书已经好久了~zz  现在觉得自己在js的开发上遇到了一些瓶颈,归根究底还是基础太薄弱,所以重新刷一遍js高程希望有更新的认识. 一.javascript简介 ...

  3. JavaScript高级程序设计---学习笔记(一)

    今天,2017.3.17开始利用课余时间仔细学习<JavaScript高级程序设计>,将需要掌握的知识点记录下来,争取把书里的所有代码敲一遍并掌握. 1.标识符命名最好是第一个字母小写,剩 ...

  4. javascript 高级程序设计 学习笔记

    <!--<script> // 异步请求封装 IE6即以上浏览器 // ajax(url,fnSucc,selectID,fnFaild) //url 请求地址 //fnSucc 异 ...

  5. JavaScript高级程序设计学习笔记--表单脚本

    提交表单 用户单击提交按钮或图像按钮时,就会提交表单.使用<input>和<button>都可以定义提交按钮,只要将其type特性的值设置为"submit" ...

  6. JavaScript高级程序设计---学习笔记(三)

    函数表达式 定义函数的方式有两种:一种是函数声明,另一种是函数表达式. 关于函数声明,它的一个重要特征就是函数声明提升,意思是在执行代码之前会先读取函数声明所以可以把函数声明放在调用它的语句后面. 而 ...

  7. 《机器学习实战》学习笔记第十四章 —— 利用SVD简化数据

    相关博客: 吴恩达机器学习笔记(八) —— 降维与主成分分析法(PCA) <机器学习实战>学习笔记第十三章 —— 利用PCA来简化数据 奇异值分解(SVD)原理与在降维中的应用 机器学习( ...

  8. JavaScript高级程序设计---学习笔记(四)

    1.全局变量不能通过delete操作符删除,而直接在window对象上定义的属性可以. var age = 29; window.color = "red"; delete age ...

  9. JavaScript高级程序设计学习笔记第四章--变量、作用域和内存问题

    1.变量可能包含两种不同数据类型的值:基本类型值和引用类型值. 基本类型值指的是简单的数据段,而引用类型值指那些可能由多个值构成的对象. 2.变量复制 如果从一个变量向另一个变量复制基本类型的值,会在 ...

随机推荐

  1. linux程序设计——网络信息(第十五章)

    15.3    网络信息 当眼下为止,客户和server程序一直是吧地址和port号编译到它们自己的内部. 对于一个更通用的server和客户程序来说.能够通过网络信息函数来决定应该使用的地址和por ...

  2. 多文档自己主动文摘:Multi-Document Summarization,MDS

  3. share初始化

    要看懂share先看与map的交互以及跨地图的交互 share初始化 void Share::ShareInit(I_DataLayer* data_layer) { // 加载xls表 if(!Lo ...

  4. Firefox与chrome同步书签

    1. 导出书签,保存为bookmarks.html 2. chrome导入即可

  5. android菜鸟学习笔记4----android项目结构

    src: 应用程序源代码存放目录 gen: 自动生成的目录,目录中存放所有由Android开发工具自动生成的文件. 目录中最重要的就是R.java文件. 这个文件由Android开发工具自动产生的.A ...

  6. TCP/UDP server

    Simple: Sample TCP/UDP server https://msdn.microsoft.com/en-us/library/aa231754(v=vs.60).aspx Simple ...

  7. 详解Vue 实例中的生命周期钩子

    Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑.数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻 ...

  8. 模型层的Meta选项详解

    一 . 模型层的Meta选项详解 Django模型类的Meta是一个内部类,它用于定义一些Django模型类的行为特性.便用方法及参数解释如下 : class Book(models.Model): ...

  9. 微信公众号验证TOKEN

    服务端验证微信token header('Content-type:text'); define("TOKEN", "weixin"); $signature ...

  10. WebsiteCrawler

    看到网上不少py的爬虫功能极强大,可惜对py了解的不多,以前尝试过使用c# WebHttpRequert类来读取网站的html页面源码,然后通过正则表达式筛选出想要的结果,但现在的网站中,多数使用js ...