Scribd
Upload
69 views3 pages

Build A Survey Form

Uploaded by

Azri Azwar
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
69 views3 pages

Build A Survey Form

Uploaded by

Azri Azwar
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/ 3

** start of undefined **

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 id="title">Survey Form</h1>
<p id="description">A Simple Surey</p>
<form id="survey-form">
<div>
<label id="name-label">Name<input type="text" id="name"
placeholder="Name" required></label>
</div>
<div>
<label id="email-label">Email<input type="email" id="email"
placeholder="Emal"required></label>
</div>
<div>
<label id="number-label" for="number">Age <span>optional</span><input
type="number" name="age" id="number" min="10" max="99" class="form-control"
placeholder="Age" required></label>
</div>
<div>
<p>Which option describe your current role?</p>
<select id="dropdown">
<option>(select one)</option>
<option>(select one)</option>
<option>(select one)</option>
<option>(select one)</option>

</select>
</div>
<div>
<p>Which option best describe you?</p>
<label><input type="radio" value="definitely" name="user-
describe">Definitely</label>
<label><input type="radio" value="not-sure" name="user-describe">Not
sure</label>
<label><input type="radio" value="maybe" name="user-describe">Maybe</label>
</div>
<div>
<p>What is your Favorite Free Code camp?</p>
<select>
<option value="">(select one)</option>
<option value="1">(select one)</option>
<option value="2">(select one)</option>
<option value="3">(select one)</option>
<option value="4">(select one)</option>

</select>
</div>
<div class="checklist">
<p>what would you like to see improved</p>
<label>
<input name="prefer" value="back-end-projects" type="checkbox"
class="input-checkbox">Back-end Projects</label>
</br>
<label>
<input name="prefer" value="back-end-projects" type="checkbox"
class="input-checkbox">Back-end Projects</label>
</br>
<label>
<input name="prefer" value="back-end-projects" type="checkbox"
class="input-checkbox">Back-end Projects</label>
</div>
<div>
<p>Any comment or suggestion?</p>
<textarea id="comments" placeholder="enter your comment
here"></textarea>
</div>
<div>
<input type="submit" id="submit"></input>
</div>
</form>

<body>
</html>

** end of undefined **

** start of undefined **

h1 {
text-align: center;
}
body{
background-color: grey;
max-width: 600px;
border: 1px solid black;
margin: 2em auto;
font-family: Poppins, sans-serif;
}

form {
margin-left: 2em;
margin-right: 2em;
}
#name, #email, #number {

display: block;
width: 100%;
}

div {
padding: 5px;
display: block;
}
.input-checkbox {
display: inline-block;
}
.checklist{
display: block;
}

** end of undefined **

You might also like