Bootstrap Basic CSS-forms (forms)

style

name	class	Description
Vertical type (default)	. form-vertical (not required, default)	Stacked, left-justified for all control's label text
Row type	. form-inline	Label text left aligned, controls present in Inline-block compact form
Search Type	. form-search	A classic search and beautification scheme that rounds a text box
Horizontal type	. form-horizontal	Left floats, labels are on the same line as their corresponding controls, right-aligned label text

supported form Controls
Inputs

<input type= "text" placeholder= "text input" >

Textarea

<textarea rows= "3" ></textarea>

checkboxes and Radios

<label class= "checkbox" >
  <input type= "checkbox" Name= "Optioncheckbox" value= "sure" >
  Option One Is this and that-be sure to include why it ' s great
</label>
 
<label class= "Radio" >
  <input type= "Radio" name= "Optionsradios" id= "optionsRadios1" value= "Option1" checked> Option one is this and
  that-be sure to Clude why it ' s great
</label>
<label class= "Radio" >
  <input type= "Radio" name= "  Optionsradios "id=" OptionsRadios2 "value=" Option2 ">
  Option, can be something else and selecting it would deselect Option one
</label>

Add. Inline to <label> to keep them in one line.

<label class= "checkbox inline" >
  <input type= "checkbox" Name= "InlineCheckbox1" value= "Option1" > 1
</label>
<label class= "checkbox inline" >
  <input type= "checkbox" Name= "InlineCheckbox2" Value= "Option2" > 2
</label>
<label class= "checkbox inline" >
  <input type= "checkbox" Name= "InlineCheckbox3" value= "Option3" > 3
</label>

Selects

<select>
  <option>1</option>
  <option>2</option>
  <option>3< /option>
  <option>4</option>
  <option>5</option>
</select>
 
<select multiple= "multiple" >
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

Extending form Controls
Front & rear input boxUse text:

<div class= "Input-prepend" >
  <span class= "add-on" >@</span>
  <input class= "span2" id= " Prependedinput "type=" text "placeholder=" Username ">
</div>
<div class=" Input-append ">
  <input class= "span2" id= "Appendedinput" type= "text" >
  <span class= "add-on" >.00</span>
</div>

You can also use buttons:

<div class= "Input-append" >
  <input class= "span2" id= "Appendedinputbutton" type= "text" >
  < Button class= "btn" type= "button" >Go!</button>
</div>

Drop-down button:

<div class= "Input-append" >
  <input class= "span2" id= "Appendeddropdownbutton" type= "text" >
  < Div class= "Btn-group" >
    <button class= "btn dropdown-toggle" data-toggle= "dropdown" >
      Action
      <span class= "Caret" ></span>
    </button>
    <ul class= "Dropdown-menu" >
      ...
    </ul>
  </div>
</div>

Split drop-down button:

<form>
  <div class= "Input-prepend" >
    <div class= "Btn-group" >...</div>
    < Input type= "text" >
  </div>
  <div class= "Input-append" >
    <input type= "text" >
    <div class= "Btn-group" >...</div>
  </div>
</form>

Search box:

<form class= "Form-search" >
  <div class= "Input-append" >
    <input type= "text" class= "span2 Search-query ">
    <button type=" Submit "class=" BTN ">Search</button>
  </div>
  <div class= "Input-prepend" >
    <button type= "Submit" class= "BTN" >Search</button>
    <input type= " Text "class=" span2 search-query ">
  </div>
</form>

Control SizeAdd a. Input-block-level to a <input> or <textarea> element to make it appear as a block-level element.

<input class= "Input-block-level" type= "text" placeholder= ". Input-block-level" >

You can give <input> specify the following classes to control the size.

<input class= "Input-mini" type= "text" placeholder= ". Input-mini" >
<input class= "Input-small" type= "text "Placeholder=". Input-small ">
<input class=" Input-medium "type=" text "placeholder=". Input-medium ">
<input class= "Input-large" type= "text" placeholder= ". Input-large" >
<input class= "Input-xlarge" Type= "text" placeholder= ". Input-xlarge" >
<input class= "Input-xxlarge" type= "text" placeholder= ". Input-xxlarge ">

You can also use. span1 to. Span12 to control the size.

<input class= "Span1" type= "text" placeholder= ". Span1" >
<input class= "span2" type= "text" placeholder= ". Span2 ">
<input class=" span3 "type=" text "placeholder=". Span3 ">
<select class=" Span1 ">
  ...
</select>
<select class= "span2" >
  ...
</select>
<select class= "span3" >
  ...
</select>

Use. Controls-row to make multiple <input> in one line.

<div class= "Controls" >
  <input class= "Span5" type= "text" placeholder= ". Span5" >
</div>
<div class= "Controls Controls-row" >
  <input class= "Span4" type= "text" placeholder= ". Span4" >
  <input class= "Span1" type= "text" placeholder= "Span1" >
</div>

You do not have to use a real form label when you are performing a non-editable input box.

<span class= "Input-xlarge uneditable-input" >some value here</span>

Form ActionAt the end of the form, place a set of actions (buttons).

<div class= "Form-actions" >
  <button type= "Submit" class= "btn btn-primary" >save Changes</button >
  <button type= "button" class= "btn" >Cancel</button>
</div>

Help TextIn-line Help text

<input type= "text" ><span class= "Help-inline" >inline help text</span>

Block-level help text

<input type= "text" ><span class= "Help-block" >a longer block of help text, breaks onto A New line and May ex Tend beyond one line.</span>