Amazing, Wonderful, Interesting Competition Form Create by HTML & CSS
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Registration form</title>
</head>
<body bgcolor="lightyellow">
<form>
<fieldset>
<legend class="reg"><b><h2><font color="orange" font size="8">REGISTRATION FORM</font></h2></b></legend>
<fieldset class="field">
<legend><b><h3><font color="magenta" size="4">Personal Details</h3></b></legend>
First name: <input type="text" placeholder="Enter your first name"></input></br>
Last name: <input type="text" placeholder="Enter your last name"></font></input><br /></center>
<h4><font color="red" size="4">Gender: </font></h4><input type="radio" name="gender" value="male" checked><font color="blue">Male</input><br />
<input type="radio" name="gender" value="female">Female</input><br />
<input type="radio" name="gender" value="others">Others</font></input></br><br />
<font color="green" size="4">Email: <input class="email" type="email" name="email" placeholder="example@email.com"></input></br><br />
Phone-no: <input class="phone" type="tel" neme:"phone" placeholder="enter your number"></input></br><br />
Languages known: <br />
<input type="checkbox">English</input>
<input type="checkbox">Hindi</input><br />
<input type="checkbox">Telugu</input>
<input type="checkbox">Tamil</font></input><br />
<fieldset class="b"> <legend><b><font color="cyan" size="5">State</b></legend>
<select value="dropdown" class="dropdown">
<option value="Bihar">Bihar</option>
<option value="Chhattishgarh">Chhattishgarh</option>
<option value="Madhya Pradesh">Madhya Pradesh</option>
<option value="Gujarat" selected>Gujarat</option>
<option value="Maharashtra">Maharashtra</option>
<option value="Rajasthan">Rajasthan</option>
<option value="Uttar Pradesh">Uttar Predesh</option>
<option value="West Bengal">West Bengal</font></option>
</select>
</fieldset>
<textarea rows="6" cols="20" placeholder="enter your address here"></textarea><br />
</fieldset>
<fieldset class="b"> <legend><b><font size="4">Qualification</font></b></legend>
<select value="dropdown" class="dropdown">
<option value="SSC">SSC</option>
<option value="Inter/Diploma">Inter/Diploma</option>
<option value="B.sc">B.sc</option>
<option value="BCA">BCA</option>
<option value="BA">BA</option>
<option value="B.com">B.Com</option>
<option value="B.tech" selected>B.tech</option>
<option value="M.tech">M.tech</option>
</select>
</fieldset>
<input class="submit" type="submit" value="submit" method="post" onclick="alert('Your data saved successfully')"></input>
<input type="reset" value="reset"></input>
</fieldset>
</form>
</body>
</html>
<html>
<head>
<title>Registration form</title>
</head>
<body bgcolor="lightyellow">
<form>
<fieldset>
<legend class="reg"><b><h2><font color="orange" font size="8">REGISTRATION FORM</font></h2></b></legend>
<fieldset class="field">
<legend><b><h3><font color="magenta" size="4">Personal Details</h3></b></legend>
First name: <input type="text" placeholder="Enter your first name"></input></br>
Last name: <input type="text" placeholder="Enter your last name"></font></input><br /></center>
<h4><font color="red" size="4">Gender: </font></h4><input type="radio" name="gender" value="male" checked><font color="blue">Male</input><br />
<input type="radio" name="gender" value="female">Female</input><br />
<input type="radio" name="gender" value="others">Others</font></input></br><br />
<font color="green" size="4">Email: <input class="email" type="email" name="email" placeholder="example@email.com"></input></br><br />
Phone-no: <input class="phone" type="tel" neme:"phone" placeholder="enter your number"></input></br><br />
Languages known: <br />
<input type="checkbox">English</input>
<input type="checkbox">Hindi</input><br />
<input type="checkbox">Telugu</input>
<input type="checkbox">Tamil</font></input><br />
<fieldset class="b"> <legend><b><font color="cyan" size="5">State</b></legend>
<select value="dropdown" class="dropdown">
<option value="Bihar">Bihar</option>
<option value="Chhattishgarh">Chhattishgarh</option>
<option value="Madhya Pradesh">Madhya Pradesh</option>
<option value="Gujarat" selected>Gujarat</option>
<option value="Maharashtra">Maharashtra</option>
<option value="Rajasthan">Rajasthan</option>
<option value="Uttar Pradesh">Uttar Predesh</option>
<option value="West Bengal">West Bengal</font></option>
</select>
</fieldset>
<textarea rows="6" cols="20" placeholder="enter your address here"></textarea><br />
</fieldset>
<fieldset class="b"> <legend><b><font size="4">Qualification</font></b></legend>
<select value="dropdown" class="dropdown">
<option value="SSC">SSC</option>
<option value="Inter/Diploma">Inter/Diploma</option>
<option value="B.sc">B.sc</option>
<option value="BCA">BCA</option>
<option value="BA">BA</option>
<option value="B.com">B.Com</option>
<option value="B.tech" selected>B.tech</option>
<option value="M.tech">M.tech</option>
</select>
</fieldset>
<input class="submit" type="submit" value="submit" method="post" onclick="alert('Your data saved successfully')"></input>
<input type="reset" value="reset"></input>
</fieldset>
</form>
</body>
</html>
CSS Code
body{
background-color:#abcdef;
}
.reg{
text-color:pink;
text-align:center;
font-family:"Times new roman";
font-style:bold;
text-decoration:underline;
text-shadow:4px 3px 3px #ee2738;
}
.email{
width:100px;
background-color:pink;
box-shadow:6px 5px 4px black;
padding:3px;
margin-bottom:4px;
}
.phone{
border:solid;
}
.state{
width:150px;
text-align:left;
box-shadow:4px 5px 4px #454525;
margin-bottom:4px;
}
.field{
text-align:center;
margin:20px;
border:dashed;
box-shadow:4px 5px 4px #252525;
text-shadow:4px 5px 2px #aaaccc;
filter:saturate(80%);
filter:sepia(30%);
background:radial-gradient(green,white);
}
.b{
background:linear-gradient(white,blue,black);
filter:brightness(200%);
padding:2%;
margin:10px;
width:70%;
text-align:center;
box-shadow:4px 5px 2px #252525;
border:solid;
}
.dropdown{
background-color:#784310;
position:relative ;
overflow:hidden ;
box-shadow:5px 4px 7px #463528;
}
.submit{
padding-right:20px;
margin:20px;
background-color:#abcdef;
}
.reg{
text-color:pink;
text-align:center;
font-family:"Times new roman";
font-style:bold;
text-decoration:underline;
text-shadow:4px 3px 3px #ee2738;
}
.email{
width:100px;
background-color:pink;
box-shadow:6px 5px 4px black;
padding:3px;
margin-bottom:4px;
}
.phone{
border:solid;
}
.state{
width:150px;
text-align:left;
box-shadow:4px 5px 4px #454525;
margin-bottom:4px;
}
.field{
text-align:center;
margin:20px;
border:dashed;
box-shadow:4px 5px 4px #252525;
text-shadow:4px 5px 2px #aaaccc;
filter:saturate(80%);
filter:sepia(30%);
background:radial-gradient(green,white);
}
.b{
background:linear-gradient(white,blue,black);
filter:brightness(200%);
padding:2%;
margin:10px;
width:70%;
text-align:center;
box-shadow:4px 5px 2px #252525;
border:solid;
}
.dropdown{
background-color:#784310;
position:relative ;
overflow:hidden ;
box-shadow:5px 4px 7px #463528;
}
.submit{
padding-right:20px;
margin:20px;
OUTPUT
Posts
50 Comments
Nice amazing
ReplyDeleteVery good
ReplyDeleteWonderful 😝😝😝
ReplyDeleteVery very very very very nice 😝😝😝😝😝😝
ReplyDeleteWow nice 🌼🌼🌼
ReplyDeleteKallu
ReplyDeleteNice
Brilliant
ReplyDeleteExcellent
ReplyDeleteExcellent
ReplyDeletelovely
ReplyDeleteNice
ReplyDeleteSuperb
ReplyDeleteSuperb
ReplyDeleteInteresting
ReplyDeleteAmazing
ReplyDeletewonderful
ReplyDeleteAttractive
ReplyDeleteGood Job Boss
ReplyDeleteVery Nice
ReplyDeleteFantastic
ReplyDeleteSuperb
ReplyDeleteMind Blowing
ReplyDeleteVery nice
ReplyDeleteWonderful Work
ReplyDeleteAttractive
ReplyDeleteGreat
ReplyDeleteExcellent job
ReplyDeletePerfect 👌
ReplyDeletenice
ReplyDeleteFantastic
ReplyDeleteGood
ReplyDeleteexcellent
ReplyDeleteVery Very interested
ReplyDeleteSuperb
ReplyDeleteGreat done
ReplyDeletegreat
ReplyDeletewow wow
ReplyDeleteAttractive
ReplyDeleteMast
ReplyDeleteWonderful
ReplyDeleteRight Guys
ReplyDeleteNice Form Code
ReplyDeleteWonderful Form Format
ReplyDeleteGazab
ReplyDeleteexcellent
ReplyDeleteKallu wow
ReplyDeletewow amazing
ReplyDeleteInteresting😜
ReplyDeleteKallu
ReplyDeleteNice
Wow
ReplyDeleteBrilliant
Awesome
Interesting