表单form的相关知识

字体大小【小 中 大】来源：博客园 | 作者：CrazyFrom | 377 views | 2010-08-12

在Javascript 中，页面上的每一对

标记都解析为一个对象，即form 对象。可以通过document.forms 获取以源顺序排列的文档中所有form 对象的集合。

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

1

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

获得该表单对象的方法：

1
2
3

  i>  document.forms["frm1"];   // 根据name属性值
 ii>  document.forms[0];        // 根据索引号
iii>  document.frm1;            // 直接根据name值获得对象

form 表单应该注意的属性：

elements：获取以源顺序排列的给定表单中所有控件的集合。<input type=”image” > 对象不在此集合内。

1
2
3

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 值。绑定后单击该文字，鼠标将聚焦到对应的文本框中或选中对应的选项。

若安装了某些桌面主题，某些表单元素还会变换颜色来予以提示，这大大提高了用户体验。

示例代码：

1
2
3
4
5
6
7
8
9
10

<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>

效果如下：

注意：

1.每个表单元素应当尽量使用<label>标签来提高用户体验；

2.每个表单元素应当分配 name 属性 和 id 属性。

name 属性：用来将数据提交到服务器；

id 属性：用来在客户端做相应的操作；如：<label>标签的绑定、CSS 选择器的使用等。

在客户端，Javascript 对表单及表单元素的操作，更青睐于使用其name 属性。

因为，对于某些特定的表单元素(如：单选按钮等)，使用其name 属性更易于获得元素值，也更方便向服务器传送数据！

Javascript 操作form 表单元素，比较少用的属性：

defaultChecked 设置或获取复选框或单选钮的状态。

defaultValue 设置或获取对象的初始内容。

disabled 设置或获取控件的状态。

提交表单

提交表单的示例：

1
2
3
4
5
6

 <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>

效果如下：

注意：

1. 如果使用submit( ) 方法来提交表单，则不会触发

表单元素的onsubmit 事件，

这是与用<input type=”submit”>提交元素不同的地方；

2.可以在按钮的提交或点击事件中，使用disabled 属性来禁用用户反复点击提交按钮的行为，

减少服务器的响应负担；

1 2 3 下一页
版权所有:为网站而疯狂-给站长一个五星级的家转载请注明来源，谢谢！

还不快抢沙发       我也不甘寂寞

我看不过去了，也来两句 返回»  

友情提示：
1、请勿发表色情、违法、商业广告等信息，谢谢。
2、留言想要有头像？请看 “我” 的。


为网站而疯狂 建站学 上海网站建设 Huaidong Blog 龙图网 英文网站设计 申请友链 申请友链