Write necessary code for creating following form. Do proper validation also.


<!DOCTYPE html>
<html>
<head>
	<title>Student Reg. Form</title>
	<style type="text/css">
		h1{
			text-align: center;
			color: #470369;
			word-spacing: 5px;
			letter-spacing: 3px;
		}
		table{
			margin: auto;
			/*border: 2px solid;*/
			background-color: #ebe1e6;

		}
		td{
			font-weight: bold;
			padding: 7px;

		}
        .left{
        	width: 142px;
        }
        .stable{
        	border: none;
        	text-align: center;
        }
        .stable td{
        	padding: 2px;
        }
        button{
			background-color: gray;
			font-size: 20px;
			color: white;
			height: 40px;
			margin: 15px;
			border:none;
			border-radius: 4px;

		}

	</style>
</head>
<body>
	<h1><u>STUDENT REGISTRATION FORM</u></h1>
	<form>
		<table>
			<tr>
				<td class="left"><b>FIRST NAME</b></td>
				<td><input type="text" pattern="[A-Za-z]{3,30}" placeholder="Enter first name here" required> (max 30 characters a-z and A-Z)</td>
			</tr>
			<tr>
				<td class="left"><b>LAST NAME</b></td>
				<td><input type="text" pattern="[A-Za-z]{3,30}" placeholder="Enter second name here" required> (max 30 characters a-z and A-Z)</td>
			</tr>
			<tr>
				<td class="left"><b>DATE OF BIRTH</b></td>
				<td><input type="DATE" required></td>
			</tr>
			<tr>
				<td class="left"><b>EMAIL ID</b></td>
				<td><input type="email" placeholder="Enter email here" required></td>
			</tr>
			<tr>
				<td class="left"><b>MOBILE NUMBER</b></td>
				<td><input type="text" pattern="[9]{1}[0-9]{9}" placeholder="Enter mobile number here" required> (max 10 digits  number)</td> 
			</tr>
			<tr>
				<td class="left"><b>GENDER</b></td>
				<td>Male <input type="radio" name="gender" value="male" required>
                 Female <input type="radio" name="gender" value="female">
                 Other <input type="radio" name="gender" value="other">
				</td>
			</tr>
			<tr>
				<td class="left">ADDRESS</td>
				<td><textarea rows="7" cols="42" placeholder="Enter address here" required></textarea></td>
			</tr>
			<tr>
		   	   	<td class="left">HOBBIES</td>
		   	   	<td>Travelling <input type="checkbox" name="">
		   	   	 Singing <input type="checkbox" name="">
		   	     Dancing <input type="checkbox" name="">
		   	     Playing <input type="checkbox" name=""><br>
		   	     Other <input type="checkbox" name=""> <input type="text" placeholder="Enter here">

		   	    </td>
		   	</tr>
		   	<tr>
		   		<td class="left">QUALIFICATION </td>
		   		<td>
	   				<table class="stable">
	   					<tr>
	   						<td>SI.No.</td>
	   						<td>Examination</td>
	   						<td>Board</td>
	   						<td>Percentage</td>
	   						<td>Year of Passing</td>
	   					</tr>
	   					<tr>
	   						<td>1</td>
	   						<td>Class X</td>
	   						<td><input type="text" maxlength="10" placeholder="Enter here" required></td>
	   						<td><input type="number" placeholder="Enter here" required></td>
	   						<td><input type="number" placeholder="Enter here" required></td>
	   					</tr>
	   					<tr>
	   						<td>2</td>
	   						<td>Class XII</td>
	   						<td><input type="text" maxlength="10" placeholder="Enter here" required></td>
	   						<td><input type="number" placeholder="Enter here" required></td>
	   						<td><input type="number" placeholder="Enter here" required></td>
	   					</tr>
	   					<tr>
	   						<td>3</td>
	   						<td>Graduation</td>
	   						<td><input type="text" maxlength="10" placeholder="Enter here" required></td>
	   						<td><input type="number" placeholder="Enter here" required></td>
	   						<td><input type="number" placeholder="Enter here" required></td>
	   					</tr>
	   					<tr>
	   						<td>4</td>
	   						<td>Masters</td>
	   						<td><input type="text" maxlength="10" placeholder="Enter here" required></td>
	   						<td><input type="number" placeholder="Enter here" required></td>
	   						<td><input type="number" placeholder="Enter here" required></td>
	   					</tr>
	   					<tr>
	   						<td colspan="4">(10 char max)</td>
	   					</tr>

	   				</table>
		   		</td>
		   	</tr>
		   	<tr>
		   		<td class="left">COURSES APPLIED FOR</td>
		   		<td>
		   			BE-IT <input type="radio" name="course" required>
		   			BE ELX <input type="radio" name="course">
		   			BE COM <input type="radio" name="course">
		   			BE SOFT <input type="radio" name="course">
		   		</td>
		   	</tr>
		   	<br><br>
		   	<tr>
		   		<td colspan="2">
		   			<button type="submit">Submit</button>
                     <button type="reset">Reset</button>
		   		</td>
		   	</tr>

		</table>
		
	</form>

</body>
</html>

Web Technology

Download Web technology Tutorial Solution Q.5) Write necessary code for creating following form. Do proper validation also. Q.6) Write HTML code to generate following list. Q.12) How can you change the color and font of document in JavaScript? Q.13) Write a JavaScript program to display a prompt for input number, and check whether that number is prime number or not and show the result in alert box. Q.20) Create and test an HTML document that describes a table with the following contents: The columns of the table must have the headings “Pine,” “Maple,” “Oak,” and “Fir.” The rows must have the labels “Average Height,” “Average Width,” “Typical Life Span,” and “Leaf Type.” You can make up the data cell values. Q.23) Create and test an HTML document that describes nested ordered lists of cars. The outer list must have three entries: compact, midsize, and sports. Inside each of these three lists there must be two sublists of body styles. The compact- and midsize-car sublists are two d

BE-IT Hub

Search This Blog

Recent Posts

Web Technology

Write necessary code for creating following form. Do proper validation also.

Comments

Post a Comment

Popular posts from this blog

Pokhara University BE-IT & Computer Engineering Notes

Web Technology

Pokhara University Syllabus