文章目录
一、访问表单与表单元素1、JavaScript访问表单2、JavaScript访问表单元素
二、表单对象的属性、方法与事件1、属性2、方法3、事件
三、表单元素1、文本框（1）文本框属性（2）文本框方法（3）例子1：验证表单内容是否为空（4）例子2：对文本框的文字加入字数限制
2、按钮（1）按钮属性（2）按钮方法（3）例子：获取表单元素的值
3、单选按钮和复选框（1）属性（2）方法（3）例子：获取单选按钮和复选框的值
4、下拉菜单（1）下拉菜单属性（2）下拉菜单方法（3）Option对象（4）例子：制作简单选择职位的网页
一、访问表单与表单元素
表单是实现动态网页的一种主要的外在形式，可以收集在客户端用户提交的信息，是实现网站互动功能的重要组成部分。
Form对象代表了HTML文档中的表单，因为表单对象是由表单元素组成的，因为Form对象也包含多个子对象
1、JavaScript访问表单
一个HTML文档中可能会包含很多
document.forms[]按编号进行访问，访问上面的表单：document.forms[0]document.formname按名称进行访问，访问上面的表单：document.myFrom在支持DOM的浏览器中：document.getElementById("formID")，比如上面的表单：document.getElementById("form1")
2、JavaScript访问表单元素
每个表单都是一个表单元素的聚集，访问表单元素也是三种方式，拿上面的表单代码来看一下：
通过elemnts[]按元素编号进行访问，访问上面的表单：document.form1.elements[0]通过name属性进行访问，访问上面的表单：document.form1.text1在支持DOM浏览器中，使用document.getElementByID("elementID")来定位要访问的表单元素，访问上面的表单：document.getElementById("user")
二、表单对象的属性、方法与事件
1、属性
下表列出了表单对象的属性：
属性说明name返回或设置表单名称action返回或设置表单提交的URLmethod返回或设置表单提交方式，可取值为get或postencoding返回或设置表单信息提交的编码方式id返回或设置表单idlength返回表单元素个数target返回或设置提交表单时目标窗口的打开方式elements返回表单对象中的元素构成的数组，数组中的元素也是对象
2、方法
表单对象只有两个方法：
reset()： 将所有表单对象的元素全部重置为初始值，相当于单击了重置按钮submit()：提交表单数据，相当于单击提交按钮
3、事件
表单对象的事件只有两个，与两个方法类似：
reset：重置表单时触发的事件submit：提交表单时触发的事件
三、表单元素
1、文本框
文本框主要包含单行文本框和多行文本框两种，多行的又叫做文本域，密码框被看成是一种特殊的单行文本框（输入的时候以*显示）。
无论哪种文本框他们的属性和方法大多都是相同的，
（1）文本框属性
下表列出了文本框常用属性及说明：
属性说明id返回或设置文本框id属性值name返回文本框的名称type返回文本框类型value返回或设置文本框中的文本rows返回或设置多行文本框的高度cols返回或设置多行文本框宽度disabled返回或设置文本框是否被禁用，值为true表示被禁用
（2）文本框方法
下表给出了文本框的常用方法及说明：
方法说明blur()用于将焦点从文本框中移开focus()用于将焦点赋给文本框click()模拟文本框被鼠标单击select()选中文本框中的文字
（3）例子1：验证表单内容是否为空
步骤1： 设计登录界面，用HTML写一个下面的简单的表单（HTML不再给出）
步骤2： 写JS脚本来判断用户名和密码是否为空：
步骤3： 绑定按钮提交和重置所响应的方法
效果如下：
（4）例子2：对文本框的文字加入字数限制
步骤1： 写好表单，向表单里面添加一个单行文本框一个多行文本框
步骤2： 开始写JS代码
步骤3： 向表单中的
效果如下：
2、按钮
按钮分为三种，分别是：
普通按钮：用于调用自定义函数提交按钮：用于提交表单重置按钮：用于重置表单
但是，无论哪一种按钮，他们都具有相同的属性和方法
（1）按钮属性
下表展示了按钮的属性：
属性说明id返回或设置按钮的id属性值name返回按钮的名称type返回按钮的类型value返回或设置显示在按钮上的文本，即按钮的值disabled返回或设置按钮是否被禁用，值为true则被禁用
（2）按钮方法
下面展示了按钮的一些方法：
方法说明blur()用于将焦点从按钮中移开focus()用于将焦点赋给按钮click()模拟按钮被鼠标单击
（3）例子：获取表单元素的值
步骤1： 在HTML文档中写入一个表单，包含三个文本框~，然后添加两个按钮和一个隐藏域按钮，展示HTML部分代码：
步骤2： 编写JS代码，代码如下：
效果如下：
3、单选按钮和复选框
单选按钮用于进行单一的选择，在页面中以圆框的表示；复选框能够进行多项选择，在页面在以一个方框表示。单选按钮和复选框一般情况下会以组的形式出现在页面中。创建单选按钮组或者复选框组只需要将所有单选按钮或所有复选框的name属性值设置为一致即可。
单选按钮和复选框虽然在功能上不相同，但是他们的属性和方法几乎相同
（1）属性
下表列出了单选按钮和复选框常用的属性：
属性说明id返回或设置id属性值name返回名称type返回类型value返回或设置单选框或复选框的值length返货一组单选按钮或复选按钮中包含元素的个数checked返回或设置一个单选按钮或复选框是否处于被选中状态，该属性值为true时，单选按钮或复选框处于被选中状态；反之，未选中disabled返回或设置按钮是否被禁用，值为true则被禁用
（2）方法
下标列出了单选按钮和复选框一些常用方法：
方法说明blur()用于将焦点从按钮中移开focus()用于将焦点赋给按钮click()模拟按钮被鼠标单击
（3）例子：获取单选按钮和复选框的值
步骤1： 设计如效果图所示表单。
步骤2： 定义getInfo()函数，在函数中湖片区用户信息，代码如下：
效果如下：
4、下拉菜单
下拉菜单通过
（1）下拉菜单属性
下表展示了下拉菜单的一些属性：
属性说明id返回或设置id属性值name返回名称type返回类型value返回或设置下拉菜单被选中的值multiple该值设为true时，下拉菜单中的选项会以列表的方法显示，此时可以多选；该值为false时，只能单选length返回下拉菜单元素的个数options返回一个数组，数组中的元素为下拉菜单中的选项selectedIndex返回或设置下拉菜单中当前选中的选项在options[]数组中的下标disabled返回或设置下拉菜单是否被禁用，值为true则被禁用
（2）下拉菜单方法
下表展示了下拉菜单的一些常用方法：
方法说明blur()用于将焦点从按钮中移开focus()用于将焦点赋给按钮click()模拟按钮被鼠标单击remove(i)删除下拉菜单中的选项，其中，参数i为options[]数组中的下标
（3）Option对象
在HTML中，创建下拉菜单需要使用select元素或option元素，select用于声明，option用于创建下拉菜单中的选项，在JS中，下拉菜单中的每一个选项都可以看作是一个Option对象，创建下拉菜单选项的构造函数如下：
new Option(text,value,defaultSelected,selected)
其中defaultSelected是一个布尔值，用于声明该选项是否是下拉菜单中的默认选项，如果他的参数为true，那么表单重置的时候，这个选项会被自动选中。
另一个元素selected也是一个布尔值，用于声明该选项是否处于被选中的状态
在创建对象之后，可以直接将其赋值给下拉菜单的Option数组元素，例如：
document.myform.myselect.options[0] = new Option("text","value");
该对象也有自己的属性，下表展示了Option对象常用的属性：
属性说明defaultSelected布尔值，用于声明在创建该对象时，该选项是否是默认选项index返回当前对象在options[]数组中的下标selected是否被选中text返回或设置选项中的文字value返回或设置选项中的值
（4）例子：制作简单选择职位的网页
步骤1： 怼一个表单，分别放两个下拉菜单，分别是：
可选职位：
已选职位：
两个中间按钮：
步骤2： 写JS代码：
效果如下：