可以通过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
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 替换某一选项
<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 删除选项。
以上就是html中表单form的相关知识说明的详细内容。