Web
<!DOCTYPE html>
<html>
<head>
<title>Reg Form</title>
<style type="text/css">
body{
font-family: Calibri;
}
input[type="text"], [type="textarea"], [type="number"]{
width: 300px;
padding: 12px 20px;
border-radius: 4px;
}
input[type="submit"], input[type="reset"] {
width: 100px;
height: 35px;
position: relative;left: 180px;
text-align: center;
background-color: Green ;
cursor: pointer;
color:white;
font-size: 16px;
}
td {
padding: 10px;
}
td:first-child {
text-align: right;
font-weight: bold;
}
td:last-child {
text-align: left;
}
</style>
<script>
function validate() {
var fname = document.reg_form.fname;
var lname = document.reg_form.lname;
var address = document.reg_form.address;
var gender = document.reg_form.gender;
var email = document.reg_form.email;
var mobile = document.reg_form.mobile;
var course = document.reg_form.course;
if(fname.value==null || fname.value=="") {
alert("Please Fill out the Field");
reg_form.focus();
return false;
}
else
{
alert("Data Submited Successfully!");
}
return false;
}
</script>
</head>
<body>
<center><h1>Registration Form</h1></center>
<hr>
<form method="" action="" name="reg_form" onsubmit="return validate()">
<table>
<tr>
<td><label>First Name: </label></td>
<td>
<input type="text" name="fname" placeholder="First Name">
</td>
</tr>
<tr>
<td><label>Last Name: </label></td>
<td>
<input type="text" name="lname" placeholder="Last Name">
</td>
</tr>
<tr>
<td><label>Address: </label></td>
<td>
<input type="textarea" size="32" name="address" placeholder="Address">
</td>
</tr>
<tr>
<td><label>Gender: </label></td>
<td>
<input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="femele">Female
</td>
</tr>
<tr>
<td><label>Email Id: </label></td>
<td>
<input type="text" name="email" placeholder="example@gmail.com">
</td>
</tr>
<tr>
<td><label>Mobile: </label></td>
<td>
<input type="number" name="mobile"placeholder="000000000">
</td>
</tr>
<tr>
<td><label>Course: </label></td>
<td>
<select name="course" class="box">
<option value="select course">select course</option>
<option value="MCA">MCA</option>
<option value="MBA">MBA</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="submit" name="submit" onclick=myFunction() value="Submit">
<input type="reset" name="reset" value="Reset">
</td>
</tr>
</table>
</form>
</body>
</html>
Comments
Post a Comment