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

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

如果一个表单对象定义如下:
<form name="frm1" method="post" action="login.aspx">
获得该表单对象的方法:
  i>  document.forms["frm1"];   // 根据name属性值
 ii>  document.forms[0];        // 根据索引号
iii>  document.frm1;            // 直接根据name值获得对象

form 表单应该注意的属性:

elements:获取以源顺序排列的给定表单中所有控件的集合。但是<input  type="image" > 对象不在此集合内。

var txtName = myform.elements[0];         //获得表单的第一个元素
var txtName = myform.elements["txtName"]; //获得name属性值为"txtName"的元素
var txtName = myform.elements.txtName;    //获得name属性值为"txtName"的元素

enctype:设置或获取表单的多用途网际邮件扩展(MIME) 编码。

这个属性的默认值为:application/x-www-form-urlencoded

如果要上传文件,则应该设置为:multipart/form-data

form 表单中的<label> 标记:

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

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

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

示例代码:

<form method="post" name="frm1">
    <label for="txt">点我将聚焦到文本框</label>
    <input type="text" id="txt" name="myname">
<br/>
    <label for="rdo">点我将选中单选框</label>
    <input type="radio" id="rdo" name="male"/>
<br/>
    <label for="cbo">点我将选中复选框</label>
    <input type="checkbox" id="cbo" name="hobby">
</form>

效果如下:点我将聚焦到文本框  
点我将选中单选框  
点我将选中复选框

注意:

i >    每个表单元素应当尽量使用<label>标签来提高用户体验;

ii >   每个表单元素应当分配 name 属性  和 id 属性

name 属性:用来将数据提交到服务器

id 属性:用来在客户端做相应的操作;如:<label>标签的绑定、CSS 选择器的使用等。

( name 属性和 id 属性应该尽可能地使用相同的或相关的值。)

在客户端,Javascript 对表单表单元素的操作,更青睐于使用其name 属性。

因为,对于某些特定的表单元素(如:单选按钮等),使用其name 属性更易于获得元素值,也更方便向服务器传送数据!

Javascript 操作form 表单元素,比较少用的属性:

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

提交表单

提交表单的示例:

  <form name="frm" method="post" action="javascript:alert('提交成功!');">
     <input type="button" value="提交功能" 
            onclick="document.forms['frm'].submit();">
     <input type="button" value="禁用反复提交" 
            onclick="this.disabled=true; this.form.submit();">
  </form>

效果如下:

注意:

i >   如果使用submit( ) 方法来提交表单,则不会触发<form> 表单元素的onsubmit 事件

这是与用<input  type="submit">提交元素不同的地方;

ii >  可以在按钮的提交或点击事件中,使用disabled 属性来禁用用户反复点击提交按钮的行为,

减少服务器的响应负担;

设置文本框

i >   控制文本框的字符个数

<script language="javascript">
function LessThan(_textArea){
    //返回文本框字符个数是否符号要求的boolean值
    return _textArea.value.length < _textArea.getAttribute("maxlength");
}
</script>
<label for="name">文本框:</label>
<input type="text" name="name" id="name" value="姓名" maxlength="10"></p>
<br>
<label for="comments">多行文本框:</label>
<textarea name="comments" id="comments" cols="40" rows="4" maxlength="50" onkeypress="return LessThan(this);"></textarea>

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

ii >  鼠标经过时,自动选中文本框

<script language="javascript">
window.onload = function(){
    var txtName = document.getElementsByName("myName")[0];
    txtName.onmouseover = function(){
       this.focus();
    };
    txtName.onfocus = function(){
       this.select();
    };
}
</script>
<INPUT TYPE="text" NAME="myName" value="默认值被选中" />

实现了行为与结构的分离。

设置单选按钮

获取选中的单选按钮 & 设置单选按钮被选中

<script language="javascript">
//获取选中项
function getChoice(){
    var oForm = document.forms["myForm1"];
    //radioName是单选按钮的name属性值
    var aChoices = oForm.radioName;
    //遍历整个单选项表
    for(i=0;i<aChoices.length;i++)   
        if(aChoices[i].checked)   
            break; //如果发现了被选中项则退出
    alert("您选中的是:"+aChoices[i].value);
}
//设置选中项
function setChoice(_num){
    var oForm = document.forms["myForm1"];
    //radioName是单选按钮的name属性值
    oForm.radioName[_num].checked = true; //其它选项的checked值会自动设置为false
}
</script>
//调用代码
<input type="button" value="获取选中项" onclick="getChoice();" />
<input type="button" value="设置第1项被选中" onclick="setChoice(0);" />

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

