Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
<form>
<label for="text">Text Input</label>
<input type="text" name="text">
<label for="textplaceholder">Text Input with Placeholder</label>
<input type="text" name="textplaceholder" placeholder="Example Input">
<label for="textdefault">Text Input with Default Input</label>
<input type="text" name="textdefault" value="Default Input">
<label for="required">Required Text Input</label>
<input type="text" name="required" required>
<label for="password">Password</label>
<input type="password" name="password">
<label for="textarea">Text Area</label>
<textarea name="textarea" cols="50" rows="4"></textarea>
</form>
<form>
<div class="input-group-radio">
<label for="option-1">
<input id="option-1" type="radio" value="option1" name="option">
<div class="button">Option 1</div>
</label>
<label for="option-2">
<input id="option-2" type="radio" value="option2" name="option">
<div class="button">Option 2</div>
</label>
<label for="option-3">
<input id="option-3" type="radio" value="option3" name="option">
<div class="button">Option 3</div>
</label>
<label for="option-4">
<input id="option-4" type="radio" value="option4" name="option">
<div class="button">Option 4</div>
</label>
</div>
</form>
<form>
<div class="input-group-checkbox">
<label for="show-credits">
<input id="show-credits" type="checkbox" value="true" checked="">
<div class="button">Credits</div>
</label>
<label for="show-labels">
<input id="show-labels" type="checkbox" value="true" checked="">
<div class="button">Labels</div>
</label>
<label for="show-animate">
<input id="show-animate" type="checkbox" value="true" checked="">
<div class="button">Animate</div>
</label>
<label for="show-responsive">
<input id="show-responsive" type="checkbox" value="true" checked="">
<div class="button">Responsive</div>
</label>
</div>
</form>
<form>
<div class="input-group-label">
<label class='input-group-addon' for="slider-start">Slider start position</label>
<input type="number" size="2" placeholder="50" value="50" min="0" max="100" name="slider-start" step="1" style=" width: 70px;">
<div class="input-group-addon">%</div>
</div>
<div class="input-group-label">
<label class='input-group-addon' for="inlinelabel">Inline label</label>
<input type="text" placeholder="Input with inline label" name="inlinelabel">
<div class='input-group-addon'>Inline Add-On</div>
</div>
<div class="input-group-label">
<label class='input-group-addon' for="inlinelabel">Inline label</label>
<input type="text" placeholder="Input with inline label" name="inlinelabel">
</div>
<div class="input-group-label">
<input type="text" placeholder="Input with inline label" name="inlinelabel">
<div class='input-group-addon'>Inline Add-On</div>
</div>
<div class="input-group-button">
<input type="text" placeholder="Input with attached submit button">
<input type="submit" name="">
</div>
<div class="input-group-label">
<label class='input-group-addon' for="inlinelabel">Inline label longer still</label>
<input type="text" placeholder="Input with attached submit button">
<button id="load-btn" class="button button-secondary">Load</button>
</div>
</form>
<form>
<select>
<option value="option1">Option 1</option>
<option value="option1">Option 2</option>
<option value="option1">Option 3</option>
<option value="option1">Option 4</option>
</select>
<input type="submit">
</form>
<form class="form-horizontal">
<div class="input-group">
<label>Horizontal Input</label>
<input type="text" name="">
</div>
<div class="input-group">
<label>Form Input</label>
<input type="text" name="">
</div>
</form>