Scribd
Upload
8K views4 pages

Build A Survey Form

Uploaded by

lisakhanyang03
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
8K views4 pages

Build A Survey Form

Uploaded by

lisakhanyang03
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

** start of undefined **

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
</head>

<body>
<h1 id="title">Lisa's Survey Form</h1>

<p id="description">This form is created by Lisa on the FreeCodeCamp


website</p>

<form id="survey-form">
<div>
<label for="name" id="name-label">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name"
required>
</div>

<div>
<label for="email" id="email-label">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your
email address" required>
</div>

<div>
<label for="number" id="number-label">Age:</label>
<input type="number" id="number" name="age" placeholder="Enter your
age" min="1" max="120" required>
</div>

<div>
<label for="dropdown">Gender:</label>
<select id="dropdown" name="gender">
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
</div>

<div>
<label>Financial situation:</label>
<input type="radio" id="poor" name="financial-situation" value="Poor"
checked>
<label for="poor">Poor</label>

<input type="radio" id="rich" name="financial-situation" value="Rich">


<label for="rich">Rich</label>
</div>

<div>
<label for="things">Things you want in life:</label>
<input type="checkbox" id="wife" name="things" value="Wife">
<label for="wife">Wife</label>

<input type="checkbox" id="cars" name="things" value="Super cars">


<label for="cars">Super cars</label>
<input type="checkbox" id="jet" name="things" value="Private Jet">
<label for="jet">Private Jet</label>

<input type="checkbox" id="chicks" name="things" value="Side chicks">


<label for="chicks">Side chicks</label>

<input type="checkbox" id="children" name="things" value="Children">


<label for="children">Children</label>

<input type="checkbox" id="cash" name="things" value="Cash">


<label for="cash">Cash</label>
</div>

<div>
<label for="comments">Comments:</label>
<textarea id="comments" name="comments" placeholder="Enter your
comments here..."></textarea>
</div>

<button type="submit" id="submit">Submit</button>


</form>
</body>
</html>

** end of undefined **

** start of undefined **

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}

body {
font-family: sans-serif;
}

h1 {
margin: 20px auto;
width: fit-content;
}

#description {
margin: 10px auto 20px;
width: fit-content;
}

#survey-form {
padding: 20px;
height: fit-content;
background-color: #888;
width: 85%;
margin: 0 auto 20px;
border: 5px solid orange;
border-radius: 0 20px 20px;
}
label {
font-size: 1.3rem;
margin: 10px auto;
color: white;
}

input,
select,
textarea {
padding: 8px;
font-size: 1.2rem;
width: 60%;
display: inline-block;
border-radius: 5px;
border: none;
outline: none;
}

input[type="checkbox"],
input[type="radio"] {
width: auto;
}

div {
margin: 7px auto;
}

select {
outline: none;
}

input[required] {
box-shadow: 2px 2px 3px 0.1px #080808;
}

div.container {
padding-left: 220px;
display: inline-block;
position: relative;
}

.things {
position: absolute;
top: -5px;
left: 0;
}

textarea {
height: 80px;
border-radius: 0 10px 10px;
}

#rich {
margin-left: 180px;
}

input[type="radio"]:checked + label {
color: rgb(100, 230, 90);
}

input[type="checkbox"] {
margin-right: 10px;
}

button {
padding: 8px 16px;
border-radius: 7px;
color: green;
font-size: 1.1rem;
transition: transform 0.5s;
cursor: pointer;
}

button:hover {
transform: scale(1.04);
}

button:active {
background-color: green;
color: white;
}

** end of undefined **

You might also like