Survey Form HTML

<html>
<head>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<meta charset="utf-8">
<title>Encuesta de Ricardo</title>
</head>
<body>
<h1 id="title">Survey Form</h1>
<form id="survey-form" action="/my-handling-form-page" method="post">
<div id="formarea">
<p id="description">A quick survey about Ricardo Rosello</p>
<div>
<br>
<label id="name-label" for="name">Name:</label>
<input type="text" id="name" name="user_name" placeholder="Enter your name" required>
</div>
<div>
<label id="email-label" for="email">E-mail:</label>
<input type="email" id="email" name="user_email" placeholder="Enter your email" required>
</div>
<div>
<div>
<label id="number-label" for="number">Age:</label>
<input type="number" id="number" name="user_age" min="1" max="130" placeholder="Age">
</div>
<div id="dropdown">
<br>
<label id="Gobernador-renuncia" for="Gobernador Renuncia">Debe renunciar Ricardo
Rosello?</label>
<select required>
<option value="" disabled selected>Select your option</option>
<option>Debe renunciar!</option>
<option>No debe renunciar</option>
<option>Debe poner un sustituto</option>
<option>Debe ser River Shatch</option>
<option>No debe ser ninguno</option>
</select>
</div>
<div id="checkboxes">
<br> Quien deber el gobernador:
</div>
<br>
<label>Alguien en Puerto Rico </label>
<input type="Checkbox" value="matespluspartnerpub">
<br>
<label>Down the pub with my mates
</label>
<input type="Checkbox" value="matespub">
<br>
<label>At home with mates
</label>
<input type="Checkbox" value="mateshome">
<br>
<label>At home with my partner
</label>
<input type="Checkbox" value="partnerhome">

<br>
<label>Home alone</label>
<input type="Checkbox" value="homealone">
<br>
<label for="checkboxes">With the whole family
</label>
<input type="Checkbox" value="family">
</div>
<div>
<br>
<label for="beans">There are a total of 64 matches to be played. How many total goals do you think
will be scored?</label>
<input type="range" name="goals" id="goals" min="0" max="400" step="1">
<span class="goalcount"></span>
</div>
<br>
<div id="radio">
VAR (video assisted referees) will be used at this World Cup. What is your opinion about this:
<br>
<br>
<label>Great idea
</label>
<input type="radio" name="varopinion" value="vargreat">
<br>
<label>Terrible idea
</label>
<input type="radio" name="varopinion" value="varterrible">
<br>
<label>I'll tell you afterwards
</label>
<input type="radio" name="varopinion" value="dontknow">
</div>
<div>
<label id="greatest" for="greatest">Who is the greatest footballer ever?</label>
<input type="text" id="greatest" name="greatest_name" placeholder="Enter a name">
</div>
<div>
<label for="msg">What is your outstanding memory of watching a World Cup?</label>
<textarea id="msg" name="user_message"></textarea>
</div>
<div class="button">
<button type="submit" id="submit">Submit</button>
</div>
</div>
</form>
</body>
</html>
Css
body {
font-family: verdana;
background-color: beige;
#title {
text-align: center;
}
form {
/* Just to center the form on the page */
margin: 0 auto;
width: 950px;
/* To see the outline of the form */
padding: 1em;
border: 1px solid #ccc;
border-radius: 1em;
#description {
text-align: center;
form div + div {
margin-top: 1em;
label {
/* To make sure that all labels have the same size and are properly aligned */
display: inline-block;
width: 350px;
text-align: right;
input,
textarea {
/* To make sure that all text fields have the same font settings
By default, textareas have a monospace font */
font: 1em sans-serif;

/* To give the same size to all text fields */
width: 300px;
box-sizing: border-box;
/* To harmonize the look & feel of text field border */
border: 1px solid #999;
input:focus,
textarea:focus {
/* To give a little highlight on active elements */
border-color: #000;
textarea {
/* To properly align multiline text fields with their labels */
vertical-align: top;
/* To give enough room to type some text */
height: 5em;
.button {
/* To position the buttons to the same position of the text fields */
padding-left: 350px; /* same size as the label elements */
button {
/* This extra margin represent roughly the same space as the space
between the labels and their text fields */
margin-left: 0.5em;
#radio {
Java
var goals = document.querySelector("#goals");
var count = document.querySelector(".goalcount");
count.textContent = goals.value;
goals.oninput = function() {
count.textContent = goals.value;
};

Survey Form HTML

Uploaded by

Copyright:

Available Formats

You might also like

Survey Form HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Survey Form HTML

Uploaded by

Copyright:

Available Formats

<html>

<h1 id="title">Survey Form</h1>

<form id="survey-form" action="/my-handling-form-page" method="post">

<p id="description">A quick survey about Ricardo Rosello</p>

<label id="name-label" for="name">Name:</label>

<input type="text" id="name" name="user_name" placeholder="Enter your name" required>

<label id="email-label" for="email">E-mail:</label>

<input type="email" id="email" name="user_email" placeholder="Enter your email" required>

<label id="number-label" for="number">Age:</label>

<input type="number" id="number" name="user_age" min="1" max="130" placeholder="Age">

<option value="" disabled selected>Select your option</option>

<option>No debe renunciar</option>

<option>Debe poner un sustituto</option>

<option>Debe ser River Shatch</option>

<option>No debe ser ninguno</option>

<br> Quien deber el gobernador:

<label>Alguien en Puerto Rico </label>

<input type="Checkbox" value="matespluspartnerpub">

<label>Down the pub with my mates

<input type="Checkbox" value="matespub">

<label>At home with mates

<input type="Checkbox" value="mateshome">

<label>At home with my partner

<input type="Checkbox" value="partnerhome">

<input type="Checkbox" value="homealone">

<label for="checkboxes">With the whole family

<input type="Checkbox" value="family">

<input type="range" name="goals" id="goals" min="0" max="400" step="1">

<input type="radio" name="varopinion" value="vargreat">

<input type="radio" name="varopinion" value="varterrible">

<input type="radio" name="varopinion" value="dontknow">

<label id="greatest" for="greatest">Who is the greatest footballer ever?</label>

<input type="text" id="greatest" name="greatest_name" placeholder="Enter a name">

<label for="msg">What is your outstanding memory of watching a World Cup?</label>

<textarea id="msg" name="user_message"></textarea>

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

/* Just to center the form on the page */

/* To see the outline of the form */

border: 1px solid #ccc;

form div + div {

By default, textareas have a monospace font */

font: 1em sans-serif;

/* To harmonize the look & feel of text field border */

border: 1px solid #999;

/* To give a little highlight on active elements */

/* To properly align multiline text fields with their labels */

/* To give enough room to type some text */

/* To position the buttons to the same position of the text fields */

padding-left: 350px; /* same size as the label elements */

between the labels and their text fields */

var goals = document.querySelector("#goals");

var count = document.querySelector(".goalcount");

You might also like