SuperPlan(9)TaoBao Winner - UI Forms with Validation States-优快云博客

本文详细介绍了如何使用Bootstrap创建美观且实用的表单，包括输入框、下拉菜单、按钮组等组件的使用方法，并探讨了不同尺寸和状态的应用。

SuperPlan(9)TaoBao Winner - UI Forms with Validation States

12. BootStrap with Version 2.3.2
12.7 Base CSS - Forms
Selects
Directly use <select><option>…</option></select> Or <select multiple="multiple"> to display all the options. But I do not think it is useful.

Prepended and appended inputs
This should be useful
<div class="input-append">
<input class="span2" id="appendedInputButton" type="text">
<button class="btn" type="button">Go!</button>
</div>

<div class="input-append">
<input class="span2" id="appendedInputButtons" type="text">
<button class="btn" type="button">Search</button>
<button class="btn" type="button">Options</button>
</div>

Button Dropdowns
<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">
<li>Add</li>
<li>Update</li>
<li>Delete</li>
</ul>
</div>
</div>

Do not forget to put <!DOCTYPE html> at the beginning. Or otherwise, the input row will be to short.

Segmented DropDown Groups
<ul class="dropdown-menu">
<li>Add</li>
<li>Update</li>
<li>Delete</li>
<li class="divider">
<li>Quit</li>
</ul>

Search Form
<form class="form-search">
<div class="input-append">
<input type="text" class="span2 search-query">
<button type="submit" class="btn">Search</button>
</div>
</form>

12.8 Base CSS - Forms - Control sizing
We can use .input-large or .span*. And there is a kind of sizing, block level. It can be applied to any <input> and <textarea>
<input class="input-block-level" type="text" placeholder=".input-block-level">

Relative Sizing
<input class="input-mini" type="text" placeholder=".input-mini"><br>
<input class="input-small" type="text" placeholder=".input-small"><br>
<input class="input-medium" type="text" placeholder=".input-medium"><br>
<input class="input-large" type="text" placeholder=".input-large"><br>
<input class="input-xlarge" type="text" placeholder=".input-xlarge"><br>
<input class="input-xxlarge" type="text" placeholder=".input-xxlarge"><br>

Grid Sizing
span* can be applied to <input> <select>, it is really good.
<input class="span1" type="text" placeholder=".span1"><br>
<input class="span2" type="text" placeholder=".span2"><br>
<input class="span3" type="text" placeholder=".span3"><br>
<select class="span1"><br>
<option>1</option>
</select>
<select class="span2"><br>
<option>1</option>
</select>
<select class="span3"><br>
<option>1</option>
</select>

Multiple Inputs in One Line
controls-row will be useful to control the proper spacing, collapse white-space, sets the proper margins, clears the float.
<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>

Uneditable Inputs
<div class="controls">
<span class="input-xxlarge uneditable-input">Some value here</span>
</div>

Form Actions
<div class="form-actions">
<button type="submit" class="btn btn-primary">Save changes</button>
<button type="button" class="btn">Cancel</button>
</div>

btn-primary means that this is the button to submit from my understanding.

Help Text
<div class="controls">
<input type="text"><span class="help-inline">Inline help text</span>
</div>
<div class="controls">
<input type="text">
<span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>

Form Control States
<div class="controls">
<input class="span3" type="email" required>
</div>
<div class="controls">
<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
</div>

There is hint when you click on the input box.

Validation States
<form class="form-horizontal">
<div class="control-group warning">
<label class="control-label" for="inputWarning">Input with warning</label>
<div class="controls">
<input type="text" id="inputWarning">
<span class="help-inline">Something may have gone wrong</span>
</div>
</div>

<div class="control-group error">
<label class="control-label" for="inputError">Input with error</label>
<div class="controls">
<input type="text" id="inputError">
<span class="help-inline">Please correct the error</span>
</div>
</div>

<div class="control-group info">
<label class="control-label" for="inputInfo">Input with info</label>
<div class="controls">
<input type="text" id="inputInfo">
<span class="help-inline">Username is already taken</span>
</div>
</div>

<div class="control-group success">
<label class="control-label" for="inputSuccess">Input with success</label>
<div class="controls">
<input type="text" id="inputSuccess">
<span class="help-inline">Woohoo!</span>
</div>
</div>
</form>

I want to be a good UI person. Haha.

I am listening to a sone while I am programming. "有时候，我选择留恋不放手。"

13. BackBone
come soon...

References:
http://twitter.github.io/bootstrap/base-css.html?#forms

Previous
http://sillycat.iteye.com/blog/1873754
http://sillycat.iteye.com/blog/1873144