一、访问表单与表单元素

表单是实现动态网页的一种主要的外在形式，可以收集在客户端用户提交的信息，是实现网站互动功能的重要组成部分。

Form对象代表了HTML文档中的表单，因为表单对象是由表单元素组成的，因为Form对象也包含多个子对象

1、访问表单

一个HTML文档中可能会包含很多<form>标记，JS会为每个<form>标记创建一个Form对象，并存储到一个forms[]数组中。

在操作form对象之前首先要确定要访问的表单，有三种访问表单的方式，比如我们定义了一个表单：

<form id="form1" name="myForm" method="post" action="">
    用户名：<input type="text" id="user" name="username" size="15"><br>
    密码：<input type="password" name="password" maxlength="8" size="15"><br>
    <input type="submit" name="sub1" value="登录">
</form>

• 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、属性

下表列出了表单对象的属性：

2、方法

表单对象只有两个方法：

• reset()： 将所有表单对象的元素全部重置为初始值，相当于单击了重置按钮
• submit()：提交表单数据，相当于单击提交按钮

3、事件

表单对象的事件只有两个，与两个方法类似：

• reset：重置表单时触发的事件
• submit：提交表单时触发的事件

三、表单元素

1、文本框

文本框主要包含单行文本框和多行文本框两种，多行的又叫做文本域，密码框被看成是一种特殊的单行文本框（输入的时候以*显示）。

无论哪种文本框他们的属性和方法大多都是相同的，

（1）文本框属性

下表列出了文本框常用属性及说明：

（2）文本框方法

下表给出了文本框的常用方法及说明：

（3）例子1：验证表单内容是否为空

步骤1： 设计登录界面，用HTML写一个下面的简单的表单（HTML不再给出）

步骤2： 写JS脚本来判断用户名和密码是否为空：

<script type="text/javascript">
    function Check() {
        if(demo.UserName.value==""){
            alert("请输入用户名！");
            demo.UserName.focus();
            return false;
        }if(demo.UserPwd.value==""){
            alert("请输入密码！");
            demo.UserPwd.click();
            demo.UserPwd.focus();
            return false;
        }
        return true;
    }
</script>

步骤3： 绑定按钮提交和重置所响应的方法

<input type="button" value="提交" onclick="return Check()">
<input type="button" value="重置" onclick="demo.reset()">

（4）例子2：对文本框的文字加入字数限制

步骤1： 写好表单，向表单里面添加一个单行文本框一个多行文本框

步骤2： 开始写JS代码

    <script type="text/javascript">
        var limit_Tle = 10;
        var limit_Text = 1000;
        function CheckTitle() {
            var x = demo.Title.value;
            if(x.length>limit_Tle){
                alert("标题不能超过10个字！");
                return false;
            }
        }
        function CheckText() {
            var x = demo.Text.value;
            if(x.length>limit_Text){
                alert("内容不能超过1000字！");
                return false;
            }
        }
    </script>

步骤3： 向表单中的<textarea>和<input type="text">添加onBlur（当焦点失去执行指定方法）事件：

<input name="Title" type="text" size="50" onblur="CheckTitle()">
<textarea name="Text" rows="6" cols="52" value="这里填写新闻内容" onblur="CheckText()"></textarea>

2、按钮

按钮分为三种，分别是：

• 普通按钮：用于调用自定义函数
• 提交按钮：用于提交表单
• 重置按钮：用于重置表单

但是，无论哪一种按钮，他们都具有相同的属性和方法

（1）按钮属性

下表展示了按钮的属性：

（2）按钮方法

下面展示了按钮的一些方法：

---

（3）例子：获取表单元素的值

步骤1： 在HTML文档中写入一个表单，包含三个文本框~，然后添加两个按钮和一个隐藏域按钮，展示HTML部分代码：

