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

Form & Working with JavaScript

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 0px 0px;}.clear {clear:both;}

function validate(form) { var returnValue = 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(); }

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; }

<form name="frmRegister" method="post" action="register.aspx" onsubmit="return validate(this);"> Username: Password: Confirm your password:

function validate(form) { var returnValue=true; var formElements = form.elements; for (var i=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; }

<form name="frmEnquiry" method="post" action="register.aspx" onsubmit="return validate(this);"> Name: Please enter your query here:

function validate(form) { var returnValue = true; var selectedOption = form.selCards.selectedIndex; if (selectedOption=="0") { alert("Please select a suit of cards."); returnValue = false; } return returnValue; }

<form name="frmCards" action="cards.asp" method="get" onsubmit="return validate(this)" > Select a suit of cards Hearts Diamonds Spades Clubs

function validate(form) { var radioButtons = form.radSuit; radioChosen = false; for (var i=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; }

<form name="frmCards" action="cards.aspx" method="post" onsubmit="return validate(this)" > Please select a suit of cards. Hearts Diamonds Spades Clubs

function countCheckboxes(field) { var intCount = 0 for (var i = 0; i < field.length; i++) { if (field[i].checked) intCount++; } alert("You selected " + intCount + " checkbox(es)"); }

Please select a suit of cards. Hearts Diamonds Spades Clubs

I understand that this software has no liability: <input type="checkbox" value="0" name="chkAgree" id="chkAgree" onclick="document.frmAgree.btnSubmit.disabled=false" /> You will not be able to submit this form unless you agree to the terms and conditions and check the terms and conditions box.

Focus on First Form Item User name Password

Auto-Tabbing Between Fields Enter your date of birth: <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" />

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'; }

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

Case Conversion 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. <input type="text" name="case" size="20" onblur="this.value=this.value.toLowerCase();" /> 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. <input type="text" name="case" size="20" onblur="this.value=this.value.toUpperCase();" />