Inspector Warnings - Survey Form

1

Good Morning!

If anyone could give me some feedback on my code, i would be very grateful for your advice!

I am reading the tests info, and so far it’s straightforward - the only thing right now is that when i click on “analyze html”, it says; “HTML Inspector warnings:” in yellow…

but it doesn’t point out any mistakes…usually when there is no mistake it only says “no mistakes” and then the tab goes away.

https://codepen.io/Philip_B/pen/zgBNjm

Phil.

2

It just looks like that on Codepen. If you ever want a second opinion you can always use another online validator.

BTW, you should only have one form element, all the inputs/labels go inside that one form.

1 Like
3

This is what the Inspector says to me:

  • ‘action’ is not a valid attribute of the
    element.
  • ‘method’ is not a valid attribute of the
    element.
  • ‘action’ is not a valid attribute of the
    element.
  • ‘method’ is not a valid attribute of the
    element.
  • ‘action’ is not a valid attribute of the
    element.
  • ‘method’ is not a valid attribute of the
    element.
  • The id ‘survey-form’ appears more than once in the document.
1 Like
4 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>


    <main id="main"><h1 id="title">Survey Form</h1>
    
      <form id="survey-form" action="/my-handling-form-page" method="post">
      <p id="description"><b>Let us know how we can create more coding challenges</b></p> 
    
      <label for="name" id="name-label">Name: </label>
        <input id="name" type="text" required placeholder="Enter your name" name="fullname"></input>
       
    <div action="/my-handling-form-page" method="post">      
      <label for="email" id="email-label">Email:</label>
      <input type="email" id="email" required placeholder="Enter your Email"></input></div>
    
    <div action="/my-handling-form-page" method="post">    
      <label for="number" id="number-label">Age: </label>
      <input type="number" id="number" required placeholder="Age" style="margin-left:10px;" min="0.0000001" max="1500000000"></input></div>
    
    <div action="/my-handling-form-page" method="post">  
      <label for="dropdown" id="dropdown-label">What is your coding status? </label>
    <select name="currenPos" class="dropdown" id="dropdown" style="margin-right:150px">
      <option disabled value>Select an option</option>
      <option value="beginner">Beginner</option>
      <option value="student"> Full time student</option>
      <option value="professional"> Full time coder</option>
      <option value="other"> other</option>
      </select></div></form>
    
    <div id="survey-form"></div>
      <label><input type="radio" name="Easy-Moderate-Hard">
        easy</label>
      <label><input type="radio" name="Easy-Moderate-Hard">
        moderate</label>
      <label><input type="radio" name="Easy-Moderate-Hard">
        hard</label>
      
    
        </main>     
</body>
</html>

is that right? just include the following things down here at least, and insert your form in between the body tags.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    /*insert  everything of your form here*/
</body>
</html>
1 Like
5

I just tested it works, make sure that all the requirements are met.

1 Like
6

Now you have invalid HTML.

As the inspector says you have invalid attributes on the div elements and you are using the #survey-form id more than one time (it should be unique). Remove the action and method attributes from your divs and make sure you only use the #survey-form id one time.

1 Like