Survey Form - Build a Survey Form

HTML-CSS
1

Hello everyone,
I have a problem with the code responsible for the submit button.

   **Your code so far**

/* file: index.html */
<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>Registration Form</title>
   <link rel="stylesheet" href="styles.css" /> 
 </head>
 <body>
<h1 id="title">Survey Form</h1>
<p id="description">This is a Survey Form!</p>
</body>
<form id="survey-form">
 <fieldset>
<label for="name"id="name-label">Name <input id="name" type="text" name="name" placeholder="Name " required></input></label>
<label for="email" id="email-label">Email <input id="email" mame="email" placeholder="Email" type="email" required></input></label>
<label for="number" id="number-label">Age <input id="number" name="number" placeholder="Age" type="number" min="8" max="124" required></input></label>
<label>
<select id="dropdown">
  <option Value="Select One">Gender</option>
<option value="Male">Male</option>
  <option value="Female">Female</option>
 </select></label>
 </fieldset>
 <fieldset
 <label> What experience do you have in Programming?
 <optioin>
   <label><input value="option" name="button" type="radio">Advanced</input>
   </option>
 <optioin>
   <label><input value="option" type="radio" name="button">Intermediate</input>
   <label><input value="option" type="radio" name="button">Beginner</input>
   </option>
 </label>
</fieldset>
<fieldset>
 <label> Which path do you want to follow?
   <option>
 <label><input value="option" type="checkbox" name="path">Front End Developer
</option>
<option>
 <label><input value="option" type="checkbox" name="path"> Back End Developer
</option>
<option>
 <label><input value="option" type="checkbox" name="path"> Python Developer
</option>
<option>
 <label><input value="option" type="checkbox" name="path"> Software Engineer
</option>
<option>
 <label><input value="option" type="checkbox" name="path"> Machinale Learning
</option>
 </label>
</fieldset>
<fieldset>
 <textarea id="submit" name="bio" rows="3" cols="30" placeholder="How did you find out about us?"></textarea>
 
</fieldset>
<input type="submit" value="Submit" id="submit"></input>
</forn>



/* file: styles.css */
body {
 width: 100%;
 height: 100vh;
 margin: 0;
 background-color: #1b1b32;
 color: #f5f6f7;
 font-family: Tahoma;
 font-size: 16px;
}
h1, p {
 margin: 1em auto;
 text-align: center;
}
form {
 width: 60vw;
 max-width: 500px;
 min-width: 300px;
 margin: 0 auto;
 padding-bottom: 2em;
}
fieldset {
 border: none;
 padding: 2rem 0;
 border-bottom: 3px solid #3b3b4f;
}

fieldset:last-of-type {
 border-bottom: none;
}
label {
 display: block;
 margin: 0.5rem 0;
}


input, textarea {
 background-color: #0a0a23;
 border: 1px solid #0a0a23;
 color: #ffffff;
}

input[type="submit"] {
 display: block;
 width: 60%;
 margin: 1em auto;
 height: 2em;
 font-size: 1.1rem;
 background-color: #3b3b4f;
 border-color: white;
 min-width: 300px;

   **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:104.0) Gecko/20100101 Firefox/104.0

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

2

I haven’t taken a detailed look at your Code but it looks like you have a spelling error in the closing </form> tag.

Edit: Your textarea has an id of submit. An Id should be unique for each element. But here, both the textarea and the submit have an id of submit. The tests should pass if you delete the id from the textarea.

3

There are a lot of typos in this code

  • fieldset element not properly closed with >
  • </forn>?
  • <optioin> is not a valid html tag

In addition, <input> elements are elements with single tag and doesnt require closing tags. So no need </input>.

Perhaps the checker are confused with the typo hence are not able to detect the <input> element. It is also preferable to format your document and maintain the indents to make it easier for others to read.

Hope it helps!

4

I sincerely thank you for your help. I will make them unique next time.

5

Thank you sincerely for drawing my attention to the errors,
I will do as you advise

6

As some of the mods have suggested, try using https://validator.w3.org/ to check if your HTML are properly written or not.

7

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