<form name="demo" id="demo" method="post" action="" onsubmit="return Check(demo)">
    <input type="hidden" name="hid" value="文章添加成功" id="hid">
    <input type="submit" name="add" id="add" value="添 加">
    <input type="reset" value="重置">
</form>

步骤2： 编写JS代码，代码如下：

<script type="text/javascript">
    function Check(demo) {
        var str="获取内容如下：";
        if(demo.AuthorName.value!="")
            str+="作者名称："+demo.AuthorName.value+"\n";
        else return false;
        if(demo.TextTheme.value!="")
            str+="文章主题："+demo.TextTheme.value+"\n";
        else return false;
        if(demo.TextMain.value!="")
            str+="文章内容："+demo.TextMain.value+"\n";
        else return false;
        if(demo.hid.value!="")
            str+=demo.hid.value;
        alert(str);
        return true;
    }
</script>

3、单选按钮和复选框

单选按钮用于进行单一的选择，在页面中以圆框的表示；复选框能够进行多项选择，在页面在以一个方框表示。单选按钮和复选框一般情况下会以组的形式出现在页面中。创建单选按钮组或者复选框组只需要将所有单选按钮或所有复选框的name属性值设置为一致即可。

单选按钮和复选框虽然在功能上不相同，但是他们的属性和方法几乎相同

（1）属性

下表列出了单选按钮和复选框常用的属性：

（2）方法

下标列出了单选按钮和复选框一些常用方法：

（3）例子：获取单选按钮和复选框的值

步骤1： 设计如效果图所示表单。

制作一个简单的用户个人信息页面，获取用户的姓名，性别，爱好以及自我评价的信息。

步骤2： 定义getInfo()函数，在函数中获取用户信息，代码如下：

  <script type="text/javascript">
        function getInfo() {
            var res="";
            res+="姓名：" + demo.name.value + "\n";
            res+="性别：";
            for(var i = 0 ; i < demo.sex.length ; i ++ ){
                if(demo.sex[i].checked)
                    res += demo.sex[i].value;
            }
            res+="\n爱好：";
            for(var i = 0 ; i < demo.hobby.length ; i ++ )
                if(demo.hobby[i].checked)
                    res+=demo.hobby[i].value+" ";
            res+="\n自我评价："+demo.judge.value + "\n";
            alert(res);
        }
    </script>

4、下拉菜单

下拉菜单通过<select>和<option>标记来实现。

（1）下拉菜单属性

下表展示了下拉菜单的一些属性：

（2）下拉菜单方法

下表展示了下拉菜单的一些常用方法：

（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对象常用的属性：

（4）例子：制作简单选择职位的网页

步骤1： 怼一个表单，分别放两个下拉菜单，分别是：

<select name="job" size="6" multiple="multiple">
                    <option value="歌手">歌手</option>
                    <option value="演员">演员</option>
                    <option value="画家">画家</option>
                    <option value="教师">教师</option>
                    <option value="公务员">公务员</option>
                    <option value="职员">职员</option>
</select>

已选职位：

<select name="myjob" size="6" multiple="multiple"></select>

两个中间按钮：

<input type="button" value=">>" onclick="myJob()"><br>
<input type="button" value="<<" onclick="toJob()">

 <script type="text/javascript">
        function myJob() {
            var jobLength = demo.job.options.length;
            for(var i = jobLength-1;i>=0;i--){
                if(demo.job[i].selected){
                    var myOption = new Option(demo.job[i].text,demo.job[i].value);
                    demo.myjob.options[demo.myjob.options.length]=myOption;
                    demo.job.remove(i);
                }
            }
        }
        function toJob() {
            var myjoblength = demo.myjob.options.length;
            for(var i = myjoblength-1;i>=0;i--){
                if(demo.myjob[i].selected){
                    var myOption = new Option(demo.myjob[i].text,demo.myjob[i].value);
                    demo.job.options[demo.job.options.length]=myOption;
                    demo.myjob.remove(i);
                }
            }
        }
    </script>