آموزش طراحی وب سایت جلسه سیزدهم– فرم و جاوا اسکریپت

1. آموزش طراحی وب سایتجلسه سیزدهم– فرم و جاوا اسکریپت تدریس طراحی وببرای اطلاعات بیشتر تماس بگیرید تاوشماره تماس: 0912577399009371410986پست الکترونیک : TargetLearning@gmail.com

2. Form & Working with JavaScript

3. forms.css /* forms style sheet */ body, input, textarea { font-family:arial, verdana, sans-serif; } .label { width:175px; float:left; text-align:right; margin:10px 5px 0px 0px;} .formElement { width:175px; float:left; margin:10px 0px 0px0px;} .clear {clear:both;}

4. <script type="text/JavaScript"> function validate(form) { varreturnValue = true; var username = frmRegister.txtUserName.value; var password1 = frmRegister.txtPassword.value; var password2 = frmRegister.txtPassword2.value; if(frmRegister.txtUserName.length < 6) { returnValue = false; alert("Your username must be at least\n6 characters long.\nPlease try again."); frmRegister.txtUserName.focus(); }

5. if (password1.length < 6) { returnValue = false; alert("Your password must be at least\n6 characters long.\nPlease try again."); frmRegister.txtPassword.value = ""; frmRegister.txtPassword2.value = ""; frmRegister.txtPassword.focus(); } if (password1.value != password2.value) { returnValue = false; alter("Your password entries did not match.\nPlease try again."); frmRegister.txtPassword.value = ""; frmRegister.txtPassword2.value = ""; frmRegister.txtPassword.focus(); } return returnValue; } </script>

6. <link rel="stylesheet" type="text/css" href="forms.css">

7. <form name="frmRegister" method="post" action="register.aspx" onsubmit="return validate(this);"> <div class="label"><label for="txtUsername">Username:</label></div> <div class="formElement"><input type="text" name="txtUserName" id="txtUserName" size="12" /></div> <div class="clear"></div> <div class="label"><label for="txtPassword">Password: </td></label></div> <div class="formElement"><input type="password" name="txtPassword" id="txtPassword" size="12" /></div> <div class="clear"></div> <div class="label"><label for="txtPassword2">Confirm your password:</label></div> <div class="formElement"><input type="password" name="txtPassword2" id="txtPassword2" size="12" /></div> <div class="clear"></div> <div class="label">&nbsp;</label></div> <div class="formElement"><input type="submit" value="Log in" /></div> </form>

9. function validate(form) { varreturnValue=true; varformElements = form.elements; for (vari=0; i<formElements.length; i++) { currentElement=formElements[i]; if (currentElement.value=="" && currentElement.className=="required") { alert("The required field \" "+currentElement.name+"\" is empty. Please provide a value for it."); currentElement.focus(); returnValue = false; break; } } return returnValue; }

10. <form name="frmEnquiry" method="post" action="register.aspx" onsubmit="return validate(this);"> <div class="label"><label for="Name">Name:</div> <div class="formElement"><input type="text" class="required" name="Name" id="Name" size="12" /></div> <div class="clear"></div> <div class="label"><label for="E-mail">E-mail:</div> <div class="formElement"><input type="text" class="required" name="E-mail" id="Email" size="12" /></div> <div class="clear"></div> <div class="label"><label for="txtEmail">Please enter your query here:</div> <div class="formElement"><textarea rows="8" class="required" cols="30" name="Query" id="Query"></textarea></div> <div class="clear"></div> <div class="label"><label for="txtEmail">&nbsp;</div> <div class="formElement"><input type="submit" class="" value="Submit your query" /></div> </form>

12. <script type="text/JavaScript" language="JavaScript"> function validate(form) { varreturnValue = true; varselectedOption = form.selCards.selectedIndex; if (selectedOption=="0") { alert("Please select a suit of cards."); returnValue = false; } return returnValue; }

13. <form name="frmCards" action="cards.asp" method="get" onsubmit="return validate(this)" > <select name="selCards" id="selCards"> <option>Select a suit of cards</option> <option value="hearts">Hearts</option> <option value="diamonds">Diamonds</option> <option value="spades">Spades</option> <option value="clubs">Clubs</option> </select> <input type="submit" value="Send selection" /> </form>

15. <script type="text/JavaScript" language="JavaScript"> function validate(form) { varradioButtons = form.radSuit; radioChosen = false; for (vari=0; i<radioButtons.length; i++) { if (radioButtons[i].checked) { radioChosen=true; returnValue = true; } } if (radioChosen == false) { returnValue = false; alert("You did not select a suit of cards"); } return returnValue; } </script>

16. <form name="frmCards" action="cards.aspx" method="post" onsubmit="return validate(this)" > <p>Please select a suit of cards.</p> <p><input type="radio" name="radSuit" value="hearts" /> Hearts </p> <p><input type="radio" name="radSuit" value="diamonds" /> Diamonds </p> <p><input type="radio" name="radSuit" value="spades" /> Spades </p> <p><input type="radio" name="radSuit" value="clubs" /> Clubs </p> <p><input type="submit" value="Submit choice" /></p> </form>

18. <script type="text/JavaScript" language="JavaScript"> function countCheckboxes(field) { varintCount = 0 for (vari = 0; i < field.length; i++) { if (field[i].checked) intCount++; } alert("You selected " + intCount + " checkbox(es)"); } </script>

19. <form name="frmCards" action="cards.aspx" method="post"> <p>Please select a suit of cards.</p> <p><input type="checkbox" name="chkSuit" value="hearts" /> Hearts </p> <p><input type="checkbox" name="chkSuit" value="diamonds" /> Diamonds </p> <p><input type="checkbox" name="chkSuit" value="spades" /> Spades </p> <p><input type="checkbox" name="chkSuit" value="clubs" /> Clubs </p> <p><input type="button" value="Count checkboxes" onclick="countCheckboxes(frmCards.chkSuit)" /></p> </form>

21. <body onload="document.frmAgree.btnSubmit.disabled=true"> <form name="frmAgree" action="test.aspx" method="post"> I understand that this software has no liability: <input type="checkbox" value="0" name="chkAgree" id="chkAgree" onclick="document.frmAgree.btnSubmit.disabled=false" /> <input type="submit" name="btnSubmit" value="Go to download" /><br /> <p>You will not be able to submit this form unless you agree to the <a href="terms.html">terms and conditions</a> and check the terms and conditions box.</p> </form> </body>

23. Focus on First Form Item <body onload="document.frmLogin.txtUserName.focus();"> <form name="frmLogin" action="login.aspx" method="post"> User name <input type="text" name="txtUserName" id="txtUserName" /><br /><br /> Password <input type="password" name="txtPassword" id="txtPassword" /><br /><br /> <input type="submit" value="Login" /> </form> </body>

25. Auto-Tabbing Between Fields <body onload="document.frmDOB.txtMonth.focus();"> <form name="frmDOB" action="example.asp" method="post"> Enter your date of birth:<br /> <input name="txtMonth" id="txtMonth" size="3" maxlength="2" onkeyup="if(this.value.length>=2) this.form.txtDay.focus();"/> <input name="txtDay" id="txtDay" size="3" maxlength="2" onkeyup="if(this.value.length>=2) this.form.txtYear.focus();" /> <input name="txtYear" id="txtYear" size="5" maxlength="4" onkeyup="if(this.value.length>=4) this.form.submit.focus();" /> <input type="submit" name="submit" value="Send" /> </form> </body>

27. Disabling a Text Input function handleOther(strRadio) { if (strRadio == "other") { document.frmReferrer.txtOther.disabled = false; document.frmReferrer.txtOther.value = ''; } else { document.frmReferrer.txtOther.disabled = true; document.frmReferrer.txtOther.value = 'not applicable'; } } </script>

28. <body onload="document.frmReferrer.txtOther.disabled=true; document.frmReferrer.txtOther.value='not applicable' "> <h2>How did you hear about us?</h2> <form name="frmReferrer"> <input type="radio" name="radHear" value="1" onclick="handleOther(this.value);" />From a friend<br /> <input type="radio" name="radHear" value="2" onclick="handleOther(this.value);" />TV Ad<br /> <input type="radio" name="radHear" value="3" onclick="handleOther(this.value);" />Magazine Ad<br /> <input type="radio" name="radHear" value="4" onclick="handleOther(this.value);" />Newspaper Ad<br /> <input type="radio" name="radHear" value="5" onclick="handleOther(this.value);" />Internet<br /> <input type="radio" name="radHear" value="other" onclick="handleOther(this.value);" />Other... Please specify: <input type="text" name="txtOther" /> </form>

30. Case Conversion <body> <p>Enter some UPPER CASE text and when you remove the focus from the text input (by pressing tab), it will all get transformed to lower case.</p> <form name="frmChangeCase" method="post" action="example.asp"> <input type="text" name="case" size="20" onblur="this.value=this.value.toLowerCase();" /> </form> <p>Enter some lower case or mixed case text and when you remove the focus from the text input (by pressing tab), it will all get transformed to upper case.</p> <form name="frmChangeCase" method="post" action="example.asp"> <input type="text" name="case" size="20" onblur="this.value=this.value.toUpperCase();" /> </form> </body>