Required attribute does not work in HTML for the Survey Form

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

Your code so far

<!DOCTYPE HTML>

<html>
  <header>
 <h1 id="title">Guitar Survey</h1>
  </header>
  <body>
  <p id="description"> Fill out this survey to let us know your favorite style of guitar</p>

<form id="survey-form">
  
  <div class="input-headings">
  
  <label for="name "id="name-label"> Name </label>
  <input id="name" type="text" name="name" placeholder="Jimi Hendrix" class="form-inputs" required> </input>
  <br>

  <label for="email" id="email-label"> Email </label>
  <input id="email" type="text" name="email" placeholder="Email@gmail.com" class="form-inputs" required> </input>
  <br>

  <label for="number" id="number-label"> Number of Frets </label>
  <input id="number" type="number" name="number" placeholder="00" min="21" max="24" class="form-inputs" required> </input>
  <br>

  
  <label for="dropdown" id="style"> Style of Guitar     </label>
  <select id="dropdown"class="form-inputs">
    <option value="Model_S"> Stratocaster </option>
    <option value="Model_T"> Telecaster </option>
    <option value="Model_J"> Jaguar </option>
    <option value="Model_JZ"> Jazzmaster </option>
    <option value="Model_M"> Mustang </option>
    </select>
    <br>
    <br>
    


  <label for="model_color" id="model_color"> <b> Model Color: </b> </label>
  <br>
  <input id="model_color" type="radio" id="black" name="color" value="black">
  <label for="model_color"> Black </label>
  <br>


  <input id="model_color" type="radio" id="Sunburst" name="color" value="Sunburst">
  <label for="model_color"> Sunburst </label>
  <br>

  <input id="model_color" type="radio" id="red" name="color" value="red">
  <label for="model_color"> Red </label>
  <br>

  <input id="model_color" type="radio" id="seafoam green" name="color" value="seafoam green">
  <label for="model_color"> Seafoam Green </label>
  <br>
  <br>

  <label for="features"> <b> Add Features: </b>         </label> 
  <br>

  <input id="checkbox" type="checkbox" name="Features" value="Kind of wood used for body">
  <label for="checkbox"> Alder - $400 </label>
  <br>

    <input id="checkbox" type="checkbox" name="Features" value="Kind of wood used for body">
  <label for="checkbox">  Swamp Ash - $300 </label>
  <br>

    <input id="checkbox" type="checkbox" name="Features" value="Kind of wood used for body">
  <label for="checkbox"> Basswood - $250 </label>
  <br>
  <br>


  <label id="textarea" <b> Additional Comments: </b>     </label>
    <br>

  <textarea id="textarea" name="instructions" rows="5" cols="50">
  </textarea>
  <br>

  
  <input id="submit" type="submit" value="Place Order" class="submit-button">

  

  
  
  




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

Your browser information:

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

Challenge: Build a Survey Form

Link to the challenge:

2

Email field should be HTML5 validated : expected ‘text’ to equal ‘email’

You did not use the correct type attribute value.

In the future, please link to your Codepen with the test script so people do not have to re-create the project to help you.

3

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