HTML File
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Application form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form action="my-form-page" id="survey_form" method="POST">
<h1>Application form</h1>
<p><b>Note:</b>Form is to be complete al last 7 days</p>
<fieldset>
<legend>Personal Deatils</legend>
<div>
<label for="name" id="name_label">Name:</label>
<input type="name" required id="name" name="user_name"
placeholder="Enter name....">
</div>
<div>
<label for="date" id="date_label">Date of Birth:</label>
<input type="date" id="birth">
</div>
<div>
<label for="address" id="address_label">Address</label>
<input type="address" id="address" name="uder_address"
placeholder="Enter address....">
</div>
<div>
<label for="emali" id="email_label">Email:</label>
<input type="email" required id="email" name="user_email"
placeholder="Enter email....">
</div>
<div>
<label for="phone" id="number_label">Phone Number:</label>
<input type="number" required id="number" name="user_number"
placeholder="Enter 10 digit number....">
</div>
<div>
<label for="iq" id="iq_label">IQ</label>
<input type="iq" required id="iq" name="User_iq" placeholder="Enter iq....">
</div>
<div>
<label for="Gender">Gender</label>
<p>
<input type="radio" name="gender" value="male" checked>Male <br>
<input type="radio" name="gender" value="female" >Female <br>
<input type="radio" name="gender" value="other" >Other <br>
</p>
</div>
</fieldset>
<fieldset>
<label for="Gender">Chek all that application</label>
<p>
<input type="checkbox" name="tattoo" value="tattoo"> I have tattoo <br>
<input type="checkbox" name="car" value="car"> I own BMW <br>
<input type="checkbox" name="age" value="age"> I am more than 3 years <br>
<input type="checkbox" name="work" value="work"> I work full-time <br>
</p>
</fieldset>
<fieldset>
<label for="politics">Politics Percuas</label>
<select id="dropdown">
<option value="left">Left Wing</option>
<option value="right">Right Wing</option>
<option value="conservative">conservative</option>
<option value="nazi">Nazi</option>
</select>
<label for="politics">Eduction Level Completed</label>
<select id="dropwown2">
<option value="unversity">Unversity</option>
<option value="collage">collage</option>
<option value="high school">high school</option>
<option value="none">none</option>
</select>
</fieldset>
<fieldset>
<legend>Essay Section</legend>
<div>
<label for="msg"></label>
<p>In 50 words or more explain</p>
<textarea name="user_message" id="msg" cols="50" rows="4"
placeholder="Type here...."></textarea>
</div>
<div>
<label for="msg"></label>
<p>Please upload contact deatils for to refernce</p>
<textarea name="user_message" id="msg" cols="50" rows="4"
placeholder="Type here....."></textarea>
<button>Choose File</button>
</div>
</fieldset>
<div class="submitbutton">
<button type="button" id="submit">Send your Application</button>
</div>
</form>
</body>
</html>
CSS File
body{
font-family: Arial, Helvetica, sans-serif;
font-size: 1.5em;
background-color: rgb(219, 219, 4);
}
h1{
font-size: 1.8em;
text-align: center;
text-transform: capitalize;
}
p{
font-size: 1em;
/* text-align: center; */
text-transform: capitalize;
}
form{
margin: 0 auto;
width: 70%;
padding: 1em;
border: 1px solid #ccc;
border-radius: 1em;
}
#survey_form{
background-color: rgb(185, 202, 26);
}
fieldset{
border: 1px solid lightgreen;
margin: 5px;
}
legend{
font-weight: 1000;
}
div+div{
margin-top: 10px;
}
input,textarea{
font: 1em;
border: 1px solid#999;
}
#name,#birth, #address, #number, #email, #iq{
padding: 5px;
width: 200px;
margin: 3px;
border-radius:6px ;
border: 3px solid lightgreen;
}
textarea{
vertical-align: top;
height: 5em;
resize: vertical;
}
button{
margin: .5em;
text-transform: capitalize;
background-color: red;
color: white;
border: none;
padding: 5px;
border-radius:4px ;
font-size: large;
}
button:hover{
cursor: pointer;
background-color: rgb(15, 226, 26);
}
#dropdown, #dropdown2{
padding: 9px;
margin: 7px;
width: 150px;
border-radius: 4px;
border: 2px solid lightgreen;
font-size: 20px;
text-transform: capitalize;
}
Nice
जवाब देंहटाएं