Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:

the values in my checkbox fail to register keeps failing me

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css" />
<h1 id="title">BIG SWEDE WINE SURVEY</h1>
<em><p id="description">Where taste meets comfort</em></p>
</head>
<body>
  <fieldset>
  <h2>Wine Survey</h2>
  <p>Please fill out this form with the required information</p>
  <form id="survey-form" method="post" action='https://register-demo.freecodecamp.org'>
  <label for="first-name" id="name-label">Enter Your First Name: <input id="name" type="text" placeholder="Your First Name" required /></label>
  <label for="last-name" id="name-label">Enter Your Last Name: <input id="name" type="text"placeholder="Your Last Name" required /></label>
  <label for="email" id="email-label">Enter Your Email: <input id="email" type="email" placeholder="email" required /></label><br>
<label for="Age" id="number-label">Enter Your Age: <input id="number" type="number" placeholder="number" min="18" max="120">
   <label for="number" id="number-label">Phone number: <input id="tel" type="number" placeholder="Phone number" required /></label> 
    <label for="file">Upload The Wine You Need : <input type="file" name="file"></label>
    <label for="bio">Provide a description:<textarea id="bio" name="bio" rows="3" cols="30" placeholder="I want to get?..."></textarea></label> 
    <fieldset>
    <legend><h3>Dirnk Type</h3></legend>
    <label for="Alcholic-Drink"><input type="radio" id="Alcholic-Drink" value="1" class="inline" name="Alcholic-Drink" >Alcholic</label>
<label for="Non-alcholic-Drink"><input type="radio" value="2" id="Non-alcholic-Drink" class="inline" name="Non-alcholic-Drink" >Non-Alcholic-Drink</label>
</fieldset>
 <fieldset>
    <legend><h4>Non-Alcholic-Dirnk Type</h4></legend>
    <label for="Drink"><input type="radio" id="Drink" class="inline" value="1" name="Alcholic-Drink" >Carbonated Drink</label>
<label for="juice"><input type="radio" id="juice" value="2" class="inline" name="Non-alcholic-Drink">Juice</label>
    </fieldset>
    <fieldset>
        <label for="Alcholic">Alcholic-Drinks
            <select id="dropdown" name="Alcholic-Drink">
<option>Whiskey</option>
<option>Brandy</option>
<option>Cognac</option>
<option>Vodka</option>
<option>Wine</option>
<option>Champangne</option>
<option>Rum</option>
<option>Spirit</option>
<option>Cream</option>
<option>Cocktail</option>
<option>Gin</option>
            </select>
             </label>
             </fieldset>
             <fieldset>
  <legend><h5>What's your age?</h5></legend>
 <input type="checkbox" name="age" id="less" value="18"/><label for="less">(18)</label><br>
<input type="checkbox" name="age" id="older" value="+18"/><label for="older">(+18)</label><br>
      <fieldset>
    <label for="terms-and-conditions"><input class="inline" type="checkbox" name="terms-and-conditions" id="terms-and-conditions" required>I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/"> terms and conditions</label>
        <button type="submit" id="submit" value="Submit"></button>
        </fieldset>
      </form>
      </head>
      </body> 

/* file: styles.css */
/* style.css */

body{
  background-image: url(https://images.pexels.com/photos/1283219/pexels-photo-1283219.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);
font-family: sans-serif;
}

h1,#description,fieldset{
  color: gainsboro; 
}

label{
  display: block;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Challenge Information:

Survey Form - Build a Survey Form

2

I’m struggling to read any of the text on the created form due to a low contrast. That being said, the terms and conditions button does not have a value.

Hope this helps. :slight_smile:

3

Hi there!
Putting h5 tag within the legend element is not correct Syntex for HTML.

Also You have missing the anchor closing tag in above code.

4

Hello!

Here is a link to verify code (it works for both HTML and CSS). You can right click on the link to open it in a new tab if you like.

https://validator.w3.org/nu/#textarea

As well, you may wish to view the content in the textarea before deleting it to place your code there for verification. The ‘placeholder code’ is a basic HTML template setup, which may help with some of the issues with your current code.

I usually do a step by step fix in the verifier until there are not any more errors showing. Then, I copy and paste the code from the textarea back into my project.

Hopefully, this helps you!

5

</ input id=“submit” type=“submit”>

  • You should have an input or button element with an id of submit.

  • Failed:Your #submit should have a type of submit.

input or button nothing works. I added the / so it would show up.

6

Hi there!
Create your own topic to the challenge, using help button.

1 Like
7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.