Question

我是网页设计的新手，我正在从书中开展一些项目。我有一个我应该使用元素和元素。在本书中，我读到重置按钮应该将所有元素重置为最初加载页面时的值，但这种情况从未发生过。我还尝试在单击提交按钮时查看chrome dev工具中的事件监听器断点，以查找提交事件。这似乎也行不通。我在这里错过了什么吗？我将发布我的HTML并希望你能帮我看看我的错误。

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>coffeerun</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
</head>

<body class="container">
<header>
<h1>CoffeeRun</h1>
</header>
<section>
<div class="panel panel-default">
  <div class="panel-body">
    <form data-coffee-order="form">
     <div class="form-group">
        <label for="coffeeOrder">Coffee Order</label>
        <input class="form-control" name="coffee" value="" id="coffeeOrder">
      </div>
      <div class="form-group">
        <label for="emailInput">Email</label>
        <input class="form-control" type="email" name="emailAddress" value="" id="emailInput">
      </div>
      <div class="radio">
        <label>
            <input type="radio" name="size" value="short">
            Short
          </label>
      </div>
      <div class="radio">
        <label>
            <input type="radio" name="size" value="tall" checked>
            Tall
          </label>
      </div>
      <div class="radio">
        <label>
            <input type="radio" name="size" value="grande">
            Grande
          </label>
      </div>
      <div class="form-group">
        <label for="flavorShot">Flavor Shot</label>
        <select id="flavorShot" class="form-control" name="flavor">
            <option value="">None</option>
            <option value="caramel">Caramel</option>
            <option value="almond">Almond</option>
            <option value="mocha">Mocha</option>
          </select>
      </div>
      <div class="form-group">
        <label for="strengthLevel">Caffeine Rating</label>
        <input id="strengthLevel" type="range" name="strength" value="30">
      </div>
    </form>
  </div>
</div>
<button type="submit" class="btn btn-default">Submit</button>
<button type="reset" class="btn btn-default">Reset</button>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js" charset="utf-8"></script>
<script src="scripts/datastore.js" charset="utf-8"></script>
<script src="scripts/formHandler.js" charset="utf-8"></script>
<script src="scripts/truck.js" charset="utf-8"></script>
<script src="scripts/main.js" charset="utf-8"></script>
</body>

Answer 1

您必须在表单标记内包含输入和按钮：

<form>
<section>
<div class="panel panel-default">
...
</section>
</form>

Answer 2

你应该把它放在＆＃39;形式＆＃39;标签;）

Answer 3

输入元素需要包含在<form>。

中

例如：

<form>
  <button type="submit" class="btn btn-default">Submit</button>
  <button type="reset" class="btn btn-default">Reset</button>
</form>

当您处理多个表单时，这一点很明显。如果不包含在表单中，提交和重置输入按钮现在将如何处理？例如：

<form>
  ...
</form>
...
<form>
  ...
</form>

<button type="submit" class="btn btn-default">Submit</button>
<button type="reset" class="btn btn-default">Reset</button>

正确的实施：

<form>
  <button type="submit" class="btn btn-default">Submit</button>
  <button type="reset" class="btn btn-default">Reset</button>
</form>

<form>
  <button type="submit" class="btn btn-default">Submit</button>
  <button type="reset" class="btn btn-default">Reset</button>
</form>

单击时，'submit'似乎永远不会触发按钮元素

3 个答案: