<!DOCTYPE html>  
<html>
	<head>  
		<title>Registration Form</title>    
		<script type="text/javascript">
			function validate()
			{
				/*user ID*/
				if(document.getElementById('userid_txt').value=="")
				{
					document.getElementById('userid_txt_sp').innerHTML="Please enter the User ID";
					return false;
				}
				else if(!(document.getElementById('userid_txt').value).match(/^[a-zA-Z][a-zA-Z0-9_]{4,11}$/))
				{
					document.getElementById('userid_txt_sp').innerHTML="Please enter the valid User ID";
					return false;
				}
				else
				{
					document.getElementById('userid_txt_sp').innerHTML="";
				}		
				/*password*/	
				if(document.getElementById('password_txt').value=="")
				{
					document.getElementById('password_txt_sp').innerHTML="Please enter the Password";
					return false;
				}
				else if((document.getElementById('password_txt').value).length<7 ||(document.getElementById('password_txt').value).length>12 )
				{
					document.getElementById('password_txt_sp').innerHTML="Please enter the 7 to 12 ";
					return false;
				}
				else
				{
					document.getElementById('password_txt_sp').innerHTML="";
				}	
				/*User name */
				if(document.getElementById('name_txt').value=="")
				{
					document.getElementById('name_txt_sp').innerHTML="Please enter the Name";
					return false;
				}
				else if(!(document.getElementById('name_txt').value).match(/^[a-zA-Z]+$/))
				{
					document.getElementById('name_txt_sp').innerHTML="Please enter only Alphabates";
					return false;
				}
				else
				{
					document.getElementById('name_txt_sp').innerHTML="";
				}	
				/*Countrt Select box */
				if(document.getElementById('country_sel').value=="none")
				{
					document.getElementById('country_sel_sp').innerHTML="Please Select the Country";
					return false;
				}
				else
				{
					document.getElementById('country_sel_sp').innerHTML="";
				}	
				/*Zip Code */
				if(document.getElementById('zip_code').value=="")
				{
					document.getElementById('zip_code_sp').innerHTML="Please Select the Zip Code";
					return false;
				}
				else if(!(document.getElementById('zip_code').value).match(/^[0-9]{6}$/))
				{
					document.getElementById('zip_code_sp').innerHTML="Please only 6 Digit ZipCode";
					return false;
				}
				else
				{
					document.getElementById('zip_code_sp').innerHTML="";
				}	
				if(document.getElementById('email_txt').value=="")
				{
					document.getElementById('email_txt_sp').innerHTML="Please Select the Email";
					return false;
				}
				else if(!(document.getElementById('email_txt').value).match(/^[a-zA-Z][a-zA-Z0-9_.]+@[a-zA-Z0-9]+.[a-zA-Z0-9]{2,3}$/))
				{
					document.getElementById('email_txt_sp').innerHTML="Please the Valid Email";
					return false;
				}
				else
				{
					document.getElementById('email_txt_sp').innerHTML="";
				}	
				/* gender */
				if(document.getElementById('male_sex').checked==false && document.getElementById('female_sex').checked==false)
				{
					document.getElementById('sex_sp').innerHTML="Please Select the Gender";
					return false;
				}
				else
				{
					document.getElementById('sex_sp').innerHTML="";
				}
				
				if(document.getElementById('english').checked==false && document.getElementById('non_english').checked==false)
				{
					document.getElementById('language_sp').innerHTML="Please check any one option";
					return false;
				}
				else if(document.getElementById('english').checked==true && document.getElementById('non_english').checked==true)
				{
					document.getElementById('language_sp').innerHTML="Please check Only one option";
					return false;
				}
				else
				{
					document.getElementById('language_sp').innerHTML="";
				}
				
				/*Address*/
				if(document.getElementById('address_txt').value=="")
				{
					document.getElementById('address_txt_sp').innerHTML="";
				}
				else if(!isNaN(document.getElementById('address_txt').value))
				{
					document.getElementById('address_txt_sp').innerHTML="Please enter the Alphabates";
					return false;
				}
				else
				{
					document.getElementById('address_txt_sp').innerHTML="";
				}
				
				/*About*/
				if(document.getElementById('about_txt').value=="")
				{
					document.getElementById('about_txt_sp').innerHTML="";
				}
				else if(!(document.getElementById('about_txt').value).match(/^[a-zA-Z.]+$/))
				{
					document.getElementById('about_txt_sp').innerHTML="Please enter only Alphabates";
					return false;
				}
				else
				{
					document.getElementById('about_txt_sp').innerHTML="";
				}	
					
			}
		</script>
		<style type="text/css">
		.container
		{
			width:600px;
			height:550px;
			padding:20px;
			-webkit-box-shadow:#000000 2px 2px 2px 2px;
			-moz-box-shadow:#000000 2px 2px 2px 2px;
			box-shadow:#000000 2px 2px 2px 2px;
			margin:auto;
		}
		.row
		{
			height:35px;
		}
		.column
		{
			min-width:100px;
			float:left;
			padding-left:10px;
		}
		.right_align
		{
			text-align:right;
		}
		.center_align
		{
			text-align:center;
		}

