0
点赞
收藏
分享

微信扫一扫

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


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



设置单选按钮

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


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


举报

相关推荐

0 条评论