omkarsk98/form.css

## form.css
#firstname
{
	transform: translate(77px);
}
#lastname
{
	transform: translate(80px);
}
#id
{
	transform: translate(6px);
}
#email
{
	transform: translate(89px);
}
#age
{
	width:173px;
	transform: translate(117px);
}
#submit
{
	transform: translate(150px);
}
#cbox
{
	width: 171px;
	height:20px;
	border: 1px dotted black;
	transform: translate(217px);

}
body
{
	border: 5px dashed black;
	width: 30%;
	height:25%;

}

## form.html
<html>
	<head>
		<title>Form</title>
		<link rel="stylesheet" href="form.css"/>
		<script src="form.js"></script>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
	</head>
	<body >
	<div id="cbox"></div>
		<form name="form1" onsubmit="return check()" >
			Enter your first name
				<input id="firstname" type="text" placeholder="eg. David" name="fname" onkeyup="a()" onkeypress="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123)" />
			<br />
			Enter your last name
				<input id="lastname" type="text" placeholder="eg. Watson" name="lname" onkeypress="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123)" />
			<br />
			Enter Your age
				<input id="age" type="number" placeholder="eg. 20" min="1" max="100" name="age" onkeypress="return (event.charCode>47 && event.charCode<58)" />
			<br/>
			Enter your Registration Number
				<input id="id" type="number" placeholder="eg.111222333" name="id"  />
			<br/>
			Enter your email id
				<input id="email" type="email" placeholder="eg. example@some.com" name="email"  />
			<br />
			<input id="submit" type="submit" >
			</input>
		</form>
	</body>
</html>

## form.js
function check()
{
	var n1=document.getElementById("age");
	var n2=document.getElementById("lastname");
	var n3=document.getElementById("id");
	var n4=document.getElementById("firstname");
		if(n4.value.length<5)
		{
			alert("First name should be atleast 5 characters long");
			document.form1.fname.focus();
			return false;
		}

		if(n1.value<18)
		{
			alert("You are under aged");
			document.form1.age.focus();
			return false;
		}
		if(n2.value=="")
		{	alert("Please enter your last name");
			document.form1.lname.focus();
			return false;
		}

		if(n3.value<=0)
		{	alert("Incorrect Registration Number");
			document.form1.id.focus();
			return false;
		}


		alert("Submit form");
}
function a()
{
	var name=document.getElementById("firstname");
	var cbox=document.getElementById("cbox");
	cbox.innerHTML="Hello "+name.value;
}
	#firstname
	{
	transform: translate(77px);
	}
	#lastname
	{
	transform: translate(80px);
	}
	#id
	{
	transform: translate(6px);
	}
	#email
	{
	transform: translate(89px);
	}
	#age
	{
	width:173px;
	transform: translate(117px);
	}
	#submit
	{
	transform: translate(150px);
	}
	#cbox
	{
	width: 171px;
	height:20px;
	border: 1px dotted black;
	transform: translate(217px);

	}
	body
	{
	border: 5px dashed black;
	width: 30%;
	height:25%;

	}
	<html>
	<head>
	<title>Form</title>
	<link rel="stylesheet" href="form.css"/>
	<script src="form.js"></script>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	</head>
	<body >
	<div id="cbox"></div>
	<form name="form1" onsubmit="return check()" >
	Enter your first name
	<input id="firstname" type="text" placeholder="eg. David" name="fname" onkeyup="a()" onkeypress="return (event.charCode > 64 && event.charCode < 91) \|\| (event.charCode > 96 && event.charCode < 123)" />
	<br />
	Enter your last name
	<input id="lastname" type="text" placeholder="eg. Watson" name="lname" onkeypress="return (event.charCode > 64 && event.charCode < 91) \|\| (event.charCode > 96 && event.charCode < 123)" />
	<br />
	Enter Your age
	<input id="age" type="number" placeholder="eg. 20" min="1" max="100" name="age" onkeypress="return (event.charCode>47 && event.charCode<58)" />
	<br/>
	Enter your Registration Number
	<input id="id" type="number" placeholder="eg.111222333" name="id" />
	<br/>
	Enter your email id
	<input id="email" type="email" placeholder="eg. example@some.com" name="email" />
	<br />
	<input id="submit" type="submit" >
	</input>
	</form>
	</body>
	</html>
	function check()
	{
	var n1=document.getElementById("age");
	var n2=document.getElementById("lastname");
	var n3=document.getElementById("id");
	var n4=document.getElementById("firstname");
	if(n4.value.length<5)
	{
	alert("First name should be atleast 5 characters long");
	document.form1.fname.focus();
	return false;
	}

	if(n1.value<18)
	{
	alert("You are under aged");
	document.form1.age.focus();
	return false;
	}
	if(n2.value=="")
	{ alert("Please enter your last name");
	document.form1.lname.focus();
	return false;
	}

	if(n3.value<=0)
	{ alert("Incorrect Registration Number");
	document.form1.id.focus();
	return false;
	}


	alert("Submit form");
	}
	function a()
	{
	var name=document.getElementById("firstname");
	var cbox=document.getElementById("cbox");
	cbox.innerHTML="Hello "+name.value;
	}