转自javascript.com.cn(放在这里主要是方便我自己的学习,如果不允许的话,请通知我,我将自行删除)
43 表单构成
<form method=”post” action=”target.html” name=”thisForm”> <input type=”text” name=”myText”> <select name=”mySelect”> <option value=”1”>First Choice</option> <option value=”2”>Second Choice</option> </select> <br> <input type=”submit” value=”Submit Me”> </form>
44 访问表单中的文本框内容
<form name=”myForm”> <input type=”text” name=”myText”> </form> <a href='#' onClick='window.alert(document.myForm.myText.value);'>Check Text Field</a>
45 动态复制文本框内容
<form name=”myForm”> Enter some Text: <input type=”text” name=”myText”><br> Copy Text: <input type=”text” name=”copyText”> </form> <a href=”#” onClick=”document.myForm.copyText.value = document.myForm.myText.value;”>Copy Text Field</a>
46 侦测文本框的变化
<form name=”myForm”> Enter some Text: <input type=”text” name=”myText” onChange=”alert(this.value);”> </form>
47 访问选中的Select
<form name=”myForm”> <select name=”mySelect”> <option value=”First Choice”>1</option> <option value=”Second Choice”>2</option> <option value=”Third Choice”>3</option> </select> </form> <a href='#' onClick='alert(document.myForm.mySelect.value);'>Check Selection List</a>
48 动态增加Select项
<form name=”myForm”> <select name=”mySelect”> <option value=”First Choice”>1</option> <option value=”Second Choice”>2</option> </select> </form> <script language=”JavaScript”> document.myForm.mySelect.length++; document.myForm.mySelect.options[document.myForm.mySelect.length - 1].text = “3”; document.myForm.mySelect.options[document.myForm.mySelect.length - 1].value = “Third Choice”; </script>
49 验证表单字段
<script language=”JavaScript”> function checkField(field) { if (field.value == “”) { window.alert(“You must enter a value in the field”); field.focus(); } } </script> <form name=”myForm” action=”target.html”> Text Field: <input type=”text” name=”myField”onBlur=”checkField(this)”> <br><input type=”submit”> </form>
50 验证Select项
function checkList(selection) { if (selection.length == 0) { window.alert(“You must make a selection from the list.”); return false; } return true; }
51 动态改变表单的action
<form name=”myForm” action=”login.html”> Username: <input type=”text” name=”username”><br> Password: <input type=”password” name=”password”><br> <input type=”button” value=”Login” onClick=”this.form.submit();”> <input type=”button” value=”Register” onClick=”this.form.action = ‘register.html’; this.form.submit();”> <input type=”button” value=”Retrieve Password” onClick=”this.form.action = ‘password.html’; this.form.submit();”> </form>
52 使用图像按钮
<form name=”myForm” action=”login.html”> Username: <input type=”text” name=”username”><br> Password: <input type=”password”name=”password”><br> <input type=”image” src=”login.gif” value=”Login”> </form>
53 表单数据的加密
<SCRIPT LANGUAGE='JavaScript'> <!-- function encrypt(item) { var newItem = ''; for (i=0; i < item.length; i++) { newItem += item.charCodeAt(i) + '.'; } return newItem; } function encryptForm(myForm) { for (i=0; i < myForm.elements.length; i++) { myForm.elements.value = encrypt(myForm.elements.value); } } > </SCRIPT> <form name='myForm' onSubmit='encryptForm(this); window.alert(this.myField.value);'> Enter Some Text: <input type=text name=myField><input type=submit> </form>
上面的encryptForm方法把表单中的数据转换为编码,在提交表单之前完成了简单的表单数据加密~
原始的个站转移了