JavaScript 表单对象 | 看完不会请来捶我

深渊向深渊呼唤

文章目录

一、访问表单与表单元素 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文档中可能会包含很多<form>标记,JS会为每个<form>标记创建一个Form对象,并存储到一个forms[]数组中。

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

<form  name="myForm" method="post" action="">
    用户名:<input type="text"  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、属性

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

属性 说明
name 返回或设置表单名称
action 返回或设置表单提交的URL
method 返回或设置表单提交方式,可取值为getpost
encoding 返回或设置表单信息提交的编码方式
id 返回或设置表单id
length 返回表单元素个数
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脚本来判断用户名和密码是否为空:

<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()">

效果如下:
JavaScript 表单对象 | 看完不会请来捶我

(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>

效果如下:
JavaScript 表单对象 | 看完不会请来捶我

2、按钮

按钮分为三种,分别是:

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

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

(1)按钮属性

下表展示了按钮的属性:

属性 说明
id 返回或设置按钮的id属性值
name 返回按钮的名称
type 返回按钮的类型
value 返回或设置显示在按钮上的文本,即按钮的值
disabled 返回或设置按钮是否被禁用,值为true则被禁用

(2)按钮方法

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

方法 说明
blur() 用于将焦点从按钮中移开
focus() 用于将焦点赋给按钮
click() 模拟按钮被鼠标单击

(3)例子:获取表单元素的值

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

<form name="demo"  method="post" action="" onsubmit="return Check(demo)">
	<input type="hidden" name="hid" value="文章添加成功" >
    <input type="submit" name="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>

效果如下:
JavaScript 表单对象 | 看完不会请来捶我

3、单选按钮和复选框

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

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

(1)属性

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

属性 说明
id 返回或设置id属性值
name 返回名称
type 返回类型
value 返回或设置单选框或复选框的值
length 返货一组单选按钮或复选按钮中包含元素的个数
checked 返回或设置一个单选按钮或复选框是否处于被选中状态,该属性值为true时,单选按钮或复选框处于被选中状态;反之,未选中
disabled 返回或设置按钮是否被禁用,值为true则被禁用

(2)方法

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

方法 说明
blur() 用于将焦点从按钮中移开
focus() 用于将焦点赋给按钮
click() 模拟按钮被鼠标单击

(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>

效果如下:
JavaScript 表单对象 | 看完不会请来捶我

4、下拉菜单

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

(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: 怼一个表单,分别放两个下拉菜单,分别是:

可选职位:

                <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()">

步骤2: 写JS代码:

	<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>

效果如下:
JavaScript 表单对象 | 看完不会请来捶我

栏目