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

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

تدریس طراحی وببرای اطالعات بیشتر تماس بگیرید

تاو09125773990شماره تماس:

09371410986 : پست الکترونیک

[email protected]

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>


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>


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>

Documents

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