web-dev-qa-db-ja.com

Bootstrapで[キャンセル]ボタンを作成する方法

次のBootstrapマークアップがあります：

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="username">Username</label>
  <div class="col-md-4">
  <input id="username" name="username" type="text" placeholder="" class="form-control input-md" required="" maxlength="8" value="">
  </div>
</div>

<!-- Button (Double) -->
<div class="form-group">
  <label class="col-md-4 control-label" for="submit"></label>
  <div class="col-md-8">
    <button id="submit" name="submit" class="btn btn-primary" value="1">Create Profile</button>
    <button id="cancel" name="cancel" class="btn btn-default" value="1">Cancel</button>
  </div>
</div>

Create Profileボタンをクリックするとフォームが正常に機能し、特定のフィールドが「必須」であることを通知します。しかし、Cancelボタンをクリックすると、必須フィールドが不完全なため、フォームを離れることができません。

Bootstrapにフォームのキャンセルボタン機能はありますか？

htmlformstwitter-bootstrap-3cancel-button
9
H. Ferrence

コードを次のように変更します。

<!-- Button (Double) -->
<div class="form-group">
  <label class="col-md-4 control-label" for="submit"></label>
  <div class="col-md-8">
    <button id="submit" name="submit" class="btn btn-primary" value="1">Create Profile</button>
    <a href="/link-to/whatever-address/" id="cancel" name="cancel" class="btn btn-default">Cancel</a>
  </div>
</div>
11
Adrian Chrostowski

以下に示すように、単にタイプ属性をリセットに設定します。

<button type="reset" class="btn btn-default pull-right">Cancel</button>

1
Emmanuel Aninze