JavaScript就这么回事4：表单

43 表单构成

 
1. <form method=”post” action=”target.html” name=”thisForm”>
    
2. <input type=”text” name=”myText”>
    
3. <select name=”mySelect”>
    
4. <option value=”1”>First Choiceoption>
    
5. <option value=”2”>Second Choiceoption>
    
6. select>
    
7. <br>
    
8. <input type=”submit” value=”Submit Me”>
    
9. form>
   

44 访问表单中的文本框内容

1. <form name=”myForm”>
   
2. <input type=”text” name=”myText”>
   
3. form>
   
4. <a href='#' onClick='window.alert(document.myForm.myText.value);'>Check Text Fielda>
   

45 动态复制文本框内容

1. <form name=”myForm”>
   
2. Enter some Text: <input type=”text” name=”myText”><br>
   
3. Copy Text: <input type=”text” name=”copyText”>
   
4. form>
   
5. <a href=”#” onClick=”document.myForm.copyText.value =
   
6. document.myForm.myText.value;”>Copy Text Fielda>
   

46 侦测文本框的变化

1. <form name=”myForm”>
   
2. Enter some Text: <input type=”text” name=”myText” onChange=”alert(this.value);”>
   
3. form>
   

47 访问选中的Select

1. <form name=”myForm”>
   
2. <select name=”mySelect”>
   
3. <option value=”First Choice”>1option>
   
4. <option value=”Second Choice”>2option>
   
5. <option value=”Third Choice”>3option>
   
6. select>
   
7. form>
   
8. <a href='#' onClick='alert(document.myForm.mySelect.value);'>Check Selection Lista>
   

48 动态增加Select项

 
1. <form name=”myForm”>
    
2. <select name=”mySelect”>
    
3. <option value=”First Choice”>1option>
    
4. <option value=”Second Choice”>2option>
    
5. select>
    
6. form>
    
7. <script language=”JavaScript”>
    
8. document.myForm.mySelect.length++;
    
9. document.myForm.mySelect.options[document.myForm.mySelect.length - 1].text = “3”;
   
10. document.myForm.mySelect.options[document.myForm.mySelect.length - 1].value = “Third Choice”;
    
11. 
    

49 验证表单字段

 
1. <script language=”JavaScript”>
    
2. function checkField(field) { 
    
3. if (field.value == “”) { 
    
4. window.alert(“You must enter a value in the field”);
    
5. field.focus();
    
6.  }
    
7.  }
    
8. 
    
9. 
   
10. Text Field: 
    
11. 
    
    
12. 
    

50 验证Select项

1. function checkList(selection) { 
   
2. if (selection.length == 0) { 
   
3. window.alert(“You must make a selection from the list.”);
   
4. return false;
   
5.  }
   
6. return true;
   
7.  }
   

51 动态改变表单的action

1. <form name=”myForm” action=”login.html”>
   
2. Username: <input type=”text” name=”username”><br>
   
3. Password: <input type=”password” name=”password”><br>
   
4. <input type=”button” value=”Login” onClick=”this.form.submit();”>
   
5. <input type=”button” value=”Register” onClick=”this.form.action = ‘register.html’; this.form.submit();”>
   
6. <input type=”button” value=”Retrieve Password” onClick=”this.form.action = ‘password.html’; this.form.submit();”>
   
7. form>
   

52 使用图像按钮

1. <form name=”myForm” action=”login.html”>
   
2. Username: <input type=”text” name=”username”><br>
   
3. Password: <input type=”password”name=”password”><br>
   
4. <input type=”image” src=”login.gif” value=”Login”>
   
5. form>
   
6. //注意：图像按钮在表单中的作用相当于提交按钮
   

53 表单数据的加密

 
1. <SCRIPT LANGUAGE='JavaScript'>
    
2. 
   
3. 
   
4. 
   
5. Enter Some Text: 
   
6. 
   

上面的encryptForm方法把表单中的数据转换为编码，在提交表单之前完成了简单的表单数据加密～