textarea
		{
			width:200px;
			height:100px;
		}
		.clear
		{
			clear:both;
		}
		.msg
		{
			color:#ff0000;
		}
		</style>
	</head>  
	<body onsubmit="return validate()">  
		<form id="application_frm" name="application_frm">
			<div class="container">
				<h2>Registration Form</h2>
				<div class="row">
					<div class="column right_align"><label for="userid_txt">User id:</label></div>
					<div class="column"><input type="text" id="userid_txt" name="userid_txt" placeholder="Enter User ID"/><span id="userid_txt_sp" class="msg"></span></div>
				</div>
				<div class="row">
					<div class="column right_align"><label for="password_txt">Password:</label></div>
					<div class="column"><input type="password" id="password_txt" name="password_txt" placeholder="Enter password"/><span id="password_txt_sp" class="msg"></span></div>
				</div>
				<div class="row">
					<div class="column right_align"><label for="name_txt">Name:</label></div>
					<div class="column"><input type="text" id="name_txt" name="name_txt" placeholder="Enter your name"/><span id="name_txt_sp" class="msg"></span></div>
				</div>
				<div class="row">
					<div class="column right_align"><label for="address_txt">Address:</label></div>
					<div class="column"><input type="text" id="address_txt" name="address_txt" placeholder="Enter your address"/><span id="address_txt_sp" class="msg"></span></div>
				</div>
				<div class="row">
					<div class="column right_align"><label for="country_sel">Country:</label></div>
					<div class="column">
						<select id="country_sel" name="country_sel">
							<option value="none">Select any One</option>
							<option value="india">India</option>
							<option value="america">America</option>
							<option value="england">england</option>
						</select><span id="country_sel_sp" class="msg"></span>
					</div>
				</div>
				<div class="row">
					<div class="column right_align"><label for="zip_code">ZIP Code:</label></div>
					<div class="column"><input type="text" id="zip_code" name="zip_code" placeholder="Enter ZIP-code"/><span id="zip_code_sp" class="msg"></span></div>
				</div>
				<div class="row">
					<div class="column right_align"><label for="email_txt">Email:</label></div>
					<div class="column"><input type="text" id="email_txt" name="email_txt" placeholder="Enter your e-mail"/><span id="email_txt_sp" class="msg"></span></div>
				</div>
				<div class="row">
					<div class="column right_align">Sex:</div>
					<div class="column">
						<span>
							<input type="radio" name="sex" value="Male" id="male_sex"/><label for="male_sex">Male</label>
						</span>
						<span>
							<input type="radio" name="sex" value="Female" id="female_sex" /><label for="female_sex">Female</label>
						</span>
						<span id="sex_sp" class="msg"></span>
					</div>
				</div>
				<div class="row">
					<div class="column right_align">Language:</div>
					<div class="column">
						<span>
							<input type="checkbox" name="english" value="english" id="english" checked="checked"/><label for="english">English</label>
						</span>
						<span>
							<input type="checkbox" name="non_english" value="non_english" id="non_english" /><label for="non_english">Non English</label>
						</span>
						<span id="language_sp" class="msg"></span>
					</div>
				</div>
				<div class="row">
					<div class="column right_align"><label for="about_txt">About:</label></div>
					<div class="column">
						<textarea name="about_txt" id="about_txt"></textarea>
						<span id="about_txt_sp" class="msg"></span>
					</div>
				</div>
				<div class="row clear">
					<div class="column">&nbsp;</div>
					<div class="column center_align">
						<span>
							<input type="submit" id="submit_button" name="submit_button" value="Submit"/>
						</span>
					</div>
				</div>
			</div>
		</form>
	</body>
</html>

O Level Exam : Practical Question

🖥 Output: