注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

前端攻城师 郭培的博客

Be the best you can

 
 
 

日志

 
 
关于我

前端技术:http://hszy00232.blog.163.com/ 前端设计:http://blog.sina.com.cn/hsjs00232 职业:web前端工程师 现居地:北京 My QQ:365246295 Mail:hszy00232@163.com

网易考拉推荐

HTML 中表单form 的相关知识  

2010-09-12 20:38:45|  分类: javascript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
HTML 中表单form 的相关知识 - 郭培 - 前端工程师 郭培的博客
 

在Javascript 中,页面上的每一对<form> 标记都解析为一个对象,即form 对象。可以通过document.forms 获取以源顺序排列的文档中所有form 对象的集合。

如果一个表单对象定义如下:

<form name="frm1" method="post" action="login.aspx">

获得该表单对象的方法:

document.forms["frm1"];   // 根据name属性值
document.forms[0];        // 根据索引号
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> 标记!

该标记用于将文字绑定到对应的表单元素上,它的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>
HTML 中表单form 的相关知识 - 郭培 - 前端工程师 郭培的博客

 注意:

  1. 每个表单元素应当尽量使用<label>标签来提高用户体验;
  2. 每个表单元素应当分配name属性和id属性
    name 属性:用来将数据提交到服务器;
     id 属性:用来在客户端做相应的操作;如:<label>标签的绑定、CSS 选择器的使用等。
  3.  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>
HTML 中表单form 的相关知识 - 郭培 - 前端工程师 郭培的博客

 注意:

  1. 如果使用submit( ) 方法来提交表单,则不会触发<form> 表单元素的onsubmit 事件,这是与用<input  type="submit">提交元素不同的地方;
  2. 可以在按钮的提交或点击事件中,使用disabled 属性来禁用用户反复点击提交按钮的行为,减少服务器的响应负担;

设置文本框

控制文本框的字符个数代码:

<script language="javascript">
function LessThan(_textArea){
    //返回文本框字符个数是否符号要求的boolean值
    return _textArea.value.length < _textArea.getAttribute("maxlength");
}
</script>
<label for="comments">多行文本框:</label>
<textarea name="comments" id="comments" cols="40" rows="4" maxlength="50" onkeypress="return LessThan(this);">
</textarea>
HTML 中表单form 的相关知识 - 郭培 - 前端工程师 郭培的博客

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

鼠标经过时,自动选中文本框代码:

<script language="javascript">
window.onload=function(){
 var txtName = document.getElementsByName("myname")[0];
 txtName.onmouseover=function(){
  this.focus();
 };
 txtName.onfocus=function(){
  this.select();
 };
}
</script>
<label for="name">文本框:</label>
<input type="text" name="myname" id="name" value="默认值被选中" maxlength="10">
HTML 中表单form 的相关知识 - 郭培 - 前端工程师 郭培的博客
实现了行为与结构的分离。

设置单选按钮

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

<script language="javascript">
function getChoice(){
 var oForm = document.forms["frm"];
 var aChoices = oForm.sex;
 for(var i=0;i<aChoices.length;i++)
  if(aChoices[i].checked) 
   break; 
  alert("您选中的是:"+aChoices[i].value); 
}
function setChoice(_num){
 var oForm = document.forms["frm"];
 oForm.sex[_num].checked=true;
}
</script>
<form name="frm" method="post" action="javascript:alert('提交成功!');">
 <label for="nan">男</label><input type="radio" name="sex" id="nan" value="男" checked/>
 <label for="nv">女</label><input type="radio" name="sex" value="女" id="nv"/>
 <input type="button" value="获取选中项" onclick="getChoice();">
 <input type="button" value="设置第1项被选中" onclick="setChoice(1);">
</form>
HTML 中表单form 的相关知识 - 郭培 - 前端工程师 郭培的博客

需要保证同一组单选按钮的name 属性值相同即可。

设置复选框

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

<script language="javascript">
function changeBoxes(_num){
 var oForm = document.forms["frm"];
 var aCheckbox = oForm.myCheckbox;
 for(var i=0;i<aCheckbox.length;i++){
  if(_num<0){
   aCheckbox[i].checked = !aCheckbox[i].checked;
  }else{
   aCheckbox[i].checked = _num;
  }
 }
}
</script>
<form name="frm" method="post" action="javascript:alert('提交成功!');">
 <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>
