Skip to content

Instantly share code, notes, and snippets.

@andrefqms

andrefqms/a-survey-form-page.markdown

Created January 5, 2019 20:39
Show Gist options
  • Save andrefqms/b5acf2d947fffc5911062f3970d73d7f to your computer and use it in GitHub Desktop.
Save andrefqms/b5acf2d947fffc5911062f3970d73d7f to your computer and use it in GitHub Desktop.
Download ZIP
A Survey Form Page
Raw
a-survey-form-page.markdown
Raw
index.html
<html>
<head>
<title>Survey Form</title>
<h1 id = "title">Tell me about you</h1>
<p id="description">Let us know what you like</p>
</head>
<body>
<form id="survey-form">
<div>
<label for="name-label" id="name-label" class="labels" >Name:</label>
<input type="text" id= "name" placeholder = "Enter your name" required>
<label for="email-label" id="email-label" class="labels">Email:</label>
<input type="email" id="email" placeholder="Enter your email" required>
<label for="number-label" id="number-label" class="labels">Age:</label>
<input type="number" id="number" min="1" max="120" id="number-label" placeholder= "Enter your age" required>
</div>
<div class="labels">
<label for="option">Which in your option do you like more?</label>
</div>
<div class="rightTab">
<select id="dropdown" name="currentPos" class="dropdown">
<option disabled value>Select an option</option>
<option value="student">Movies</option>
<option value="job">Games</option>
<option value="learner">Music</option>
<option value="preferNo">Food</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="labels" id="radio-label">
<label for="would_recommend"><br>How you came respond this survey here?</label>
</div>
<div class="input">
<ul>
<li class="radio"><label><input name="radio-buttons" value="1" type="radio" class="userRatings" >Alone</label></li>
<li class="radio"><label><input name="radio-buttons" value="2" type="radio" class="userRatings" >I found on the internet</label></li>
<li class="radio"><label><input name="radio-buttons" value="3" type="radio" class="userRatings" >A friend told me</label></li>
</ul>
</div>
<div class = "labels">
<p> How do you often to desloce in your city?</p>
</div>
<div class= "input">
<input type="checkbox" name="boxes" value="none" checked> None <br>
<input type="checkbox" name="boxes" value="motorbike"> Motorbike<br>
<input type="checkbox" name="boxes" value="car" > Car<br>
<input type="checkbox" name="boxes"
value="cycle" > Bycycle<br>
<input type="checkbox" name="boxes"
value="train" > Train<br>
<input type="checkbox" name="boxes"
value="walking" > Walking<br>
<input type="checkbox" name="boxes"
value="walking" > Bus<br><br>
</div>
<div>
<label for="comment">
<p class = "labels">Any thoughts?</p></label>
<textarea id="advanced" name="comment" rows="4" cols="30" maxlength="250" wrap="hard"> Write something if you want!</textarea>
</div>
<div class="form-container" >
<button id="submit" type="submit">Submit</button>
</div>
</form>
</body>
</html>
Raw
style.css
h1{
font-size :50px;
color: darkred;
}
#description{
font-size :25px;
text-align: center;
font-family: sans-serif;
}
h1{
text-align: center;
font-family: sans-serif;
}
body {
background-color: lightgray;
font-family: 'Raleway', Helvetica, sans-serif;
min-width: 320px;
}
.labels {
display: inline-block;
width: 44%;
text-align: right;
vertical-align: top;
padding: 5px;
}
.rightTab {
display: inline-block;
text-align: left;
width: 48%;
vertical-align: middle;
}
.input{
display: inline-block;
width: 53%;
text-align: left;
vertical-align: middle;
padding: 5px;
}
#submit{
align-self: center;
background-color: green;
border: none;
width: 145px;
height: 50px;
border-radius: 10px;
text-transform: uppercase;
font-weight: 700;
color: white;
font-size: 20px;
}
.form-container{
display: flex;
flex-direction: column;
align-items: center;
margin: 20px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment