Dict.CN 在线词典, 英语学习, 在线翻译

都市淘沙者

荔枝FM Everyone can be host

统计

留言簿(23)

积分与排名

优秀学习网站

友情连接

阅读排行榜

评论排行榜

深入解析form标签

http://www.nowamagic.net/html/html_FormAnalysis.php

在Javascript中，页面上的每一对<form>标记都解析为一个对象，即form对象。

可以通过document.forms获取以源顺序排列的文档中所有form对象的集合。

如果一个表单对象定义如下：
view source
print?
1    <form name="frm1" method="post" action="login.aspx">

获得该表单对象的方法：
view source
print?
1    document.forms["frm1"];   // 根据name属性值
2    document.forms[0];        // 根据索引号
3    document.frm1;            // 直接根据name值获得对象
form 表单应该注意的属性

elements：获取以源顺序排列的给定表单中所有控件的集合。但是<input type="image">对象不在此集合内。
view source
print?
1    var txtName = myform.elements[0];         //获得表单的第一个元素
2    var txtName = myform.elements["txtName"]; //获得name属性值为"txtName"的元素
3    var txtName = myform.elements.txtName;    //获得name属性值为"txtName"的元素

enctype：设置或获取表单的多用途网际邮件扩展(MIME)编码。这个属性的默认值为：application/x-www-form-urlencoded，如果要上传文件，则应该设置为：multipart/form-data。
form 表单中的<label>标记

每一个表单元素的文字描述都应该使用<label>标记。

该标记用于将文字绑定到对应的表单元素上，它的for属性指定它所要绑定的表单元素id值。绑定后单击该文字，鼠标将聚焦到对应的文本框中或选中对应的选项。

若安装了某些桌面主题，某些表单元素还会变换颜色来予以提示，这大大提高了用户体验。

示例代码：
view source
print?
01    <form method="post" name="frm1">
02        <label for="txt">点我将聚焦到文本框</label>
03        <input type="text" id="txt" name="myname">
04    <br/>
05        <label for="rdo">点我将选中单选框</label>
06        <input type="radio" id="rdo" name="male"/>
07    <br/>
08        <label for="cbo">点我将选中复选框</label>
09        <input type="checkbox" id="cbo" name="hobby">
10    </form>

注意：

    * 每个表单元素应当尽量使用<label>标签来提高用户体验；
    * 每个表单元素应当分配 name 属性和 id 属性。name 属性：用来将数据提交到服务器；id 属性：用来在客户端做相应的操作；如：<label>标签的绑定、CSS 选择器的使用等。 ( name 属性和 id 属性应该尽可能地使用相同的或相关的值。)

在客户端，Javascript对表单及表单元素的操作，更青睐于使用其name属性。因为，对于某些特定的表单元素（如：单选按钮等），使用其name属性更易于获得元素值，也更方便向服务器传送数据！

Javascript操作form表单元素，比较少用的属性：

    * defaultChecked 设置或获取复选框或单选钮的状态。
    * defaultValue 设置或获取对象的初始内容。
    * disabled 设置或获取控件的状态。

提交表单

提交表单的示例：
view source
print?
1    <form name="frm" method="post" action="javascript:alert('提交成功！');">
2         <input type="button" value="提交功能" onclick="document.forms['frm'].submit();">
3         <input type="button" value="禁用反复提交" onclick="this.disabled=true; this.form.submit();">
4    </form>

注意：

    * 如果使用submit()方法来提交表单，则不会触发<form>表单元素的onsubmit事件，这是与用<input type="submit">提交元素不同的地方；
    * 可以在按钮的提交或点击事件中，使用disabled 属性来禁用用户反复点击提交按钮的行为，减少服务器的响应负担；

设置文本框

控制文本框的字符个数：
view source
print?
01    <script language="javascript">
02    function LessThan(_textArea){
03        //返回文本框字符个数是否符号要求的boolean值
04        return _textArea.value.length < _textArea.getAttribute("maxlength");
05    }
06    </script>
07    <label for="name">文本框:</label>
08    <input type="text" name="name" id="name" value="姓名" maxlength="10"></p>
09    <br>
10    <label for="comments">多行文本框:</label>
11    <textarea name="comments" id="comments" cols="40" rows="4" maxlength="50" onkeypress="return LessThan(this);"></textarea>

注意：多行文本框<textarea>中的maxlength为自定义属性；如果在<textarea>中输入字符时，换行也算一个字符；

鼠标经过时，自动选中文本框：
view source
print?
01    <script language="javascript">
02    window.onload = function(){
03        var txtName = document.getElementsByName("myName")[0];
04        txtName.onmouseover = function(){
05           this.focus();
06        };
07        txtName.onfocus = function(){
08           this.select();
09        };
10    }
11    </script>
12    <INPUT TYPE="text" NAME="myName" value="默认值被选中" />

实现了行为与结构的分离。
设置单选按钮

获取选中的单选按钮 & 设置单选按钮被选中：
view source
print?
01    <script language="javascript">
02    //获取选中项
03    function getChoice(){
04        var oForm = document.forms["myForm1"];
05        //radioName是单选按钮的name属性值
06        var aChoices = oForm.radioName;
07        //遍历整个单选项表
08        for(i=0;i<aChoices.length;i++)  
09            if(aChoices[i].checked)  
10                break; //如果发现了被选中项则退出
11        alert("您选中的是："+aChoices[i].value);
12    }
13    //设置选中项
14    function setChoice(_num){
15        var oForm = document.forms["myForm1"];
16        //radioName是单选按钮的name属性值
17        oForm.radioName[_num].checked = true; //其它选项的checked值会自动设置为false
18    }
19    </script>
20    //调用代码
21    <input type="button" value="获取选中项" onclick="getChoice();" />
22    <input type="button" value="设置第1项被选中" onclick="setChoice(0);" />

