Survey Form - Build a Survey Form error this #submit should have type of submit

HTML-CSS
1

Tell us what’s happening:

Describe your issue in detail here.

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">Please fill out this form with the required information.</p>
   <form id="survey-form" >

    <label for="name" id="name-label">Name: </label>
      <input id="name" type="text" placeholder="Enter your name" required ></input>

   <label for"email id="email-label">Email: </label>
      <input id="email" type="email" placeholder="Enter your email" required></input>

    <label for="number" id="number-label">Age: </label>
      <input id="number" min="17" max="100" type="number" placeholder="Enter your age" required></input>

        <label for="dropdown">Select an option:</label>
        <select id="dropdown" name="dropdown">
            <option value="option1">Student</option>
            <option value="option2">Porfosinal</option>
            <option value="option2">Others</option>
        </select>
    <input type="radio" id="submit" value="radio" name="radio">submit</input>
    <input type="radio"  id="submit"  value="radio" name="radio">submit</input>
    <input 
     type="checkbox" value="checkbox"></input>
    <input 
type="checkbox" value="checkbox"></input>
<p>Any comments or suggestions?</p>
<textarea placeholder="Enter your comment here..."></textarea>


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

   </form>
  </body>
</html>

/* file: styles.css */
/* Apply general styles to the entire form */
#survey-form {
  width: 70%;
  margin: 0 auto;
  backgroung-color:blue;
}

/* Style the title */
#title {
  font-size: 24px;
  text-align: center;
  margin: 20px 0;
}

/* Style the description */
#description {
  font-size: 16px;
  text-align: center;
  margin: 20px 0;
}

/* Style the labels */
label {
  display: block;
  margin: 10px 0;
}

/* Style the input fields */
input[type="text"],
input[type="email"],
input[type="number"],
select,
textarea {
  width: 100%;
  padding: 10px;
  margin: 5px 0;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* Style the radio buttons and checkboxes */
input[type="radio"],
input[type="checkbox"] {
  margin-right: 5px;
}

/* Style the submit button */
#submit{
  background-color: #007BFF;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin: 20px 0;
  
}

/* Add hover effect to the submit button */


/* Style the select dropdown */
select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* Add additional styles or adjust as needed */

Your browser information:

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

Challenge Information:

Survey Form - Build a Survey Form

2

You have duplicate id for the submit in the input .
Change the id attributes of radio buttons and checkboxes to make them unique within the form.
Your #submit should have a type of submit . Thet means that the button should have the id submit and the type submit.

3

you can use sabmi1,sabmit2…and for the button submit.Hope this helps…

4

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