标签未显示在 html 中...使用数据列表时答案

【问题标题】：label not showing in html...when using datalist标签未显示在 html 中...使用数据列表时
【发布时间】：2022-11-24 12:24:41
【问题描述】：

为什么在 html 中使用数据列表时标签不显示如果有人知道为什么它没有运行那么请帮助我..

我在另一个新文件中尝试了相同的代码然后它工作得很好但是当在这个文件中运行时它不会显示标签.p.s我使用勇敢的浏览器但它也不会在其他浏览器中显示..

<!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 class="image">
            <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 class="topping">
        <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 class="Answer">
        <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 class="Burger_type">
    <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 class="sauce">
    <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>

【问题讨论】：

请将您的 HTML 发布到您的表单和标签所在的位置。
@KnightTheLion 在这里..
它显示在 Windows 11 的 Chrome 中。
@Mehrwarz 所以它是操作系统的问题..我目前正在使用 Windows 10

标签： html forms

【解决方案1】：

    <section class="Burger_type">
    <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>

我评论了问题出在哪里。

我在我的 IDE 中使用 VS Code，在 VS Code 中我安装了 Prettier，当我暂时玩完后，我用它来格式化我的 HTML、CSS 和 JS 代码。它有助于清理东西。如果您的 HTML 代码有错误，Prettier 将不会格式化文档，它会为您提供错误位置和原因的参考。当我关闭选择标签时，您的输入在页面上的格式正确。使用 Prettier 很简单。不是说使用 Prettier，而是使用某种类型的格式化程序来帮助清理并查看像这样容易被忽视的问题是一种方便的方法。

【讨论】：