您现在的位置： 网页制作教程网 >> 网页特效 >> Javascript 教程 >> 文章正文

JavaScript就这么回事4：表单  


还是先继续写完JS就这么回事系列吧～ 
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 Choice</option> 
5: <option value=”2”>Second Choice</option> 
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 Field</a>  


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 Field</a>  


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”>1</option> 
4: <option value=”Second Choice”>2</option> 
5: <option value=”Third Choice”>3</option> 
6: </select> 
7: </form> 
8: <a href='#' onClick='alert(document.myForm.mySelect.value);'>Check Selection List</a>  


48 动态增加Select项 

1: <form name=”myForm”> 
2: <select name=”mySelect”> 
3: <option value=”First Choice”>1</option> 
4: <option value=”Second Choice”>2</option> 
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: </script>  


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: </script> 
9: <form name=”myForm” action=”target.html”> 
10: Text Field: <input type=”text” name=”myField”onBlur=”checkField(this)”> 
11: <br><input type=”submit”> 
12: </form>  


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: function encrypt(item) {  
4: var newItem = ''; 
5: for (i=0; i < item.length; i++) {  
6: newItem += item.charCodeAt(i) + '.'; 
7: } 
8: return newItem; 
9: } 
10: function encryptForm(myForm) {  
11: for (i=0; i < myForm.elements.length; i++) {  
12: myForm.elements[i].value = encrypt(myForm.elements[i].value); 
13: } 
14: } 
15:  
16: //--> 
17: </SCRIPT> 
18: <form name='myForm' onSubmit='encryptForm(this); window.alert(this.myField.value);'> 
19: Enter Some Text: <input type=text name=myField><input type=submit> 
20: </form>  

上一页  [1] [2] [3] [4] [5] 下一页