HTML 中表单form 的相关知识 - 郭培 - 前端工程师 郭培的博客

 设置下拉列表框

下拉列表框的multiple 属性用于设置或获取下拉列表框是否可以选中多个选项。下拉列表框默认只能选中一项,若要设置为可以选中多项,则<select  multiple = "multiple"> 即可。

type 属性:javascript 语言根据type 属性的值获得下拉列表框select 控件的类型。
type 属性的值为:select-multiple 或 select-one。

注意:下拉列表框的类型由multiple 属性控制

查看下拉列表框的选项(单选项 & 多选项):

<script language="javascript">
function getSelectValue(_myselect){
 var oForm = document.forms["frm"];
 var oSelectBox = oForm.elements[_myselect];
 if(oSelectBox.type=="select-one"){
  var iChoice = oSelectBox.selectedIndex;
  alert("单选,您选中了"+oSelectBox.options[iChoice].text);
 }else{
  var oChoices = new Array();
  for(var i=0;i<oSelectBox.options.length;i++){
   if(oSelectBox.options[i].selected){
    oChoices.push(oSelectBox.options[i].text);
   }   
  }
  alert("多选,您选中了"+oChoices.join());
 }
}
</script>
<form name="frm" method="post">
 <select id="mysel" name="mysel" multiple="multiple">
    <option value="a">AA</option>
    <option value="b">BB</option>
    <option value="c">CC</option>
 </select>
 <input type="button" value="查看选项" onclick="getSelectValue('mysel')"/>
</form>
HTML 中表单form 的相关知识 - 郭培 - 前端工程师 郭培的博客

添加下拉列表框的选项-追加新选项到末尾
<script type="text/javascript">  
  function addOption(Box){
   var oForm = document.forms["frm"];
   var oBox = oForm.elements[Box];
   var oPtion = new Option("DD","d");
   oBox.options[oBox.options.length] = oPtion;
  }
</script>
<form name="frm" method="post">
<select id="mysel" name="mysel" multiple="multiple">   
<option value="a">AA</option>   
<option value="b">BB</option>   
<option value="c">CC</option>
</select>
<input type="button" value="增加选项" onclick="addOption('mysel')"/>
</form>
HTML 中表单form 的相关知识 - 郭培 - 前端工程师 郭培的博客
 

添加下拉列表框的选项-插入新选项到指定位置

<script type="text/javascript">  
function addOption(_select,_num){
 var oForm = document.forms["frm"];
 var oBox = oForm.elements[_select];
 var oPtion = new Option("text值","value值");
 oBox.options[oBox.options.length] = oPtion;
 oBox.insertBefore(oPtion,oBox.options[_num]);
}  
</script>
<form name="frm" method="post">
<select id="mysel" name="mysel" multiple="multiple">   
<option value="a">AA</option>   
<option value="b">BB</option>   
<option value="c">CC</option>
</select>
<input type="button" value="插入选项" onclick="addOption('mysel',0)"/>
</form>
HTML 中表单form 的相关知识 - 郭培 - 前端工程师 郭培的博客

注意:

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

添加下拉列表框的选项-替换某一选项

<script type="text/javascript">  
function addOption(_select,_num){
 var oForm = document.forms["frm"];
 var oBox = oForm.elements[_select];
 var oPtion = new Option("text值","value值");
 oBox.options[_num] = oPtion;
}  
</script>
<form name="frm" method="post">
<select id="mysel" name="mysel" multiple="multiple">   
<option value="a">AA</option>   
<option value="b">BB</option>   
<option value="c">CC</option>
</select>
<input type="button" value="替换选项" onclick="addOption('mysel',1)"/>
</form>
HTML 中表单form 的相关知识 - 郭培 - 前端工程师 郭培的博客

添加下拉列表框的选项-删除某一选项

<script type="text/javascript">  
function addOption(_select,_num){
 var oForm = document.forms["frm"];
 var oBox = oForm.elements[_select];
 oBox.options[_num] = null;
}  
</script>
<form name="frm" method="post">
<select id="mysel" name="mysel" multiple="multiple">   
<option value="a">AA</option>   
<option value="b">BB</option>   
<option value="c">CC</option>
</select>
<input type="button" value="删除选项" onclick="addOption('mysel',1)"/>
</form>
HTML 中表单form 的相关知识 - 郭培 - 前端工程师 郭培的博客
  评论这张
 
阅读(513)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017