Examples of common form elements

nrel-form-elements.html

<div class="form-group">
    <div class="row">
        <div class="col-sm-6">
            <label for="name">Your name <span class="required">(Required)</span></label>
            <input type="text" class="form-control" id="name" name="name" required>
        </div>
    </div>
</div>

<div class="form-group">
    <textarea class="form-control" rows="3" placeholder="Textarea"></textarea>
</div>

<div class="form-group">
    <div class="row">
        <div class="col-sm-8">
            <label for="group">Dropdown Label <span class="required">(Required)</span></label>
            <select class="form-control" id="group" name="group" required="">
                <option>Option 1</option>
                <option>Option 2</option>
                <option>Option 3</option>
                <option>Option 4</option>
            </select>
        </div>
    </div>
</div>

<div class="form-group">
    <p>Checkboxes</p>

    <div class="checkbox">
        <label><input type="checkbox" value=""> Option one </label>
    </div>

    <div class="checkbox disabled">
        <label><input type="checkbox" value="" disabled> Option two is disabled </label>
    </div>
</div>

<div class="form-group">
    <p>Action Button Dropdown</p>
    <div class="btn-group">
      <button type="button" class="btn btn-primary">Action</button>
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
      </button>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>

</div>

<div class="form-group">
    <p>Radios</p>

    <div class="radio">
        <label><input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> Option one </label>
    </div>

    <div class="radio">
        <label><input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> Option two can be something else and selecting it will deselect option one </label>
    </div>

    <div class="radio disabled">
        <label><input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled> Option three is disabled </label>
    </div>
</div>

<div class="form-group has-success">
    <label class="control-label" for="inputSuccess1">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
    <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>

<div class="form-group has-warning">
    <label class="control-label" for="inputWarning1">Input with warning</label>
    <input type="text" class="form-control" id="inputWarning1">
</div>

<div class="form-group has-error">
    <label class="control-label" for="inputError1">Input with error</label>
    <input type="text" class="form-control" id="inputError1">
</div>

<div class="has-success">
    <div class="checkbox">
        <label>
            <input type="checkbox" id="checkboxSuccess" value="option1"> Checkbox with success
        </label>
    </div>
</div>

<div class="has-warning">
    <div class="checkbox">
        <label>
            <input type="checkbox" id="checkboxWarning" value="option1"> Checkbox with warning
        </label>
    </div>
</div>

<div class="has-error">
    <div class="checkbox">
        <label>
            <input type="checkbox" id="checkboxError" value="option1"> Checkbox with error
        </label>
    </div>
</div>