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" > 对象不在此集合内。

vartxtName=myform.elements[0];//获得表单的第一个元素

vartxtName=myform.elements["txtName"];//获得name属性值为"txtName"的元素

vartxtName=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">

functionLessThan(_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="returnLessThan(this);"></textarea>

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

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

<script language="javascript">

window.onload=function(){

vartxtName=document.getElementsByName("myName")[0];

txtName.onmouseover=function(){

this.focus();

};

txtName.onfocus=function(){

this.select();

};

}

</script>

<INPUT TYPE="text" NAME="myName" value="默认值被选中"/>

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

设置单选按钮

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

<scriptlanguage="javascript">

//获取选中项

functiongetChoice(){

varoForm=document.forms["myForm1"];

//radioName是单选按钮的name属性值

varaChoices=oForm.radioName;

//遍历整个单选项表

for(i=0;i<aChoices.length;i++)

if(aChoices[i].checked)

break;//如果发现了被选中项则退出

alert("您选中的是："+aChoices[i].value);

}

//设置选中项

functionsetChoice(_num){

varoForm=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 属性值相同即可。

设置复选框

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

<scriptlanguage="javascript">

functionchangeBoxes(_action){

varmyForm=document.forms["myForm1"];

//myCheckbox为所有复选框的name属性值

varoCheckBox=myForm.myCheckbox;

for(vari=0;i<oCheckBox.length;i++) //遍历每一个选项

if(_action<0)//反选

oCheckBox[i].checked=!oCheckBox[i].checked;

else

//_action为1是则全选,为0时则全不选

oCheckBox[i].checked=_action;

}

</script>

<formname="myForm1">

<inputtype="checkbox"name="myCheckbox">aa

<inputtype="checkbox"name="myCheckbox">bb

<inputtype="button"value="全选"onclick="changeBoxes(1);"/>

<inputtype="button"value="全不选"onclick="changeBoxes(0);"/>

<inputtype="button"value="反选"onclick="changeBoxes(-1);"/>

</form>

设置下拉列表框

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

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

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

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

i > 查看下拉列表框的选项（单选项 & 多选项）

<scriptlanguage="javascript">

functiongetSelectValue(_myselect){

varoForm=document.forms["myForm1"];

//根据参数(下拉列表框的name属性值)获得下拉菜单项

varoSelectBox=oForm.elements[_myselect];

//判断是单选还是多选

if(oSelectBox.type=="select-one"){

variChoice=oSelectBox.selectedIndex; //获取选中项

alert("单选，您选中了"+oSelectBox.options[iChoice].text);

}

else{

varaChoices=newArray();

//遍历整个下拉菜单

for(vari=0;i<oSelectBox.options.length;i++)

if(oSelectBox.options[i].selected)//如果被选中

//压入到数组中

aChoices.push(oSelectBox.options[i].text);

//输出结果

alert("多选，您选了："+aChoices.join());

}

}

</script>

<formmethod="post"name="myForm1">

<selectid="mysel"name="mysel"multiple="multiple"style="height:60px;">

<optionvalue="a">AA</option>

<optionvalue="b">BB</option>

<optionvalue="c">CC</option>

</select>

<inputtype="button"onclick="getSelectValue('mysel')"value="查看选项"/>

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

追加新选项到末尾

<scriptlanguage="javascript">

functionAddOption(Box){//追加选项到末尾

varoForm=document.forms["myForm1"];

varoBox=oForm.elements[Box];

varoOption=newOption("乒乓球","Pingpang");

oBox.options[oBox.options.length]=oOption;

}

</script>

插入新选项到指定位置

<scriptlanguage="javascript">

functionAddOption(_select,_num){

varoForm=document.forms["myForm1"];

varoBox=oForm.elements[_select];

varoOption=newOption("text值","value值");

//兼容IE7，先添加选项到最后，再移动

oBox.options[oBox.options.length]=oOption;

oBox.insertBefore(oOption,oBox.options[_num]);

}

</script>

<inputtype="button"value="添加乒乓球"onclick="AddOption('myselect',1);"/>

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

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

iii > 替换某一选项

<scriptlanguage="javascript">

//替换选项

functionReplaceOption(_select,_num){

varoForm=document.forms["myForm1"];

varoBox=oForm.elements[_select];

varoOption=newOption("text值","value值");

oBox.options[_num]=oOption;//替换第_num个选项

}

</script>

<inputtype="button"value="替换选项"onclick="ReplaceOption('selName',1);"/>

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

iv > 删除某一选项

<scriptlanguage="javascript">

functionRemoveOption(_select,_num){

varoForm=document.forms["myForm1"];

varoBox=oForm.elements[_select];

oBox.options[_num]=null; //删除选项

}

</script>

</head>

<body>

<selectid="mysel"name="mysel"multiple="multiple">

......

<inputtype="button"value="删除选项"onclick="RemoveOption('mysel',1);"/>

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