Question

我刚刚修改了我的页面标记，我添加了几个div来包装每个字段，所以我可以动态播放画面，现在重置停止工作，我不明白为什么

 <div id="form-area" data-active="">
      <div id="form-first-line">
           <form role="form">
                <div class="fild-group to-hide">
                     <select id="form-job-state">
                          <option value="any" selected>Job State</option>
                          <option value="any" >Any</option>
                          <option value="Completed">Completed</option>
                          <option value="Queued">Queued</option>
                          <option value="Running">Running</option>
                     </select>
                </div>
                <div class="fild-group to-hide">
                     <select id="form-no-symbols">
                          <option value="" selected>Number of slots</option>
                          <option value="$gt" >&gt;</option>
                          <option value="$lt">&lt;</option>
                          <option value="$in">=</option>
                          <option value="$lte">&lt;=</option>
                          <option value="$gte">&gt;=</option>
                          <option value="$ne">&lt;&gt;</option>
                     </select>
                     <input type="text" class="form-control" id="form-no-slots" value="0">
                </div>
                <div class="fild-group">
                     <label for="form-start-date">Start Date</label>
                     <div class="clean"></div>
                     <input type="date" class="form-control" id="form-start-date" placeholder="yyyy-mm-dd">
                     <input type="time" class="form-control" id="form-start-time" placeholder="HH:MM" value="00:00">
                </div>
                <div class="fild-group">
                     <label for="form-end-date">End Date</label>
                     <div class="clean"></div>
                     <input type="date" class="form-control" id="form-end-date" placeholder="yyyy-mm-dd">
                     <input type="time" class="form-control" id="form-end-time" placeholder="HH:MM" value="23:59">
                </div>
           </form>
      </div>
      <div id="form-second-line">
           <button id="form-query" data-type="" type="button" disabled>Query</button>
           <button type="reset" class="btn btn-default">Clear</button>
      </div>
 </div>

这是jsfiddle

Answer 1

您需要将其包装在<form>中将<form>放在第1行和</form>在最后。

不要添加</form>，只需将现有的一行移动几行，所以它也包括按钮。

此外，您可以更改为

<input type="reset" name="reset">

Answer 2

由于您的按钮位于表单之外，因此您需要在按钮上使用新的form属性。 This site提供了有关form属性的更多信息。

请参阅http://jsfiddle.net/34k0nz42/1/。

为表单提供ID <form id='formId'>
在按钮form='formID上使用<input form='formID' />。

HTML5按钮类型=重置停止工作

2 个答案: