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

Tell us what’s happening:

Describe your issue in detail here.

Your code so far

<!-- file: index.html -->
<html lang="en">
    <meta charset="UTF-8">
    <title>Registration Form</title>
    <link rel="stylesheet" href="styles.css" />
    <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>
    <input type="radio" id="submit" value="radio" name="radio">submit</input>
    <input type="radio"  id="submit"  value="radio" name="radio">submit</input>
     type="checkbox" value="checkbox"></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>

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

/* 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 */
textarea {
  width: 100%;
  padding: 10px;
  margin: 5px 0;
  border: 1px solid #ccc;
  border-radius: 5px;

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

/* Style the submit button */
  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/ Safari/537.36

Challenge Information:

Survey Form - Build a Survey Form

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.

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

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