事件处理--表单事件

• 表单的基础知识
• 提交表单

表单的基础知识

在html中，表单是由<form>元素来表示的，它有以下独有的属性和方法
action：规定当提交表单时向何处发送表单数据
method：规定用于发送form-data的HTTP方法
name：规定表单的名称
novalidate：如果使用该属性，则提交表单的时候不进行验证
target：规定在何处打开action URL

取得<form>元素引用的方式有好几种，第一种给它添加id，利用getElementById来找到它，第二种是通过document.forms可以取得所有form表单，通过索引取得特定的表单

提交表单

用户单机提交按钮或图像按钮时就会提交表单。使用<input>或<button>都可以定义提交按钮，只要将其type特性的值设置为submit即可，而图像按钮则是通过将<input>的type特性值设置为image来定义的，因此，只要我们单机以下代码生成的按钮，就可以提交表单。

<input type="submit" value="submit form">   // 通用提交按钮
<button type="submit">submit form</button>   // 自定义提交按钮
<input type="image" src="graphic.gif">   // 图像按钮

重置表单

在用户单击重置按钮时，所有表单字段都会恢复到页面刚加载完毕时的初始值。如果某个字段的初始值为空，就会恢复为空，只需要将input的type特性值改为reset。

共有的表单字段属性

disabled：布尔值，表示当前字段是否被禁用
form：指向当前字段所属表单的指针；只读
name：当前字段的名称
readOnly：布尔值，表示当前字段是否只读
tabIndex：表示当前字段的切换序号
type：当前字段的类型，如checkbox、redio等
value：当前字段将被提交给服务器的值。

什么是表单

表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分：
表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。
表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

常用表单元素

            form:定义供用户输入的表单。

            fieldset:定义域。即输入区加有文字的边框。

            legend：定义域的标题，即边框上的文字。

            label：定义一个控制的标签。如输入框前的文字，用以关联用户的选择。

            input:定义输入域，常用。可设置type属性，从而具有不同功能。

            textarea:定义文本域(一个多行的输入控件)，默认可通过鼠标拖动调整大小。

            button:定义一个按钮。

            select:定义一个选择列表，即下拉列表。

            option:定义下拉列表中的选项。

例子：

<form action="/demo/demo_form.asp">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form> 

<p>如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。</p>
服务器接收到的用户输入为：
firstname=Mickey&lastname=Mouse

从上面例子中可以看出name和value就是拼接在接口后的参数

表单事件
(1)onsubmit:表单中的确认按钮被点击时发生的事件
(2)onblur:对象在失去焦点时发生的事件
(3)onfocus:对象在获得焦点时发生的事件
(4)onchange:在对象的值发生改变时触发的事件
(5)oninput:在对象的值输入的时候触发的事件
(6)onload:在页面或者图片完成之后执行的代码