表单编程

获取表单
1.什么是表单元素?
●action -提交的地址
●method -提交方式
●enctype -数据传递的方式，这是默认的方式，即以键值对的形式提交。
2.如何获取表单元素
3.什么是表单字段(域)
首先表单字段应该包含在form元素中，但并不意味着form中的所有元素都是表单字段。实际上表单字段主要是指六个元素:
●input-类型众多，主要是定义输入域
●textarea- 多行文本
●select -定义下拉或多选列表
●fieldset-将相关的表单用外框包含起来
●button- 默认带提交功能的按钮
●output -显示输出结果
还有些元素虽然不属于表单字段，但是也具备一些和表单字段交互的功能:
●label -为input元素定义标注
●datalist -为input元素提供选项列表
4. input的type类型
子主题 5input元素比较特殊，它有个属性type,可以将input星现出不同的效果。如:
●text-文本框
●password -密码框
●radio-单选框
●checkbox-多选框
●file-文件上传控件
●hidden- 隐藏表单
●submit -提交按钮
●image -带图片的提交按钮
●reset-重置按钮
●button -普通按钮
HTML 5新增的type类型:
●email
●url
●number
●range
●date
●time
●datetime-local
●month
●week
●search
●tel
●color
获取表单字段
获取表单字段的值
表单属性介绍
1. form
●action -提交的地址
●autocomplete -是否启用表单的自动完成功能，默认为启用(on)
●enctype -数据传递的方式
●method -提交方法
●name-表单名
●target -规定在何处打开action指定的地址
2. input
●autocomplete -规定input元素输入字段是否应该启用自动完成功能。默认on
●autofocus -规定当页面加载时input元素应该自动获得焦点
●checked -规定type=checkbox/radio时是否为选中状态
●disabled -禁用该元素
●list- 指向引用的datalist,值为datalist的id
●maxlength -规定input元素中允许的最大字符数
●name-表单字段的名称
●placeholder -规定可描述输入input字段预期值的简短的提示信息
●readonly -规定输入字段是只读的
●type -规定要显示的input元素的类型
●value -指定input元素value的值
3. textarea
●autofocus -规定当页面加载时input元素应该自动获得焦点
●disabled -禁用该元素
●maxlength -规定input元素中允许的最大字符数
●name- 表单字段的名称
●placeholder -规定可描述输入input字段预期值的简短的提示信息
●readonly- 规定输入字段是只读的
●rows -规定文本区域内可见的行数
●cols-规定文本区域内可见的列数
4. select
●autofocus -规定当页面加载时input元素应该自动获得焦点
●disabled -禁用该元素
●name-表单字段的名称
●multiple-当指定了该属性时下拉列表变多选列表
5. option
注意: option只能包含在select或datalist中。
●disabled-规定此选项应在首次加载时被禁用
●selected- 规定选项(在首次显示在列表中时)表现为选中状态
●value -定义送往服务器的选项值
6. button
●autofocus -规定当页面加载时自动获得焦点
●disabled -规定此选项应在首次加载时被禁用
●type-只有三个值,button表示普通按钮; submit表示提交按钮; reset表示重置按钮;
●value- 按钮中的文本值，可以写在开始和结束标签之间
7.特殊属性
效果:点击按钮可以切换文本框的禁用状态在表单元素中这类属性有:
●autofocus
●readonly
●disabled
●multiple
●I checked
●selected
表单相关事件
1.提交事件
当点击提交按钮后，会触发form元素上的onsubmit事件，通过为它绑定事件处理方法，可以在提交到服务器之前做一些操作:比如验证表单。注意: onsubmit事件是绑定在form元素上，而不是提交按钮上。如果想要阻止表单提交，可以使用事件对象中的阻止事件默认行为的方法: preventDefault()
2.重置事件
重置是指将表单中的字段都还原到默认的状态值，而并不是清空内容。表单元素中有两种类型的标签具备重置功能:当点击重置按钮后，会触发form元素上的onreset事件，通过为它绑定事件处理方法，可以在重置之前做一些操作。注意: onrset事件是绑定在form元素上，而不是重置按钮上。如果想要阻止表单重置，可以使用事件对象中的阻止事件默认行为的方法: preventDefault()
3.其他的提交和重置方法
除了可以使用标签提交表单外, form元素还提供了两个方法: submit0和reset),它们也具备提交的功能。在它们各自绑定的点击事件中使用了form元素的submit和reset方法，实现了提交和重置的功能。利用方法提交和重置与标签的提交和重置.
区别:
submit()方法提交后不会触发onsubmit事件，点击submit类型的按钮后则会触发。
reset()方法和reset类型的按钮都会触发onreset事件。
4.焦点事件
焦点事件，顾名思义就是当表单里面的控件获取到焦点时所触发的事件。点到输入框，会触发焦点事件，当鼠标离开某个控件时，同样可以触发焦点事件.
对应的焦点事件:
●focus: 获取焦点时触发的事件的名称
●blur: 失去焦点时触发的事件的名称
效果:当文本被选中时会在控制台显示"文本框被选中"，当点击文本框以外的地方时，会显示"文本框失去焦点"。foucs 和blur这两个事件是在实际项目开发中最常用的表单事件，常用来在用户填写完信息触发表单的验证。
5.改变事件
在实际开发中，表单元素中有两个控件也用的比较多，就是radio和checkbox控件，与这两个控件经常绑定的有一个事件叫做changp事件，这个事件会在表单的内容发生变化时被触发，同样适用于text, select和textare等 表单控件。
6. input事件
在文本框(text)中使用change事件，需要失去焦点，并改变了输入框中内容时才会触发。但有的时候要求在输入框中每输入或删除一个字符都能响应事件，这就需要input事件。
表单验证
验证长度
验证长度是比较简单的，甚至表单元素本身就提供了与长度相关的属性。例如<input>标签元素提供了maxlength属性可以设置可输入的最大长度。
正则表达式验证
HTML 5中的表单控件
新增的表单控件
1. email类型
主要用于用户输入email地址的，在提交表单时，会自动验证emai输入框的值，如果不是一个有效的email,则会报错。
2. url类型
主要用于输入ur地址的，在提交表单的时候，会自动验证ur$输入框里面的值，如果不是一个有效的ur地址，则会报错。
3. number类型
该类型控件只允许输入数值，并且我们还可以设置能够接受数字的范围。
4. range类型
用于输入包含- -定数字范围的文本框，和number控件的作用大致-致，只不过表现形式是以滚动条的形式来展现的。和number控件-样，同样存在min，max 以及step属性。
5.日期检查类型类型
日期控件date
时间控件time
本地日期事件控件datet ime-local
月控件month
周控件week
6. search类型
提供用于搜索关键字的文本框，虽然外观看起来和text 控件差不多，但是却带来了语义上的不同。实际上和普通文本还是有细微的区别，当我们在搜索框中输入内容后，可以通过右边的小叉进行删除，但是普通文本框则没有这-功能。 (当然这取决于不同浏览器的实现)。
7. tel类型
tel类型主要用于输入电话号码，效果虽然看上去和普通文本框是一样的，但是却有了语义的不同。
8. color类型
专门用于设置颜色的控件
新增的表单属性
1. autocomplete属性
新增的autocomplete属性可以帮助用户在input类型的输入框中实现自动完成内容的输入。支持的控件包括: text ，search， url， tel, email, password ，datepickers ，range 以及color。autocomplete 属性的值有2种: on 和off，可以将该属性设置到form表单上，因为该属性是可以继承的。可以将autocomplete属性和datalist配合着使用。
2. autofocus属性
该属性可以让某些控件自动的获取光标焦点，常用于某些需要自动获取焦点的控件,例如向用户展示许可协议时，默认的焦点就聚焦在同意这个按钮上面。属性值有两个，分别是on和off,设置为on代表开启自动焦点，off 代表不开启。当然不开启自动焦点的话直接不书写该属性就可以了。
3. form属性
在以前提交表单的时候，只能提交位于<form>标签以内的表单控件的内容，如果是处
于<form>标签以外的表单控件，内容是无法被提交到的。通过form 属性，我们可以采集到处于<form>以外的表单控件的内容，只需要在表单的form属性里面填写表单的id便可以和该表单进行绑定。如果一个form属性要引用两个或者两个以上的表单，只需要用空格将表单的id间隔开即可。
4.表单重写属性
新增的表单重写属性是-套属性，包括下面的属性:formaction、formenctype 、formmethod 、formnovalidate 、formtarget 。这里讲一个formaction，其他的属性用法是一样的。之前的form表单，act ion属性表示将表单内容提交到哪一一个页面，但是有一个缺点就是所有的信息都会被提交到一个固定的页面，有了formaction 以后，就可以将不同的信息提交到不同的页面。
5. list属性
该属性主要是和HTML 5新增的<datalist>标签配合使用的，list 属性里面写
上<datalist>标签的id 即可。
6.最值属性
max:输入框允许的最大值
min:输入框允许的最小值
step:输入框输入数字时的数字间隔
7. multiple属性
这个属性可以用于设置下拉列表显示多个选项，或者上传文件时上传多个文件。
8. pattern属性
这个属性是相当方便的一个属性，简化了表单验证中正则表达式的书写方式，直接将正则表达式作为该属性的属性值即可。
9.占位符属性
placeholder属性用于给文本框一个默认的内容
10. required属性
为表单控件书写上该属性表示此项目为必须填写项目
11. novalidate属性
该属性用于在提交表单时取消整个表单的验证，关闭对表单内所有元素的检查,如果只想取消一个，那么就可以使用前面所讲的formnovalidate 属性单独用于表单里的某-个控件里面。
下拉列表和多选列表的使用
1.增加元素
2.修改元素
修改元素可以通过指定的下标找到要修改的option,然后通过value或text修 改其中的内容。
3.删除元素
删除使用的是remove方法，同样通过下标指定要删除的项。
如果要删除所有，可以直接将options的length属性设置为0。
4.获取选中的元素
表单常见操作
全选和反选
下拉框特效
下拉列表联动