Form Builder output

Form Builder output

by Christopher McCulloh

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="http://fuelux-snippets.herokuapp.com/img/favicon.ico"></script>
<script src="//www.fuelcdn.com/fuelux-utilities/1.0.0/js/fuelux-utilities.min.js"></script>
<script src="https://www.fuelcdn.com/fuelux/3/js/fuelux.min.js"></script>
<link rel="stylesheet" href="https://www.fuelcdn.com/fuelux/3/css/fuelux.min.css">
<body style="padding: 10px;" class="fuelux">
<form class="form-horizontal">
<fieldset>


<!-- change col-sm-N to reflect how you would like your column spacing (http://getbootstrap.com/css/#forms-control-sizes) -->


<!-- Form Name -->
<legend>Form Name</legend>

<!-- Text input http://getbootstrap.com/css/#forms -->
<div class="form-group">
  <label for="textinput" class="control-label col-sm-2">Input</label>
  <div class="col-sm-10">
    <input type="text" class="form-control" id="textinput" placeholder="placeholder">
    <p class="help-block">help</p>
  </div>
</div>
<!-- Spinbox http://getfuelux.com/javascript.html#spinbox -->
<div class="form-group">
  <label for="spinbox" class="control-label col-sm-2">Spinbox</label>
  <div class="col-sm-10">
    <div class="spinbox" data-initialize="spinbox" id="spinbox">
      <input id="spinboxInput" type="text" class="form-control input-mini spinbox-input" value="1">
      <div class="spinbox-buttons btn-group btn-group-vertical">
        <button type="button" class="btn btn-default spinbox-up btn-xs">
          <span class="glyphicon glyphicon-chevron-up"></span><span class="sr-only">Increase</span>
        </button>
        <button type="button" class="btn btn-default spinbox-down btn-xs">
          <span class="glyphicon glyphicon-chevron-down"></span><span class="sr-only">Decrease</span>
        </button>
      </div>
    </div>
    <p class="help-block">help</p>
  </div>
</div>
<!-- Prepended text http://getbootstrap.com/components/#input-groups -->
<div class="form-group">
  <label...

CSS

body {
    padding: 20px;
}