js高级程序设计 笔记 --- 表单

一，基础知识

　　在html中，表单是form元素，而在js中，表单对应的是HTMLFormElement类型，继承自HTMLElement，其独特的属性和方法有（常见）：

　　　　action：接收请求的URL，

　　　　elements： 表单中所有控件的集合

　　　　length： 表单中控件的数量

　　　　method： 发送的http请求的类型。

　　　　name： 表单的名称。

　　　　reset（） ： 重置所有表单域。

　　　　submit（） ： 提交表单。

　　1，提交表单

　　　　input type=submit       button type=submit    input type=image    可以使用回车键来提交表单。

　　　　也可以使用：  form.submit() 来以编程式来提交表单。

　　2，重置表单

　　　　使用type= reset的input或者button都可以创建重置按钮。也可以通过js来重置 form.reset()

　　3，表单字段

　　　　可以使用原生的DOM方法来访问表单元素。此外，每个表单都有elements属性。可以使用name特性来访问它们。

　　　　表单字段共有的属性（除了fieldset元素）

　　　　　　disabled form  name readOnly  tabIndex  type  value

　　　　共有的表单字段方法：

　　　　　　focus（） 和 blur（）：

　　　　　　可以使用autofocus属性来在页面打开时自动的聚焦如此。

　　4，文本框脚本

　　　　input type=text  和 textarea：  输入的内容都保存在value内。

　　　　select事件：在选择了文本框中的文本时，就会触发select事件。

　　　　

　　5，自动切换焦点

h5约束验证API

　　1，required

　　2，输入类型： url  email  等

　　3，数值范围 ： min和max   可以使用setUp（）和setDown（）来修改。

　　4，pattern：正则校验

　　5，禁用验证 ：  设置novalidate属性，可以告诉表单不进行校验

　　

选择框脚本

　　select和option，有以下的属性和方法

　　　　add： 向控件中插入新的option元素

　　　　multiple： 布尔值，表示是否允许多选

　　　　options：控件所有option元素的HTMLCollection

　　　　remove（index）：移除给定位置的选项

　　　　selectIndex：基于0的选中项的索引，如果没有选中项则为-1，多选的话只保存第一个

　　　　size：选择框中可见的行数

　　添加新选项：1，创建option， select appendChild

　　　　　　　　2，使用option构造函数

　　　　　　　　3，使用select的add方法添加

　　移除选项：    1，removeChild（）

　　　　　　　　2，也可以使用remove（索引）

　　　　　　　　3，将对应的选项置为null

表单序列化：