首先,我想说讲表单这节的老师讲的实在是太好了,虽然我第一遍什么也没听懂,但我补了一些资料,回来再听一遍,我觉得老师一定认真备课了,才能将表单这节怎么复杂,讲的连贯性这么强,赞!
这节主要内容:创建一个可提交的表单一般步骤:1、构建表单;2、服务器处理;3、配置表单
主要知识点:1、表单相关元素;2、表单验证;3、表单提交
其一:表单相关元素
- form
属性:name target action method length elements aotocomplete
方法:submit() reset()
提取表单:document.forms[index] document.form[name]
提取表单元素:formName[index] formName[naem] formName.elements[index] formName.elements[name]
属于elements大家族的表单元素:button filedset input keygen object output select textarea
可重置的表单元素:input keygen select output textarea
2. label
属性:for control(属性值由浏览器自动配置) from(只读属性,属性值由浏览器自动配置)
作用:可关联控件,激发其行为
可关联的元素:button input(hidden除外) keygen meter output progess select textare
3. input
属性:type
4. select
属性:name value multiple options(动态集合) selectedoptions(动态集合) selectedIndex
方法:add(元素,[参照物]) remove(index)
option
属性:disabled label value text index selected defalultSelected
创建选项
DOM方法:createElement(‘option‘)
构造函数:new option(text,value)返回一个option元素
添加选项
DOM方法:appendChild() //IE8及以下不支持
insertBefore()
API: select.add();
删除选项
DOM方法:removeChild()
API select.remove(index)
5. textarea
属性:name value selectionStart selectionEnd selectionDirection(应用键盘操作) selection
方法:select() //全选内容,触发select事件 selectionRange(start,end)
setRangeText(replacement,[start],[end],[mode]
总结:表单元素共有属性
disabled form name readOnly tabIndex type value aotofocus(HTML5引入,存在兼容性问题)
表单元素共有方法
focus() blur()
表单元素共有事件
blur change focus
其二:验证
可验证的元素:button input select textarea
元素验证属性及方法:willValidate checkValidity()(未通过验证触发invalid事件)
validity(存储验证结果,具体验证到点的验证,所有为ture,才返回true)
setcustomValidity(message)(修改require的提示文字)
HTML5提供的验证方式:
1、required(验证必填属性)
2、input的type属性的一些值自带简单的验证功能,如:email,url......
3、pattery属性,以一个正则为属性值来验证
其三:提交
1、隐式提交
表单中有非禁用的提交按钮,按回车键就可提交
2、submit()方法提交,在提交不会触发submit事件,所以需提前验证
3、可提交的元素:button input keygen object select textarea
总结,表单中的API,元素,属性之类的,知识点特别繁琐,所以我个人觉得可以先掌握一个大概,在以后的实践中在慢慢细化。