设置复选框

设置复选框的“全选”、“全不选”及“反选”功能

<script language="javascript">
function changeBoxes(_action){
    var myForm = document.forms["myForm1"];
    //myCheckbox 为所有复选框的name属性值
    var oCheckBox = myForm.myCheckbox;
 
    for(var i=0;i<oCheckBox.length;i++)    //遍历每一个选项
        if(_action < 0)//反选
            oCheckBox[i].checked = !oCheckBox[i].checked;
        else 
            //_action为1是则全选,为0时则全不选
            oCheckBox[i].checked = _action;
}
</script>
<form name="myForm1">
<input type="checkbox" name="myCheckbox">aa
<input type="checkbox" name="myCheckbox">bb
<input type="button" value="全选" onclick="changeBoxes(1);" />
<input type="button" value="全不选" onclick="changeBoxes(0);" />
<input type="button" value="反选" onclick="changeBoxes(-1);" />
</form>

设置下拉列表框

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

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

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

type 属性的值为:select-multiple 或 select-one (注意:下拉列表框的类型由multiple 属性控制)

i >  查看下拉列表框的选项(单选项 & 多选项)

<script language="javascript">
function getSelectValue(_myselect){
    var oForm = document.forms["myForm1"];
    //根据参数(下拉列表框的name属性值)获得下拉菜单项
    var oSelectBox = oForm.elements[_myselect];
    //判断是单选还是多选
    if(oSelectBox.type == "select-one"){
        var iChoice = oSelectBox.selectedIndex;    //获取选中项
        alert("单选,您选中了" + oSelectBox.options[iChoice].text);
    }
    else{
        var aChoices = new Array();
        //遍历整个下拉菜单
        for(var i=0;i<oSelectBox.options.length;i++)
            if(oSelectBox.options[i].selected)//如果被选中
              //压入到数组中
              aChoices.push(oSelectBox.options[i].text);
        //输出结果
        alert("多选,您选了:" + aChoices.join());
    }
}
</script>
<form method="post" name="myForm1">
<select id="mysel" name="mysel" multiple="multiple" style="height:60px;">
    <option value="a">AA</option>
    <option value="b">BB</option>
    <option value="c">CC</option>
</select>
<input type="button" onclick="getSelectValue('mysel')" value="查看选项" />

ii >  添加下拉列表框的选项

追加新选项到末尾

<script language="javascript">
function AddOption(Box){ //追加选项到末尾
    var oForm = document.forms["myForm1"];
    var oBox = oForm.elements[Box];
    var oOption = new Option("乒乓球","Pingpang");
    oBox.options[oBox.options.length] = oOption;
}
</script>

插入新选项到指定位置

<script language="javascript">
function AddOption(_select,_num){
    var oForm = document.forms["myForm1"];
    var oBox = oForm.elements[_select];
    var oOption = new Option("text值","value值");
    //兼容IE7,先添加选项到最后,再移动
    oBox.options[oBox.options.length] = oOption;
    oBox.insertBefore(oOption,oBox.options[_num]);
}
</script>
<input type="button" value="添加乒乓球" onclick="AddOption('myselect',1);" />

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

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

iii >  替换某一选项

<script language="javascript">
//替换选项
function ReplaceOption(_select,_num){
    var oForm = document.forms["myForm1"];
    var oBox = oForm.elements[_select];
    var oOption = new Option("text值","value值");
    oBox.options[_num] = oOption; //替换第_num 个选项
}
</script>
<input type="button" value="替换选项" onclick="ReplaceOption('selName',1);" />

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

iv >  删除某一选项

<script language="javascript">
function RemoveOption(_select,_num){
    var oForm = document.forms["myForm1"];
    var oBox = oForm.elements[_select];
    oBox.options[_num] = null;    //删除选项
}
</script>
</head>
<body>
<select id="mysel" name="mysel" multiple="multiple">
......
<input type="button" value="删除选项" onclick="RemoveOption('mysel',1);" />

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

form总结的更多相关文章

  1. form表单验证-Javascript

    Form表单验证: js基础考试内容,form表单验证,正则表达式,blur事件,自动获取数组,以及css布局样式,动态清除等.完整代码如下: <!DOCTYPE html PUBLIC &qu ...

  2. Form 表单提交参数

    今天因为要额外提交参数数组性的参数给form传到后台而苦恼了半天,结果发现,只需要在form表单对应的字段html空间中定义name = 后台参数名 的属性就ok了. 后台本来是只有模型参数的,但是后 ...

  3. s:form标签

    2017-01-07 17:43:18 基本的用法 <!-- Action类必须有一个无参的构造器,因为在执行action方法之前,拦截器已经创建了一个"空"的Action对 ...

  4. ASP.NET Aries JSAPI 文档说明:AR.Form、AR.Combobox

    AR.Form 文档 1:对象或属性: 名称 类型 说明 data 属性 编辑页根据主键请求回来的数据 method 属性 用于获取数据的函数指向,默认值Get objName 属性 用于拦截form ...

  5. form表单 ----在路上(15)

    form 表单就是将用户的信息提交到服务器,服务器会将信息存储活着根据信息查询数据进行增删改查,再将其返回给用户. 基本格式: <form action="" method ...

  6. 了解HTML表单之form元素

    前面的话 表单是网页与用户的交互工具,由一个<form>元素作为容器构成,封装其他任何数量的表单控件,还有其他任何<body>元素里可用的标签 表单能够包含<input& ...

  7. form表单的字符串进行utf-8编码

    <form>表单有assept-charset属性.该属性规定字符的编码方式,默认是"unknown",与文档的字符集相同. 该属性除了Internet explore ...

  8. js Form.elements[i]的使用实例

    function pdf(){    //一个html里面可能存在多个form,所以document.form[0]指的是第一个form,document.form[1]返回就是第二个form,如果没 ...

  9. PHP跨域form提交

    因为安全性因素,直接跨域访问是不被允许的. 1.PHP CURL方式 function curlPost($url,$params) { $postData = ''; foreach($params ...

  10. C#模拟HTTP Form请求上传文件

    using System; using System.Collections.Generic; using System.Text; using System.Net; using System.IO ...

随机推荐

  1. CentOS Linux release 7.3源码安装zabbix

    CentOS Linux release 7.3安装zabbix 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 前言: 我去年用用centos6的环境搭建了一下 zabbix3.0 ...

  2. Study 5 —— CSS概述

    CSS(Cascading Style Sheet)称为层叠样式表,也可以称为CSS样式表或样式表,其文件扩展名为.css,CSS是用于增强或控制网页样式,并允许将样式信息与网页内容分离的一种标记性语 ...

  3. 机器学习课程-第7周-支持向量机(Support Vector Machines)

    1. 优化目标 在监督学习中,许多学习算法的性能都非常类似,因此,重要的不是你该选择使用学习算法A还是学习算法B,而更重要的是,应用这些算法时,所创建的大量数据在应用这些算法时,表现情况通常依赖于你的 ...

  4. python学习笔记8--面向对象--属性和方法详解

    属性: 公有属性  (属于类,每个类一份) 普通属性  (属于对象,每个对象一份) 私有属性    (属于对象,跟普通属性相似,只是不能通过对象直接访问) 方法:(按作用) 构造方法 析构函数 方法: ...

  5. Java面试题系列(三)Java new一个对象的过程中发生了什么

    Person class Person{ private String name; private int age; public Person() { super(); } public Perso ...

  6. 20155334 2016-2017-2 《Java程序设计》第五周学习总结

    20155334 2016-2017-2 <Java程序设计>第五周学习总结 教材学习内容总结 第八章:异常处理 Java中所有错误都会被打包为对象,在编程的时候会遇到因各种原因而导致的错 ...

  7. 打包pyinstaller

    安装:pip3 install pyinstaller 了解几个常用命令 参数 用处 -F 将程序打包成一个文件 -w 去除黑框 -i 添加程序图标 我们将需要打包的test.py文件放到桌面上,之后 ...

  8. 【加密】Md5Util

    import java.security.MessageDigest; import java.security.NoSuchAlgorithmException; public class Md5U ...

  9. GET和POST有什么区别?及为什么网上多数答案都是错的(转载)

    这仅仅是我认为比较好的关于get和post区别的解答,然后把作者的一些文字踢除留下比较干的部分. 作者:南柯之石链接:http://www.cnblogs.com/nankezhishi/archiv ...

  10. mysql案例-sysbench安装测试

    一 地址 githup地址https://github.com/akopytov/sysbench二 版本 sysbench 1.0.15 curl -s https://packagecloud.i ...