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

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

这节主要内容:创建一个可提交的表单一般步骤: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,元素,属性之类的,知识点特别繁琐,所以我个人觉得可以先掌握一个大概,在以后的实践中在慢慢细化。

时间: 2024-08-29 04:09:09

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

【tool】表单测试用例归纳与总结

使用FreeMind8.0总结了以下的表单测试用例.上传组建测试用例等在web系统测试中比较集中的用例,希望能结合实际项目使用各种覆盖方法对项目中的测试用例进行一次完全的归纳分析. 表单测试用例篇 (1)输入系统支持的数据格式测试用例分析 (2)输入非系统支持的数据格式测试用例分析 (3)路径覆盖测试分析 以下一个TextArea域为例子,使用Excell计算路径覆盖测试点,最终产生完全覆盖表单用例.

React之表单

第一部分:表单基础 在React中,修改表单的唯一途径是使用setState方法.举例如下: class NameForm extends React.Component { constructor(props) { super(props); this.state = {value: ''}; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); }

c# 模拟表单提交,post form 上传文件、大数据内容

表单提交协议规定:要先将 HTTP 要求的 Content-Type 设为 multipart/form-data,而且要设定一个 boundary 参数,这个参数是由应用程序自行产生,它会用来识别每一份资料的边界 (boundary),用以产生多重信息部份 (message part).而 HTTP 服务器可以抓取 HTTP POST 的信息, 基本内容:1. 每个信息部份都要用 --[BOUNDARY_NAME] 来包装,以分隔出信息的每个部份,而最后要再加上一个 --[BOUNDARY_N

AngularJS 的表单验证

最近开始学习angularjs,学到表单验证的时候发现有必要学习下大神的好文章: 转:http://www.oschina.net/translate/angularjs-form-validation 今天我们将来看看Angular如何帮助做表单验证. 我们将讨论更多使用angular进行有关表单操作的东西(就像我们另外的一篇文章: 提交Ajax表单:AngularJS的方式). 不过不用担心,那篇文章不一定要读的. 我们将重点放在客户端验证上,并使用Angular内置的表单属性.这里有一个 

Vue+Element-UI 多个form表单验证

在开发的过程中   有时根据业务需求提交的表单内容分区分块  内容繁多 业务控制相对复杂的时候  我们应该将页面内容分成若干个组件  这样方便后期维护查找问题  不然时间长了后期维护找问题头都大了 如上图所示  页面表单分为基本设置,上架设置,更多设置3大块  分别将3大块写到3个组件(A,B,C) 提交表单的时候我们要进行表单验证 思路:利用ES6 Promise异步控制 代码如下 组件A <el-form :model="ruleForm" :rules="rule

HTML:图片热点 网页划区 表单

图片热点: 划出图片中的区域,做超链接,点击该区域就可以直接跳转到链接网站 <img src="../../../3.jpg" title="血精灵" usemap="jingling" /> <map name="jingling"> <area shape="rect" coords="52,217,288,395" href="http://

图片热点,网页划区等和表单

今天我们学习了图片热点,网页划区以及比较重要的表单.记忆性的东西比较多,都是基础.多写多用下面我们来看一下今天的知识点 图片热点 ________________________________________________________________________________________________________________________________ 网页划区 在一个网页里,规划出一个区域用来展示另一个网页的内容. _______________________

HTML--2图片热点,网页划区,拼接,表单

图片热点: 规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果. 示例: 网页划区: 在一个网页里,规划出一个区域用来展示另一个网页的内容. 示例: 网页的拼接: 在一个网络页面内,规划出多个页面窗口,以表格拼接的形式展示出来. 示例: 表单: <form id="" name="" method="post/get" action="负责处理的服务端"> id不可重复,name可重复,g

HTML基础(二)——表单,图片热点,网页划区和拼接

一.表单 <form id="" name="" method="post/get" action="负责处理的服务端"> id不可重复:name可重复:get提交有长度限制,并且编码后的内容在地址栏可见,post提交无长度限制,且编码后内容不可见. </form> 1.文本输入 文本框<input type="txt" name="" id="&