آموزش طراحی وب سایت جلسه سیزدهم– فرم و جاوا اسکریپت
DESCRIPTION
آموزش طراحی وب سایت جلسه سیزدهم– فرم و جاوا اسکریپت. تدریس طراحی وب برای اطلاعات بیشتر تماس بگیرید تاو شماره تماس: 09125773990 09371410986 پست الکترونیک : [email protected]. Form & Working with JavaScript. forms.css. /* forms style sheet */ body, input, textarea { - PowerPoint PPT PresentationTRANSCRIPT
آموزش طراحی وب سایتجلسه سیزدهم– فرم و جاوا اسکریپت
تدریس طراحی وببرای اطالعات بیشتر تماس بگیرید
تاو09125773990شماره تماس:
09371410986 : پست الکترونیک
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;}
<script type="text/JavaScript">
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;}
</script>
<link rel="stylesheet" type="text/css" href="forms.css">
<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"> </label></div> <div class="formElement"><input type="submit" value="Log in" /></div>
</form>
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);">
<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"> </div> <div class="formElement"><input type="submit" class="" value="Submit your query" /></div>
</form>
<script type="text/JavaScript" language="JavaScript">
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 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>
<script type="text/JavaScript" language="JavaScript">
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;}
</script>
<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>
<script type="text/JavaScript" language="JavaScript">
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)");}
</script>
<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>
<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>
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>
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>
Disabling a Text Inputfunction 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>
<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>
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>