Javascript KeyStrokes
Concepts of Javascript:
- Javascript is the key between HTML & CSS.
- Javascript can change html styles.
- It can also hide html elements.
- Javascript mainly helps in validation of forms.
Sample Code:
<html>
<head><title>Form</title>
<script type="text/javascript">
function register(){
alert("REGISTERED SUCCESSFULLY");
}
function reg12(){
var reg23=document.getElementById("uname").value;
alert(reg23);
}
function reg14() {
var x = document.forms["myform"]["email"].value;
var atpos = x.indexOf("@");
var dotpos = x.lastIndexOf(".");
if (atpos< 1 || dotpos<atpos+2 || dotpos+2>=x.length) {
alert("Not a valid e-mail address");
return false;
}
}
function CheckIndianNumber(IndianNumber)
{
var IndNum = /^\d{10}$/;
if(IndNum.test(IndianNumber))
{
alert("Your Mobile Number Is Valid.");
}
else
{
alert("Your Mobile Number Is Not Valid.");
}
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<form name="myform" method="post" onSubmit="reg1();">
<table width="100%" height="100%" border="0" align="center">
<tr align="center" valign="middle"></tr>
<tr align="center" valign="middle">
<td height="100%" valign="top" bgcolor="#FF9966"><h1><em><u>FORM</u></em></h1>
<table width="800" height="37" border="0">
<tr>
<td width="125" height="31"><em>FIRST NAME </em>: </td>
<td width="659"><label for="fname"></label>
<input name="fname" type="text" id="fname" size="50" /></td>
</tr>
</table>
<table width="800" height="37" border="0" align="center">
<tr>
<td width="125" height="31"><em>USER NAME</em> : </td>
<td width="659"><label for="uname"></label>
<input name="uname" type="text" id="uname" size="50" onBlur="reg12();"/></td>
</tr>
</table>
<table width="800" height="36" border="0">
<tr>
<td width="125"><em>PASSWORD</em> :</td>
<td width="659"><label for="pass"></label>
<input name="pass" type="password" id="pass" size="50" /></td>
</tr>
</table>
<table width="800" height="36" border="0">
<tr>
<td width="125" height="30"><em>ADDRESS</em> :</td>
<td width="659"><label for="add"></label>
<textarea name="add" id="add" cols="50" rows="2"></textarea></td>
</tr>
</table>
<table width="800" height="36" border="0">
<tr>
<td width="125"><em>BIRTH DAY</em> :</td>
<td width="659"><select name="day" id="day">
<option selected="selected">1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
<select name="month" id="month">
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<select name="year" id="year">
<option>2014</option>
<option>2013</option>
<option>2012</option>
<option>2011</option>
<option>2010</option>
<option>2009</option>
<option>2008</option>
<option>2007</option>
<option>2006</option>
<option>2005</option>
<option>2004</option>
<option>2003</option>
<option>2002</option>
<option>2001</option>
<option>2000</option>
<option>1999</option>
<option>1998</option>
<option>1997</option>
<option>1996</option>
<option>1995</option>
<option>1994</option>
<option>1993</option>
<option>1992</option>
<option>1991</option>
<option>1990</option>
<option>1989</option>
<option>1988</option>
<option>1986</option>
<option>1985</option>
<option>1984</option>
<option>1983</option>
<option>1982</option>
<option>1981</option>
<option>1980</option>
<option>1979</option>
<option>1978</option>
<option>1977</option>
<option>1976</option>
<option>1975</option>
<option>1974</option>
<option>1973</option>
<option>1972</option>
<option>1971</option>
<option>1970</option>
</select></td>
</tr>
</table>
<table width="800" border="0">
<tr>
<td width="125" height="30"><em>PHONE No</em>. :</td>
<td width="659"><label for="phoneno"></label>
<input name="phoneno" type="text" id="phoneno" size="50" onBlur="CheckIndianNumber(phoneno.value)"/></td>
</tr>
</table>
<table width="800" border="0">
<tr>
<td width="125" height="30"><em>E-MAIL ID</em> :</td>
<td width="659"><label for="email"></label>
<input name="email" type="text" id="email" size="50" onBlur="reg14();"/></td>
</tr>
</table>
<table width="800" border="0">
<tr>
<td width="125"><em>DEPT</em> :</td>
<td width="659"><label for="dep"></label>
<select name="dep" id="dep">
<option selected="selected">MECH</option>
<option>IT</option>
<option>CIVIL</option>
<option>COMP</option>
<option>ELEC</option>
<option>E&TC</option>
</select></td>
</tr>
</table>
<table width="800" height="30" border="0">
<tr>
<td width="125"><em>CLASS</em> :</td>
<td width="659">
<input type="radio" name="radio" id="fe" value="fe" />
<em> FE</em><br>
<input type="radio" name="radio" id="fe2" value="fe" />
<em>SE</em><br>
<input type="radio" name="radio" id="fe3" value="fe" />
<em> TE</em><br>
<input type="radio" name="radio" id="fe4" value="fe" />
<em> BE</em></tr>
</table>
<p>
<input type="submit" name="Submit" id="submit" value="SIGN UP" />
</p>
</td>
</tr>
</table>
</form>
</body>
</html>
Output:
Comments
Post a Comment