欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

JavaScript笔记之表单处理

程序员文章站 2022-04-19 10:34:48
   如果需要从Web站点的用户那里收集信息，那么就需要使用表单。         表单...

   如果需要从Web站点的用户那里收集信息，那么就需要使用表单。
        表单可以包含大多数常见的图形界面元素，包括输入字段、单选按钮、复选框、弹出菜单和输入列表。另外，HTML表单可以包含密码字段，这种控件会隐藏用户的输入以免被别人偷看。
       在填写表格后，点击菜单上的Submit按钮将表单的信息发送到Web服务器，在服务器上CGI程序（Common Gateway Interface，它是在Web服务器上运行的一个脚本）会解释并操作这些数据。然后，常常将数据存储在数据库*以后使用。在服务器端使用数据之前，需要确保用户输入的数据是准确（正确）的格式。
      JavaScript是检查数据的好方法，这种技术称为表单验证（form validation）。尽管CGI可以完成验证（而且应该作为预防措施，因为有些用户会在浏览器中关闭JavaScript功能），但是在客户机用JavaScript进行验证要快得多，而且用户操作的效率也更高。
       关于表单一些概括：
   获取表单
[javascript]
var form=document.forms["form1"]; 
var form=document.fors[0]; 

 form对象事件
onsubmit在表单提交之前触发
onreset在表单被重置之前触发
引用表单元素
[javascript]
var element=tForm.elements[idex]; 
var element=tForm.elements[elementName]; 
 
遍历一个表单中的所有表单域
[javascript]
   for(var i=0;i<tForm.elements.length;i++){ 
   // 
} 
 
 表单域的通用属性
   1)创建只读(不可用)表单域
  element.disabled=true;
  element.disabled=false;
  2)获取表单域的值
  value
 表单域的通用方法
1)表单域获得焦点：focus()
2)表单域失去焦点：blur()
 
 表单域的通用事件
onFocus：获得焦点时，产生该事件
onBlur：失去焦点时，产生该事件
onselect：文字被加亮显示后（选择），产生该文件
onchange：表单域的值改变时
onclick:键盘单击
onkeydown:键盘按下
onkeyup:键盘松开
onkeypress:键盘按下松开
onmouseover:鼠标移上
onmouseout:鼠标移出
onmousedown:鼠标按下
onmouseup:鼠标松开
文本域、复选框、单选按钮、下拉列表框、表单验证等。
    动态地改变菜单
         常常需要通过弹出菜单向用户提供输入的机会，而且希望根据用户在另一个弹出菜单中所作的选择，改变一个或多个弹出菜单内容，以下示例用来选择月份，即根据所选月份选月份的天数，填充第二个弹出菜单：
[html]
<html xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
     <title>Dynamic Menus</title> 
     <script type="text/javascript" src="script.js"></script> 
  </head> 
  <body bgcolor="#FFFFFF"> 
  <form action="#"> 
    <select id="months"> 
       <option value="">Month</option> 
       <option value="0">January</option> 
       <option value="1">February</option> 
       <option value="2">March</option> 
       <option value="3">April</option> 
       <option value="4">May</option> 
       <option value="5">June</option> 
       <option value="6">July</option> 
       <option value="7">August</option> 
       <option value="8">September</option> 
       <option value="9">October</option> 
       <option value="10">November</option> 
       <option value="11">December</option> 
    </select> 
      
    <select id="days"> 
       <option>Day</option> 
    </select> 
  </form> 
  </body> 
</html> 

在弹出菜单中选择一个值，然后就可以创建第二个弹出菜单的内容
[javascript]
/**
 * 动态地改变菜单
 */ 
window.onload=initForm; 
 
function initForm(){ 
    document.getElementById("months").selectedIndex=0; 
    document.getElementById("months").onchange=populateDay; 
} 
 
function populateDay(){ 
    var monthDays=new Array(31,28,31,30,31,30,31,31,30,31,30,31); 
    var monthStr=this.options[this.selectedIndex].value; 
    //使用this（用户在第一个菜单中选择的月份）从菜单中获得值，并将其存储在monthStr中 
    if(monthStr!=""){ 
        var theMonth=parseInt(monthStr); 
        document.getElementById("days").options.length=0; 
        for(var i=0;i<monthDays[theMonth];i++){ 
            document.getElementById("days").options[i]=new Option(i+1); 
        } 
    } 
}   


摘自  Yanghai 

上一篇： 分享一个基于jQuery，backbone.js和underscore.js的消息提示框架 - Backbone.Notifier

下一篇： oppofindx3pro火星版怎么隐藏应用?oppofindx3pro火星版隐藏应用教程

推荐阅读