[转载]HTML 中表单form 的相关知识

[转载]HTML 中表单form 的相关知识 – xugang – 博客园.

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 选择器的使用等。

在客户端,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 直接将创建的新选项替换掉指定位置的选项。

iiii >  删除某一选项

<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) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