首页  >  文章  >  web前端  >  HTML中表单form的相关知识说明

HTML中表单form的相关知识说明

高洛峰
高洛峰原创
2017-03-08 15:55:201084浏览

 在Javascript 中,页面上的每一对

标记都解析为一个对象,即form 对象。

可以通过document.forms 获取以源顺序排列的文档中所有form 对象的集合。


如果一个表单对象定义如下:
获得该表单对象的方法:
  i>  document.forms["frm1"];   // 根据name属性值
 ii>  document.forms[0];        // 根据索引号
iii>  document.frm1;            // 直接根据name值获得对象


 

form 表单应该注意的属性:

elements:获取以源顺序排列的给定表单中所有控件的集合。但是 对象不在此集合内。


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 表单中的

 

每一个表单元素的文字描述都应该使用

       该标记用于将文字绑定到对应的表单元素上,它的for 属性指定它所要绑定的表单元素id 值。绑定后单击该文字,鼠标将聚焦到对应的文本框中或选中对应的选项。

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

示例代码:


    
   

    
   

   
   


注意:

i >    每个表单元素应当尽量使用

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

        name 属性:用来将数据提交到服务器;

               id 属性:用来在客户端做相应的操作;如:

                                ( name 属性和 id 属性应该尽可能地使用相同的或相关的值。)

 


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

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

 


Javascript 操作form 表单元素,比较少用的属性:

defaultChecked 设置或获取复选框或单选钮的状态。
defaultValue 设置或获取对象的初始内容。
disabled 设置或获取控件的状态。

 

提交表单

提交表单的示例:


  
      onclick="document.forms['frm'].submit();">
      onclick="this.disabled=true; this.form.submit();">
  


注意:

i >   如果使用submit( ) 方法来提交表单,则不会触发

表单元素的onsubmit 事件,

       这是与用提交元素不同的地方;

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

       减少服务器的响应负担;

 


设置文本框

i >   控制文本框的字符个数




注意:多行文本框