关于表单总结归纳(网易讨论区转载

Posted 2020-07-13 sakura丶shadow

首先，我想说讲表单这节的老师讲的实在是太好了，虽然我第一遍什么也没听懂，但我补了一些资料，回来再听一遍，我觉得老师一定认真备课了，才能将表单这节怎么复杂，讲的连贯性这么强，赞！

这节主要内容：创建一个可提交的表单一般步骤：1、构建表单；2、服务器处理；3、配置表单

主要知识点：1、表单相关元素；2、表单验证；3、表单提交

 

其一：表单相关元素

1. 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，元素，属性之类的，知识点特别繁琐，所以我个人觉得可以先掌握一个大概，在以后的实践中在慢慢细化。