Feedback form program
<!Doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, intial-scale=1">
<title> Form </title>
</head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Itim&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Newsreader:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Girassol&display=swap');
form {
font-family:'Itim', cursive;
}
button{
border:2px solid black;
padding:17px 15px;
border-radius:15px 14px;
width:100%;
cursor:pointer;
font-family:'Roboto', sans-serif;
font-size:15px;
background-color:rgb(225,195,225);
box-shadow: 5px 5px grey;
}
.p {
padding:1px 3px;
border:4px solid black;
border-radius:15px;
font-family: 'Roboto', sans-serif;
font-size:17px;
}
textarea {
font-family: 'Itim', cursive;
border: 1px solid;
padding: 10px;
box-shadow: 5px 10px red;
}
select{
font-family:'Roboto', sans-serif;
}
a {
text-decoration:none;
border:3px solid black;
padding: 10px 15px;
border-radius:15px;
background-color: yellow;
}
h2 {
font-family: 'Girassol', cursive;
border:2px solid black;
padding:5px 10px;
border-radius:30px;
background-color:white;
box-shadow:5px 4px grey;
}
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 4px 0;
display: inline-block;
border: 1px solid ;
border-radius: 4px;
box-sizing: border-box;
}
input[type=password], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid ;
border-radius: 4px;
}
input[type=email ], select{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid ;
border-radius: 4px;
box-sizing: border-box;
}
input[type=number], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid ;
border-radius: 4px;
box-sizing: border-box;
}
input[type=date], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid ;
border-radius: 4px;
box-sizing: border-box;
}
</style>
<body style="background-color:orange">
<div>
<u> <h2 align="center"> Feedback Form </h2> </u>
</div>
<form align="center" action="mailto: prakhardoneria3@gmail.com" method="post">
<fieldset>
<div> <b>
First name :
<input type="text" placeholder="Enter your name"> <br> <br>
</div>
<div>
Middle name :
<input type="text" placeholder="Enter middle name"> <br> <br>
</div>
<div>
last name :
<input type="text" placeholder="Enter last name"> <br> <br>
</div>
<div>
DOB :
<input type="date" > <br> <br>
<div>
Mo no :
<input type="number" placeholder="91+"> <br> <br>
</div>
<div>
Email-id :
<input type="email" placeholder="xxx123@gmail.com"> <br> <br>
</div>
<div>
Password :
<input type="password" placeholder="Atleast 8 characters"> <br> <br>
<div>
Select your city :
<select>
<option> Mumbai </option>
<option> Etawah </option>
<option> Others </option>
</select> <br> <br>
</div>
<div>
Select your gender :
<input type="radio" name="r1" value="gender"> Male
<input type="radio" name="r1" value="gender"> Female
</div> <br>
<div style="color:yellow">
Feedback : <br> <br>
<textarea rows="5" cols="20"> Enter your feedback here. </textarea>
</div><br>
<div>
Select feedback type :-- <br>
<input type="checkbox" id="subject1" name="subject1" value="Excellent">
<label for="subject1"> Excellent </label><br>
<input type="checkbox" id="subject2" name="subject2" value="Good">
<label for="subject2"> Good</label><br>
<input type="checkbox" id="subject3" name="subject3" value="Average">
<label for="subject3">Average</label><br>
<input type="checkbox" id="subject4" name="subject4" value="Bad">
<label for="subject4"> Bad </label><br> <br>
</div>
<div >
<button type= name="b1" value="submit"> SUBMIT </button> <br> <br>
</div>
<div class="reset">
<button type="reset" value="Reset"> Reset </button>
</div>
</fieldset> <br>
</form><br> <br><br>
<p> This form is for sending feedback on our website not for any particular post..</p><br><br>
<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4vxbjki-JXa6jtNE1O2uUwn-JgxUiipBCF0IyTOIuCeaMoHAJZvYq4h59eZzbcY0eK7H-z7Wyk818Y0ICx2vvfKK2owTCv1-3NSspiYUA5zx7NBpUY5ipohyphenhyphenTXX48TT2_5r9IkQM-XlRU/s1081/IMG_20210522_145627.jpg" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" height="320" data-original-height="1081" data-original-width="1080" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4vxbjki-JXa6jtNE1O2uUwn-JgxUiipBCF0IyTOIuCeaMoHAJZvYq4h59eZzbcY0eK7H-z7Wyk818Y0ICx2vvfKK2owTCv1-3NSspiYUA5zx7NBpUY5ipohyphenhyphenTXX48TT2_5r9IkQM-XlRU/s320/IMG_20210522_145627.jpg"/></a></div>
</body>
</html>
Comments
Post a Comment