一,基础知识
在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
表单序列化: