<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>this is form</title>
<script>
function checkdetail() {
var x = document.frm.n.value;
if (x == null || x == " " || x.length > 15 || x.length < 3) {
alert("Enter your name properly");
return false;
}
var y = document.frm.e.value;
if (y == null || y == " " || y.length > 20 || y.length < 3) {
alert("Enter your email properly");
return false;
}
var ph = document.frm.p.value;
if (ph == null || ph == " " || ph.length > 10 || x.length < 0 || isNaN(ph)) {
alert("Enter your phone number properly");
return false;
}
var pass = document.frm.pa.value;
if (pass == null || pass == " ") {
alert("Enter your password properly");
return false;
}
if ((document.frm.h[0].checked == false) && (document.frm.h[1].checked == false) && (document.frm.h[2].checked == false)) {
alert("Choose your hobby");
return false;
}
if ((document.frm.g[0].checked == false) && (document.frm.g[1].checked == false)) {
alert("Choose your gender");
return false;
}
}
</script>
<style>
body{
background:#ead0eea9;
}
th {
padding: 10px;
}
input{
/* color: burlywood; */
background: white;
}
textarea{
/* color: burlywood; */
background: white;
}
select{
/* color: burlywood; */
background: white;
}
table {
border-spacing: 5px;
}
</style>
</head>
<body>
<h1 align="center" style="color: crimson;">WELCOME TO MY FORM</h1>
<form action="www.google.co.in" name="frm">
<table border="1" align="center" style="border-collapse: collapse;">
<tr>
<th style="text-align: left;">
NAME: <input type="text" name="n" id="name" maxlength="20">
</th>
<th style="text-align: left;">
EMAIL: <input type="text" name="e" id="email" maxlength="20">
</th>
</tr>
<tr>
<th style="text-align: left;">
PHONE NO: <input type="text" name="p" id="phno" maxlength="10">
</th>
<th style="text-align: left;">
PASSWORD: <input type="password" id="pass" name="pa">
</th>
</tr>
<tr>
<th style="text-align: left;">
HOBBY: <input type="checkbox" name="h" id="h1">reading
<input type="checkbox" name="h" id="h2">reading
<input type="checkbox" name="h" id="h3">reading
</th>
<th style="text-align: left;">
GENDER: <input type="radio" name="g">male
<input type="radio" name="g">female
</th>
</tr>
<tr>
<th style="text-align: left;">
ADDRESS: <textarea name="a" cols="30" rows="5" id="address">
</textarea>
</th>
<th style="text-align: left;">SELECT CITY:
<select name="city">
<option value="surat">....</option>
<option value="surat">surat</option>
<option value="surat">vadodara</option>
<option value="surat">rajkot</option>
</select>
</th>
</tr>
<tr>
<th rowspan="2">
<input type="submit" value="submit" onclick="return checkdetail()">
</th>
<th rowspan="2">
<input type="reset" value="reset">
</th>
</tr>
</table>
</form><br>
<marquee behavior="" direction="" style="font-size: large;color: seagreen;">
Thanks for visit this form</marquee>
</body>
</html>
Comments
Post a Comment