需要保证同一组单选按钮的name属性值相同即可。
设置复选框

设置复选框的“全选”、“全不选”及“反选”功能：
view source
print?
01    <script language="javascript">
02    function changeBoxes(_action){
03        var myForm = document.forms["myForm1"];
04        //myCheckbox 为所有复选框的name属性值
05        var oCheckBox = myForm.myCheckbox;
06      
07        for(var i=0;i<oCheckBox.length;i++)    //遍历每一个选项
08            if(_action < 0)//反选
09                oCheckBox[i].checked = !oCheckBox[i].checked;
10            else
11                //_action为1是则全选,为0时则全不选
12                oCheckBox[i].checked = _action;
13    }
14    </script>
15    <form name="myForm1">
16    <input type="checkbox" name="myCheckbox">aa
17    <input type="checkbox" name="myCheckbox">bb
18    <input type="button" value="全选" onclick="changeBoxes(1);" />
19    <input type="button" value="全不选" onclick="changeBoxes(0);" />
20    <input type="button" value="反选" onclick="changeBoxes(-1);" />
21    </form>
设置下拉列表框

下拉列表框的multiple 属性用于设置或获取下拉列表框是否可以选中多个选项。

下拉列表框默认只能选中一项，若要设置为可以选中多项，则<select multiple = "multiple">即可。

type 属性：javascript语言根据type属性的值获得下拉列表框select控件的类型。

type 属性的值为：select-multiple 或 select-one（注意：下拉列表框的类型由multiple 属性控制）。

查看下拉列表框的选项（单选项 & 多选项）：
view source
print?
01    <script language="javascript">
02    function getSelectValue(_myselect){
03        var oForm = document.forms["myForm1"];
04        //根据参数(下拉列表框的name属性值)获得下拉菜单项
05        var oSelectBox = oForm.elements[_myselect];
06        //判断是单选还是多选
07        if(oSelectBox.type == "select-one"){
08            var iChoice = oSelectBox.selectedIndex;    //获取选中项
09            alert("单选，您选中了" + oSelectBox.options[iChoice].text);
10        }
11        else{
12            var aChoices = new Array();
13            //遍历整个下拉菜单
14            for(var i=0;i<oSelectBox.options.length;i++)
15                if(oSelectBox.options[i].selected)//如果被选中
16                  //压入到数组中
17                  aChoices.push(oSelectBox.options[i].text);
18            //输出结果
19            alert("多选，您选了：" + aChoices.join());
20        }
21    }
22    </script>
23    <form method="post" name="myForm1">
24    <select id="mysel" name="mysel" multiple="multiple" style="height:60px;">
25        <option value="a">AA</option>
26        <option value="b">BB</option>
27        <option value="c">CC</option>
28    </select>
29    <input type="button" onclick="getSelectValue('mysel')" value="查看选项" />

添加下拉列表框的选项

追加新选项到末尾：
view source
print?
1    <script language="javascript">
2    function AddOption(Box){ //追加选项到末尾
3        var oForm = document.forms["myForm1"];
4        var oBox = oForm.elements[Box];
5        var oOption = new Option("乒乓球","Pingpang");
6        oBox.options[oBox.options.length] = oOption;
7    }
8    </script>

插入新选项到指定位置：
view source
print?
01    <script language="javascript">
02    function AddOption(_select,_num){
03        var oForm = document.forms["myForm1"];
04        var oBox = oForm.elements[_select];
05        var oOption = new Option("text值","value值");
06        //兼容IE7，先添加选项到最后，再移动
07        oBox.options[oBox.options.length] = oOption;
08        oBox.insertBefore(oOption,oBox.options[_num]);
09    }
10    </script>
11    <input type="button" value="添加乒乓球" onclick="AddOption('myselect',1);" />

注意：如果直接使用insertBefore()方法插入选项，将会在IE中出现一个空选项的bug。为了解决IE的这个bug，只能使用先追加新选项到末尾，然后再使用insertBefore()方法将其移动到相应的位置。

类似这样：为了跳过浏览器的某些bug或限制，实现预定目的的小技巧，通常称之为hack。

替换某一选项：
view source
print?
01    <script language="javascript">
02    //替换选项
03    function ReplaceOption(_select,_num){
04        var oForm = document.forms["myForm1"];
05        var oBox = oForm.elements[_select];
06        var oOption = new Option("text值","value值");
07        oBox.options[_num] = oOption; //替换第_num 个选项
08    }
09    </script>
10    <input type="button" value="替换选项" onclick="ReplaceOption('selName',1);" />

通过oBox.options[_num] = oOption 直接将创建的新选项替换掉指定位置的选项。

删除某一选项：
view source
print?
01    <script language="javascript">
02    function RemoveOption(_select,_num){
03        var oForm = document.forms["myForm1"];
04        var oBox = oForm.elements[_select];
05        oBox.options[_num] = null;    //删除选项
06    }
07    </script>
08    </head>
09    <body>
10    <select id="mysel" name="mysel" multiple="multiple">
11    
12    <input type="button" value="删除选项" onclick="RemoveOption('mysel',1);" />

直接通过oBox.options[_num] = null 删除选项。


posted on 2011-03-15 10:04 都市淘沙者 阅读(320) 评论(0)  编辑  收藏 所属分类: JSP/PHP


只有注册用户登录后才能发表评论。
网站导航: