Html中表单Form的相关知识

在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
    ="默认值被选中"
     
    />

设置单选按钮

获取选中的单选按钮 & 设置单选按钮被选中。需要保证同一组单选按钮的name 属性值相同即可。

   
    
    <
    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);"
     
    />

设置复选框

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

   
    
    <
    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 删除选项。

玄机博客

1.本站内容仅供参考，不作为任何法律依据。用户在使用本站内容时，应自行判断其真实性、准确性和完整性，并承担相应风险。

2.本站部分内容来源于互联网，仅用于交流学习研究知识，若侵犯了您的合法权益，请及时邮件或站内私信与本站联系，我们将尽快予以处理。

3.本文采用知识共享署名4.0国际许可协议 [BY-NC-SA] 进行授权

4.根据《计算机软件保护条例》第十七条规定“为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，可以不经软件著作权人许可，不向其支付报酬。”您需知晓本站所有内容资源均来源于网络，仅供用户交流学习与研究使用，版权归属原版权方所有，版权争议与本站无关，用户本人下载后不能用作商业或非法用途，需在24个小时之内从您的电脑中彻底删除上述内容，否则后果均由用户承担责任；如果您访问和下载此文件，表示您同意只将此文件用于参考、学习而非其他用途，否则一切后果请您自行承担，如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。