label not showing in html...when using datalist-CodePudding

Why is the label not showing while using datalist in html if anyone have any idea of why this is not running then please help me..

i tried the same code in another new file then it worked perfectly but when run in this it wont show the label .p.s i am using brave browser but it wont show in other browsers too..

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" >
    <meta http-equiv="X-UA-Compatible" content="IE=edge" >
    <meta name="viewport" content="width=device-width, initial-scale=1.0" >
    <title>forms</title>
    <link rel="stylesheet" href="form.css" >
  </head>
  <body>
    <div id="backgnd">
        <div >
            <img src="https://images-platform.99static.com//1qWC_KuhJeSkGLZV6M7fC3g5Xb4=/113x113:848x848/fit-in/500x500/99designs-contests-attachments/81/81740/attachment_81740257" alt="burger's logo">
        </div>
        
      <form action="/button.html">
        <h1>Enter your Credentials</h1>
        <p>
         A perfect place to order your favoriate burgers..reach us or order online 
        </p>
        
        <label for="number">number of burgers to be ordered
        </label>
        <br>
        <input type="number" name="no_user" id="number" step="1">
        <br><br>
        <label for="spiciness">
        <ins>Level of your Spiciness</ins>
        </label>
        <br><br>
        <span>not spicy</span>
        <input type="range" name="spicy" id="spiciness" max="10" min="0" step="0.01">
        <span>really spicy</span>
        <br><br>
       
        <section >
        <ins>select the topping you would like</ins><br><br>
        <input type="checkbox" name="topping" value="lettuce" id="lettuce">
        <label for="lettuce">lettuce</label>
        <input type="checkbox" name="topping" value="tomato" id="tomato">
        <label for="tomato">tomato</label>
        <input type="checkbox" name="topping" value="Onion" id="Onion">
        <label for="Onion">Onion</label>
        </section><br><br>
      
        <section >
        <strong>what type of burger would you like to have</strong> <br><br>
        <input type="radio" name="answer" id="veg">
        <label for="veg">Veg</label>
        <input type="radio" name="answer" id="Non-veg">
        <label for="Non-veg">Non-veg</label>
    </section><br><br>

    <section >
    <label for="Burger">
        <strong>What kind of burger would you like to have?</strong>
    </label><br>
    <select name="burger" id="Burger">
        <option value="veggie-burgers">Veggie Burgers</option>
        <option value="beef-burgers">Beef Burgers</option>
        <option value="portobello_mushroom-burgers">Portobello Mushroom Burgers</option>
        <option value="black_bean-burgers">Black Bean Burgers</option>
    </section><br><br>


    <section >
    <label for="sauce">
        <strong>What type of sauce would you like?</strong>   <!------------------------ label not showing-------------------> 
    </label><br>
    <input type="text" list="sauces" id="sauce" name="sauce">
    <datalist id="sauces">
    <option value="ketchup">Ketchup</option>    
    <option value="mayo">Mayo</option>
    <option value="yoghurt">Yoghurt</option>
    </datalist>
    </section>
</form>
    </div>
  </body>
</html>

CodePudding user response：

    <section >
    <label for="Burger">
        <strong>What kind of burger would you like to have?</strong>
    </label><br>
    <select name="burger" id="Burger">
        <option value="veggie-burgers">Veggie Burgers</option>
        <option value="beef-burgers">Beef Burgers</option>
        <option value="portobello_mushroom-burgers">Portobello Mushroom Burgers</option>
        <option value="black_bean-burgers">Black Bean Burgers</option>
</select> <!-- You didn't close this tag -->
    </section><br><br>

I commented where the issue was.

I use VS Code for my IDE, and in VS code I have Prettier installed, I use this to format my code for HTML, CSS, and JS when I am done playing for the moment. It helps clean things up. If you have an error in your code for HTML, Prettier will not format the document, and it will give you a reference to where and why. When I closed the select tag, your input formatted properly on the page. It was simple with Prettier. Not saying use Prettier, but it is handy to have some type of formatter to help clean things up and to see easily overlooked issues like this one.

CodePudding user response：

we've all been there, but your <select> element is not closed, I think thats the issue you were having.